Advice needed about Facebook's dialog feed, sharer and like buttons - facebook

Question

I'm totally confused about Facebook's dialog feed, sharer and like buttons (I'm a noob to Facebook and its jargon)
On my website, I would like the following
to have a button at the top of the page where people can share my site to their wall
to have a button on the the page where users can share their main homepage on my site to their wall
to have a button where users can share individual items of theirs (events) to their wall
I've read the sharer button is being phased out in preference to the Like button but I see a problem with the Like button. I think something can only be liked once. A user's event might want to be shared several times (to remind their Fb users of the event)
I've seen the BBC use the dialog feed button to post items to a wall and that looks okay but I couldn't get the popup to work.
my requirements are to have different links for each of the three scenarios I've mentioned, with a different description for each scenario but sharing my site's logo.
I've read so much that I'm now totally confused plus all the APIs that Fb has. It's just crazy (or that's how it seems to me)
If someone could help clear the fog with sound recommendations and some sample code for each button, I would be very grateful.
Thank you.
.

Answer 1

For what your talking about you would want to use the feed dialog. It's flexible enough that you just need to setup your links and pass in some variables. I don't see the feed dialog being phased out as you mentioned they serve different purposes. I think they push the like as it's easier to use and not as likely to be abused.
You'll need to register an application and make sure to initialize the Facebook javascript SDK before you call the below function. If you're having issues with your popup it's probably due to the fact your FB init process is having issues. I've added a second function I use to init Facebook. Both functions use jQuery so you might have to modify if you don't use it.
You can create a pretty generic function like this:
$.shareMe = function(myName, myLink, myPicture, myCaption ) {
FB.ui(
{
method: 'feed',
name: myName,
link: myLink,
picture: myPicture,
caption: myCaption
},
function(response) {
if (response && response.post_id) {
alert('Thanks for Sharing.');
} else {
alert('Post was not published.');
}
}
);
}
and for Facebook initialization:
$.initFacebook = function(options){
$('#fb-root').remove();
$('body').append('<div id="fb-root"></div>');
var settings = {
'appId' : null,
'callback' : null,
'channelUrl' : null,
'status' : true,
'cookie' : true,
'xfbml' : true
};
if ( options ) {
$.extend( settings, options );
}
if( typeof( xc_app_id ) == 'undefined' ) { window.xc_app_id = settings.appId; }
window.fbAsyncInit = function() {
if(settings.channelUrl==null) {
FB.init({appId: settings.appId, status: settings.status, cookie: settings.cookie, xfbml: settings.xfbml, oauth: true, authResponse: true });
} else {
settings.channelUrl=location.protocol+'//'+settings.channelUrl;
FB.init({appId: settings.appId, status: settings.status, cookie: settings.cookie, xfbml: settings.xfbml, oauth: true, authResponse: true, channelUrl: settings.channelUrl });
}
if(typeof settings.callback == 'function'){ settings.callback.call(this); }
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
}
and to call it you just use $.initFacebook({appId,'yourAppId'}); There are other options there you can lookup in the docs if you need them.