New Official Facebook Like Box with Page Cover?

New Official Facebook Like Box with Page Cover?
new fan box

Become bore with your old Facebook like box? Don’t worry Facebook has introduced Graph API 2.3 version and this update will help to add extra feature in Facebook like box.  Now you will able to show facebook cover page with your facebook like box. In addition this plugins have several features which will help to tailor your facebook like box. Such as
  • Facebook like box with fan page cover
  • Face pile of page fan
  • Signup option
  • You will able to share by using share page option

So I hope this is really awesome. This facebook like box doesn’t rollout officially yet hopefully in 23rd June 2015 all facebook fan box will be like rollout with this feature. But before that we can use facebook fan box with latest feature by tweaking. In this tutorial I will share the code thus you can add this facebook fan box in your blog site.  To add this beautiful facebook like box please follow the below steps-

Step 1 Go to https://www.blogger.com and Sign in to your account

Step 2 From Blogger Dashboard go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now copy and paste the below code in "HTML/JavaScript" Gadget.

<script type="text/javascript">
//<![CDATA[
document.write('<iframe src="http://www.facebook.com/v2.3/plugins/page.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FNM7BtzAR8RM.js%3Fversion%3D41%23cb%3Df37a7397d8%26domain%3Dbloggerspice.com%26origin%3Dhttp%253A%252F%252Fbloggerspice.com%252Ff1f37dc2f8%26relation%3Dparent.parent&amp;container_width=300&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2FBloggerSpice&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=true&amp;show_posts=false&amp;width=300" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" style="border: none; visibility: visible; width: 300px; height: 224px;" class=""></iframe>');
//]]>
</script>

Customization

  • To add you facebook fan page link just replace www.facebook.com%2FBloggerSpice by encoded link. You can encode your facebook fan page URL from our HTMLencoder. But encode without http:// code.
For example my facebook Fan page’s original URL is
  • www.facebook.com/BloggerSpice
after Encode it will become like below-
  • www.facebook.com%2FBloggerSpice
So use only encoded code otherwise widget won’t work. For more details about Encoding please visit below link for tutorial. 

Recommended: 

Step 5 Finally clicks on orange color Save button of HTML/JavaScript" Gadget.

Now you can check your Blog that Facebook Fan Page is showing with Fan Faces and page cover. If you have any query then feels free to leave a comment below.
Go Up