Easiest way to share dynamic content with Facebook news feed using Javascript?

Question

I want my users to be able to share dynamic content on their Facebook news feed. There is no other Facebook integration (e.g. Facebook login or other server-side integration), so I want this to be as easy as possible.

Here I got it, but what does it look like? This seems to work, but I'm not sure if I was thinking about everything.

<button id="fb-publish">Share to Facebook</button> <script type="text/javascript"> (function() { FB.init({ appId: MY_FACEBOOK_APP_ID, cookie: true, status: true, xfbml: true, oauth: true }); var fbAuth = null; var fbShare = function() { FB.ui({ method: "feed", display: "iframe", link: "http://example.com/", caption: "Example.com", description: "Here is the text I want to share.", picture: "http://example.com/image.png" }); }; $("#fb-publish").click(function() { if (!fbAuth) { FB.login(function(response) { if (response.authResponse) { fbAuth = response.authResponse; fbShare(); } }, {scope: 'publish_stream'}); } else { fbShare(); } }); })(); </script> 

Also, if I want to attach an image from a URL (larger than just a 50 × 50 pixel image defined in the picture field), how can I do this with JavaScript only? Or can I?

Answer 1

I decided to leave authResponse caching and call FB.login() every time. It briefly opens a pop-up window, but at least there is no case when the user went to another tab or window, and the cached authResponse become obsolete. In short, the flashing pop-up is not that important, as I don't think users will share the same page multiple times. Anyway.

Here is my last code, which is even simpler than the original:

 <button id="fb-publish">Share to Facebook</button> <script type="text/javascript"> (function() { FB.init({ appId: MY_FACEBOOK_APP_ID, cookie: true, status: true, xfbml: true, oauth: true }); var fbShare = function() { FB.ui({ method: "feed", display: "iframe", link: "http://example.com/", caption: "Example.com", description: "Here is the text I want to share.", picture: "http://example.com/image.png" }); }; $("#fb-publish").click(function() { FB.login(function(response) { if (response.authResponse) { fbShare(); } }, {scope: 'publish_stream'}); }); })(); </script> 

And as Tolga Arican mentioned, if it’s good for you that the sharing dialog opens in a pop-up window, you don’t even need to call FB.login() and ask for publish_stream permission; just call FB.ui({ method: "feed" }) and you will go well:

 <button id="fb-publish">Share to Facebook</button> <script type="text/javascript"> (function() { FB.init({ appId: MY_FACEBOOK_APP_ID, cookie: true, status: true, xfbml: true, oauth: true }); $("#fb-publish").click(function() { FB.ui({ method: "feed", link: "http://example.com/", caption: "Example.com", description: "Here is the text I want to share.", picture: "http://example.com/image.png" }); }); })(); </script> 

Answer 2

1) Make sure appid is defined.

2) In FB.login, response.authResponse may not work. I'm not quite sure, but just throwing console.log, this may response.session

3) in the: feed method, you can put large images for the image, but this will reduce the size. It is not possible to fit large images as thumbnails. This is just a thumb feed.

For the easiest method: feed js, you don't need to display: iframe, I think.

 FB.ui( { method: 'feed', name: 'Facebook Dialogs', link: 'http://developers.facebook.com/docs/reference/dialogs/', picture: 'http://fbrell.com/f8.jpg', caption: 'Reference Documentation', description: 'Dialogs provide a simple, consistent interface for applications to interface with users.' }, function(response) {} });