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?

Answer 1

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>