Category

Facebook

Jul 28
0

How to share on Facebook with JS SDK and Vue?

By | Facebook

Facebook share offers different SDK’s to perform the share. JavaScript SDK, PHP SDK, Android SDK, iOS SDK etc.

We’ll be looking into the JS SDK

The project in which I wanted to integrate this Facebook share was based on Vue. Following are the steps, I followed to complete this feature.

Looking for an existing plugin: Vue-social-sharing

Initially I looked for an existing plugin to do the job and I found a really nice one here. It does the job in a nice manner. However, In my project there were certain actions I needed to perform if the facebook share was performed and there was no clear indication whether the share was actually performed or not. The closest information this plugin gave was when the facebook share popup was closed. Not good enough.

If all you need is facebook share and you do not need to perform any actions based on whether the share was performed or not. The plugin should be really a good fit.

Integrating FB Share with JS SDK

Facebook Documentation for JS SDK

Loading the SDK

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
methods: {

    initializeFacebook()
    {

        window.fbAsyncInit = function () {
            FB.init({
                appId: '*******',
                autoLogAppEvents: true,
                xfbml: true,
                version: 'v3.3'
            });
        };

// Since vue doesn't allow placing the script tag inside template we will not use the following script tag but an alternative way to do the same.
        /* <script async defer src="https://connect.facebook.net/en_US/sdk.js"> */

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

    }
}

The above code loads the SDK for us. I created a method called initializeFacebook and invoked it inside the mounted block.

Click to Share

Now that we have loaded the SDK, we can proceed with the share. During development you might be sharing with a virtual environment. Facebook expects you to input this domain in App’s Domains. Not doing it will end up with an error.


We are ready to perform share now. Let’s add one more method: facebookShare.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
methods: {
    facebookShare()
    {

        let self = this;

        FB.ui(
            {
                method: 'share',
                href: self.issueUrl, // replace with your url
            },
            // callback
            function (response) {
                if (response && !response.error_message) {
                    alert('Posting completed.');
                } else {
                    alert('Error while posting.');
                }
            }
        );

    }
}

We can call this function on the click of the share button.

Voila! Now we know whether the user did share our post or not.

For local development share, facebook can’t read our meta tags since it is our virtual domain and we should not expect a proper share content on local development environment. However, once you put this code on your production server, a domain that is accessible to everyone and facebook, it should work just fine.

If this guide helped you in anyway, please consider dropping a comment, it will mean a lot to me.