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: "/",
            caption: "Example",
            description: "Here is the text I want to share.",
            picture: ".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?

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./",
            caption: "Example.",
            description: "Here is the text I want to share.",
            picture: "http://example./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?

• javascript
• facebook
• facebook-graph-api
• share
• facebook-like

2 Answers 2

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./",
            caption: "Example.",
            description: "Here is the text I want to share.",
            picture: "http://example./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./",
            caption: "Example.",
            description: "Here is the text I want to share.",
            picture: "http://example./image.png"
        });
    });
})();
</script>

1) Make sure appId defined.

2) In FB.login , response.authResponse may not work. I'm not pretty sure but just throw console.log, it may response.session

3) in method:feed , you can put larger images for picture, but it wil downsize. There is no way to put big images as a feed thumbnail. It is just a thumb of a feed..

For the lightest method:feed js, you don't need display:iframe i guess.

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