I have a page that uses the Facebook Feed and Share dialog. I read on this page of documentation that there is a way to get bigger images into the news feed, rather than the typical thumbnail. https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#images
I am not sure what I'm doing wrong but my image never appears to be in the larger format. Its always the tiny thumbnail. Here is the code I have. Not really sure what I'm doing wrong.
At first I thought my share.jpg image was too big (it was around 1900x1200) so I sized it down to the min specs that Facebook said to use (1200x630) and I still end up with the tiny thumbnail.
This is the FB.ui function that I have..
$(".facebook").bind("click", function(event){
event.preventDefault();
FB.ui({
method: 'feed',
//link: encodeURIComponent(shareURL),
link: shareURL,
caption: 'An example caption',
picture: 'http://www.example.com/beta/share.jpg'
}, function(response){});
});
Here's what I have on the page right after <body>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'XXXXXXXXXXXX', // App ID from the app dashboard
channelUrl : '//www.example.com/beta/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I think I may have figured it out. Looks like the bigger image only works on mobile and the new News Feed (which I still don't have.. WTF? LOL)
Related
I know the Customer Chat Plugin is only in beta mode, but I would love to use it if I can. After looking over the docs, I can't seem to find a way to customize the functionality of the chat widget.
Here's what I want to do:
Show and hide the widget programmatically (javascript)
Tap into close event of widget to hide the whole widget instead of just minimizing the chat window.
Toggle between more than one widget
Background:
Website is a marketplace of sellers, and I want to be able to give them all a personal chat feature that connects consumers with the sellers.
Previous attempts:
Hide and show widget by targeting #fb-root and applying display: none; or display: block;. This works okay, but still really hacky and doesn't solve problem of knowing when to trigger hiding and showing (usually on a button click "chat now", but I also want the widget to hide when closed/minimized).
Tried loading two widgets at same time, but one the first one ever loads, and even if the second one did load, I wouldn't have the ability to only target one at a time due to my id DOM selector.
index.html (inside head):
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'first-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'second-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
index.html (inside body):
<div class="fb-customerchat"
page_id="first-page-id"
logged_in_greeting="Hello, my name is Kevin :)"
logged_out_greeting="Hey, you are not logged in! You should log in.">
</div>
<div class="fb-customerchat"
page_id="second-page-id"
logged_in_greeting="Hello, my name is Kevin again :)"
logged_out_greeting="Hey, you are not logged in! You should log in.">
</div>
Any suggestions, tips, or hacks are greatly appreciated.
UPDATE:
I have confirmed that toggling between more than one widget is impossible at this point. However, it should be possible to do the other two things. Because it's just a beta release, custom event handling and such is not supported. I will wait for the official release.
This may not have been available at the time you posted your question, however the Facebook Customer Chat SDK should help accomplish what you are after.
To load the Customer Chat SDK instead of the standard SDK update the following line:
js.src = "https://connect.facebook.net/en_US/sdk.js";
to
js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
To show and hide the widget then add the following in your JS:
FB.CustomerChat.show(shouldShowDialog: boolean);
FB.CustomerChat.hide();
You can also subscribe to event, so to hide the whole widget you could try the following:
FB.Event.subscribe('customerchat.dialogHide',
FB.CustomerChat.hide();
);
See the FB developer docs for the full details: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk/
Hope that helps. I have been wrestling with the Facebook Customer Chat Plugin for the last couple of days!
I'm trying to achieve a facebook share of a questionnaire results page.
I want the following items to be custom
1) The button, so I'm using an image
2) The Title, description and Image that appears in the Share box
3) The URL that is shared.
Here's the problem. The results are sent to a page called /results. This page changes depending on the visitors cookie (the results of their questionnaire is placed in this cookie so it displays the appropriate result).The OG tags for this page are also populated to get the right image, title and description to appear in the search box, but if Facebook were to scrape this page, it wouldn't be the same.
Here is the code I'm using
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?=FB_APP_ID?>',
xfbml : true,
version : 'v2.0'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<img src="images/icons/share-fb.png" alt="Share your Results on Facebook" class="share"/>
$('.share').click(function(){
FB.ui({
method: 'share',
href:'http://example.net/results',
}, function(response){});
});
Is it at all possible to
1) Do this without having a Facebook App? Under FBs new rules I'm unable to get an app approved without the need for Facebook login which I neither need nor have.
2) Set what is shared and not have it change in a user's feed whenever facebooks scrapes the result page and doesn't see the relevant OG tags?
I have like buttons in each of my website pages.
Each specifies the page url, e.g. href=http://www.efratnakash.com/about_website_e.asp
How can I present the sum of all likes in my website?
Something like: href=http://www.efratnakash.com/*.asp
Thanks,
Efrat
The simplest way is to generate the required Script and Html tags using the official Facebook page
You'll end up with the following code to insert at the top of your page:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and the following snippet to insert where you want your 'Likes' count:
<div class="fb-like" data-href="http://www.efratnakash.com/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
I'm not sure if this would give you the sum of all of the likes for your domain though. If you need a more powerful way to query your likes data, you might want to look into using FQL, part of the Facebook Graph API, where you could perform queries like:
SELECT total_count FROM link_stat WHERE url = http://www.efratnakash.com
Giving you the following JSON data:
{
"data": [
{
"total_count": 12
}
]
}
(I must admit, this is my first go with FQL though!) Does 12 sound like the total number of your likes, or just ones on your homepage? If it's too low, I'm sure there must be some way to sum all likes for that domain.
Hope this is of some use!
I'm using the older FB xfbml Comment module on my site (I'd upgrade were it not for problems with migration), with this code to embed it
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxx',
channelUrl : '//www.site_etc.com/channel.html',
status : true,
cookie : true,
xfbml : true
});
FB.Canvas.setAutoGrow();
}
(function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document));
The problem I'm having is that whenever FB loads the Comments iframe, it is clipped in height. It consistently loads with a height of about 160px, no matter how many comments etc. there are, and I'm not able to get it to expand accordingly. I'm fairly certain there is no conflicting CSS, containers, etc.
I have no idea what is going on nor where to begin searching for this. Google had a few interesting hits but ultimately no solution -
http://bit.ly/11JzGh8
I'm building a GWT application and am trying to dynamically add facebook comment boxes in certain places. This is working fine, except that the facebook SDK isn't calculating the height correctly. It always sets it at 160px.
This means that only half of the first comment is visible, even if there are multiple comments (i.e. it gets visibly cut in half). If I use the same code outside of GWT it works fine (i.e. the height is calculated correctly).
Does anybody know how the facebook SDK calculates the height of the box? Or what else I can try?
The details:
I initialise the facebook SDK as follows:
public static native void initFacebookSDK()
/*-{
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '<my-app-id>', // App ID from the App Dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true
// parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
(function(d, debug) {
var js, id = 'facebook-jssdk', ref = d
.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all"
+ (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, false));
}-*/;
I add the div as follows:
//_root is a vertical panel
_root.add(new HTML("<div id=\"mydiv\"></div>"));
and then I populate the div like this:
public static native void showComments(String currentUrl_)
/*-{
var mydiv = $doc.getElementById('mydiv');
mydiv.innerHTML = "<fb:comments href='" + currentUrl_
+ "' num_posts='5' width='422'></fb:comments>";
FB.XFBML.parse(mydiv);
}-*/;
The problem is that the facebook SDK always populates the div with the following:
<span style="height: 160px; width: 422px;">
<iframe ...>...</iframe>
</span>
whereas if I don't use GWT, the height parameter changes appropriately, e.g:
<span style="height: 1469px; width: 422px;">
<iframe ...>...</iframe>
</span>
Hope someone can help.
Worked it out.
In JSNI I should be using $doc and $wnd, instead of document and window, respectively. https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsJSNI#writing
In my defence I had tried this, but the missing ingredient was that I needed to reference the FB object as $wnd.FB, e.g:
$wnd.FB.init(...) and $wnd.FB.XFBML.parse(...)
Hope this helps someone.