How to add Facebook Like/Fan Box to Blogger

Blogger Addict
12:23 AM
Today we are going to talk about Facebook Like/Fan Box to Blogger. A Facebook Like Box or Fan Box is a great plugin that allows Blog visitors to subscribe to your blog updates via their Facebook accounts, without leaving your blog. Once subscribing (by pressing the like button), visitors will receive your most recent blog updates on their Facebook page. This box also displays faces of the "likers" on your blog.Before creating a Fan Box, you should already have a Facebook Fan Page. If you haven't yet created, just click here to learn How To Create a Facebook Fan Page.

To create a Facebook Like Box/Fan Box, just follow the below steps;

CREATE A FACEBOOK LIKE BOX

Step-1. Find out your Facebook Fan page URL by visiting your Facebook Fan page and copy the URL in the address-bar, now you can see how your URL should look like in below screenshot;


Step-2. Then visit this page: http://developers.facebook.com/docs/reference/plugins/like-box.

Now you can see that - LIKE BOX, With the release of Graph API v2.3, the Like Box plugin is deprecated. Please use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a page into your websites.

If you do not manually upgrade to the Page Plugin, your like Box plugin implementation will automatically fall back to Page Plugin by June 23rd 2015.

Step-3. Go to Page Plugin. You can see the following screenshot;

Step-4. Now, put your page URL - like ours pages/Blogger-Addict/1534960050079169 on Facebook Page URL option;

Step-5. Once reloaded your Facebook Page URL, you will find a CODE. Shown as below;

Step-6. Clicking on Get Code above, you will get the Codes which needs to be put on your site as instructed below and You are done;


A. Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.<div id="fb-root"></div><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/sdk.js#xfbml=1&version=v2.4"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
B. Place the Code for your Plugin wherever you want the plugin to appear on your page.<div class="fb-page" data-href="https://www.facebook.com/pages/Blogger-Addict/1534960050079169" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/Blogger-Addict/1534960050079169"><a href="https://www.facebook.com/pages/Blogger-Addict/1534960050079169">Blogger Addict</a></blockquote></div></div>

IF ABOVE DOESN'T WORK, FOLLOW THE STEPS BELOW:

Step-1. Go to Blogger Layout -

Step-2. Click on ADD A GADGET, you will see below screenshot -

Step-3. Now click on HTML/JavaScript. You need to insert below Facebook Fan Box CODE given below. Remember you need to replace blue highlighted "pages/Blogger-Addict/1534960050079169 with your own Facebook Fan Page URL.
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages/Blogger-Addict/1534960050079169&amp;width=300&amp;height=900&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:210px;" allowtransparency="true"></iframe>

You are done, your Facebook Fan Box has been created successfully. Enjoy.

Hope it helped you to create a Facebook Fan Box. If you have any concern regarding above tutorial, please comment below. Like Us On Facebook as well. Enjoy!