Home > DeveloperSection > Articles > Implement Facebook Follow (Subscribe) button in your website

Implement Facebook Follow (Subscribe) button in your website

API(s) API(s)  Facebook API 
0 Comment(s)
 4328  View(s)
Rate this:

Implement Facebook Follow (Subscribe) button in your website

In this article I am going to explain how to implement Facebook Follow (Subscribe) plugin on your website.

The Follow button lets a user follow your public updates on Facebook.

You need to implement the Follow button with below link: https://developers.facebook.com/docs/reference/plugins/follow/ after clicking this link you will get below screen:

Implement Facebook Follow (Subscribe) button in your website

1.       Click to Follow button menu to open form.

2.       Profile URL: - Give the Profile URL of the user to follow. This should be a facebook.com profile URL.

3.       Layout URL: - it determines the size and amount of the social context next to the button, it have three options these are given below.

·         Standard – It will display social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).

·         button_count – It will display the full amount number of followers to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.

·         box_count - It will display the total number of followers above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.

4.       Show Faces: - It will specifies whether to display profile photos below the button (standard layout only)

5.       Color Scheme: - Here give the color scheme for the plugin. Options: 'light' (default) and 'dark'

6.       Font: - Here give the font to display in the plugin. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'

7.       Width: -Here give the width of the Follow plugin.

8.       Get Code: - Click on the Get Code button to get the script for the Follow plugin.

After clicking Get Code button to appear below screen with script.

Implement Facebook Follow (Subscribe) button in your website

Copy above red bordered code and paste in your website area where which you want to show the Follow plugin.

Code: -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


    <title>Facebook Follow</title>

    <div id="fb-root">


    <script>        (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/all.js#xfbml=1";

            fjs.parentNode.insertBefore(js, fjs);

        } (document, 'script', 'facebook-jssdk'));</script>



    <div class="fb-follow" data-href="http://www.facebook.com/wowvijai" data-show-faces="true"

        data-font="arial" data-width="450">





Output: -

Implement Facebook Follow (Subscribe) button in your website

Don't want to miss updates? Please click the below button!

Follow MindStick