Post
Ask Question

JavaScript and Facebook: A Dynamic Duo for Social Sharing

Photo by Anton on Pexels

Introduction

In the ever-evolving world of web development, creating a seamless and engaging user experience is critical. Among the many tools available to developers, JavaScript stands out as a versatile and dynamic language that can breathe life into websites and applications. When combined with the unmatched reach of Facebook, the world's largest social media platform, it becomes a potent force for enhancing social sharing and interaction.

Welcome to "JavaScript and Facebook: A Dynamic Duo for Social Sharing," where we'll delve into the world of Facebook's JavaScript SDK and how it can revolutionize the way you integrate social sharing into your web applications. Whether you are building a personal blog, an e-commerce site, or a cutting-edge web app, this guide will show you how to harness the immense potential of this dynamic pairing to engage your audience and drive user interaction to new heights. 

Setup

  1. Log in https://developers.facebook.com/ using your facebook credential.
  2. Go to https://developers.facebook.com/apps/.
    In the search box showing 'Search By App Name of App ID', enter the name of your app.
    Click on 'Create App' at the top right of your screen.
     
  3. You will be redirected to a new screen.
    Select 'Other'.
    Create an meta app
    Then select 'Business' and click 'Next'.
    Select an app type

    Enter your app name in the first field and click on 'Create app'. You may be prompted to enter your password again.
    enter password

    Once done, you will be redirected to the 'Meta for developers' dashboard. On top of the page, you will find the 'App ID'
     
  4. In the options in the left pane, expand 'App settings' and click on 'Basic'.
    App settings

    You will be redirected to this page

    App Settings

    In the 'App domains' field (highlighted in red), add all the domains from which your codes/app will run.
    For instance, if the web app which contains the feature to share on Facebook is running on your local, that is localhost, then you need to add localhost in the 'App Domains'.
    If you are deploying this web app, you will need to add your domain here.
    Once done, you can click on 'Save changes' at the bottom of the page.

    If it is not completed, you will encounter this error: Uncaught ReferenceError: FB is not defined when calling share 

The code

We will use a simple example to showcase the code implementation.

In our example, we will be sharing the link to a website upon a button click. This particular situation is chosen because, for people who want to share their website or a specific page from their website.

The HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-16" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        
        <input type="button" id="btnShare" value="share on facebook" onclick="onShareFb()">
    </body>
</html>

This code appears to be short but a lot of things are happening.

Line 8 makes the link to the Facebook SDK for JavaScript. It is done in this way for the following reason as quoted from the official documentation (https://developers.facebook.com/docs/javascript/quickstart/):

"The Facebook SDK for JavaScript doesn't have any standalone files that need to be downloaded or installed, instead you simply need to include a short piece of regular JavaScript in your HTML that will asynchronously load the SDK into your pages."

We are adding a link to JQuery on line 7. If this line is missing, we will get the error: "Uncaught ReferenceError: $ is not defined defined".

On line 13, we are creating a button that call the function "onShareFB()". The implementation of this function is done in 'index.js', which is referred on line 9.

The code is found in 'The Javascript' section of this article.

The Javascript

window.fbAsyncInit = function() {
    FB.init({
        appId            : '<<Enter the App ID that you obtained from the developer.facebook.com portal>>',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v17.0'
    });
    $(document).trigger('fbload');
};

function onShareFb(){
    FB.ui({
        method: 'share',
        href: 'https://vroume.com/'
        }, function(response){});
}

The first section of this code, that is line 1 to 9, needs to be used as is.

You only need to add your App Id obtained from the develop.facebook.com portal (see previous section of the article).

On line 11, the implementation of the onShareFb() function.

From line 11 to 16, you use the code as provided since this is the skeleton of the sharing functionality.

On line 14, you add the url of the website or web page you want to share. For the purpose of this demo, we are using url of a ride sharing platform in Mauritius which is 'https://vroume.com/'; you need to replace it with yours.

And voila! You want a fully working 'Share on Facebook' functionality with these two code snippets.

So, when you click on the button, a pop-up containing your Facebook page will appear. You only have to add your text and click on the 'Share' button.

Facebook Share

Note: you cannot prefill the 'Say something about this...' from the code directly. Facebook does not allow this.

Conclusion

In the fast-paced world of web development, one partnership stands out for its ability to supercharge social sharing: JavaScript and the Facebook JavaScript SDK. With these dynamic tools at your disposal, you can seamlessly integrate Facebook's powerful sharing capabilities into your applications. This partnership opens doors to captivating user experiences, enabling effortless sharing of content and connecting your audience in a click. Embrace this synergy to transform your web projects into social sharing hubs, where every share fosters community and amplifies your online presence. Dive into the world of JavaScript and the Facebook SDK, where sharing is caring, and the possibilities are endless.


Similar Articles