Simplest way to share dynamic content to Facebook news feed with Javascript?

Question

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

This is where I got, but how does it looks like? It seems to work, but I'm not sure if I've thought of 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 (bigger than just the 50x50 pixel image defined in the picture field), how can I do that with just JavaScript? Or can I?

Solution

I decided to leave out authResponse caching and call FB.login() every time. It briefly opens a popup window, but at least there's no case where user has logged out in another tab or window and the cached authResponse has gone stale. The briefly flashing popup window is not that big of an issue, since I don't think users will share the same page multiple times, anyway.

Here's my final code which is even simpler than the original one:

<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 mentioned by Tolga Arican, if it's ok to you that the sharing dialog opens in a popup window, you don't even need to call FB.login() and ask for the publish_stream permission; just call FB.ui({ method: "feed" }) directly and you're good to go:

<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>

Comments

[Visa Kopu]

Without display:iframe the dialog opens in a popup window which doesn't look nice. What do you mean with response.authResponse not working? About the image thing: there is the attachment field, but it isn't really different from the picture field, right? What I was referring to was to actually upload a full size image without resizing.

[Tolga Arican]

about response.authResponse, once i figured out it has been changed and new type of it is session. Just to be clear, try console.log(response) on firefox firebug or chrome js console.

[Tolga Arican]

for the attaching a picture on a wall post , try to add this one: attachment: { media: [{ type: "image", src: 'http://...test.png', href: "...com" }], name: "Attachment Name", caption: 'Attachment Caption', href: "...com" },