Facebook Like Box plugin is deprecated and will stop working on June 23rd 2015. Facebook has suggested to use the new Page Plugin instead. Therefore we are releasing today the Blogger shortcode for Facebook Page Plugin which lets you easily embed and promote any Facebook Page on your website or blog, your visitors can like and share the Page without having to leave your site. You can also show a simple feed of your Page Posts. You can now embed the Page Plugin inside blog posts, sidebar widgets and even inside blogger comments with just a simple one line code.
1. Install Blogger Shortcode Plugin
First and foremost install the Blogger Shortcode Plugin in order to make this Page Plugin work. Follow these 7 easy steps shared on the tutorial link below.
After you have installed the plugin, you can then follow the steps discussed below to start embedding the FB Plugin on your blog anywhere you want.
2. Add Facebook JavaScript SDK
(Optional Step)
If you have already added Facebook JS SDK code on your templates then you can skip this step else following these steps:
1 Go To Blogger > Template
2 Backup your template
3 Click Edit HTML
4 Paste the following code just below <body>
<div id='fb-root'/>
<script>
//<![CDATA[
(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.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
5 Save your template and you are all done!
3. How to add Facebook Page Plugin Shortcode?
Add the following shortcode anywhere you want to make the Page Plugin display. You can add it almost on any location, may that be your blog composer, HTML/JavaScript widgets or Blog comments.
[facebook src="bloggertricks"/]
Replace bloggertricks with your Fan page username.
Output:
That's it! =)
Complete List of Supported Attributes
Following are attributes that you can use to configure and customize the settings in shortcode.
| Attribute | Definition |
|---|---|
| src | Points to Facebook Fanpage username. |
| width | Changes width of the FB iFrame. Minimum allowed width is 280 |
| height | Changes height of the Page Plugin. Minimum allowed height is 130 |
| hide-cover | Setting it to "true" will hide your Cover photo. By default its value is false |
| posts | Setting it to "true" will display your Page Posts. By default it is set to false. |
| faces | Setting it to "false" will hide your Friend's faces i.e. Profile Display Pictures. By default the value it set to true |
For example if you wish to hide the facebook cover, show page posts, and set the width & height of the page plugin then use the attributes in this format
[facebook src="bloggertricks" width="500" height="400" hide-cover="true" posts="true"/]
Output:
Need help?
I hope this shortcode makes your job easy when it comes to sharing your FB Page on your blog. You can now embed it anywhere with a single line of code and there is no more a need to paste that ugly long Facebook code. Let me know if you needed any further assistance.
Wish you a happy sharing experience. Peace and blessings buddies! :)
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Mohammad
4/12/2015
Shortcode
I would have never believed if someone said he saw working of FB page plugin in the comments or in the posts but I saw it LIVE on that demo blog. Great job Mustafa. As I always say, you are an inspiration! Thanks for all that you do for Blogger users. :)
ReplyDelete~ Rohan.
That is probably a unique functionality of the plugin which makes it embedable almost any where. I am so glad you have such high regards for a small man. Thank you dear rohan :)
DeleteSo, "cover" shows if it's "false" and doesn't if it's "true" ? What is the reason that "cover" is inverted logic, when "posts" and "faces" seem normal? This comment is not meant to be criticism, just curiosity.
ReplyDeletebased on your query we have cleared the confusion and replaced the cover attribute with hide-cover to make more sense. Now setting it to true will hide the cover and false will show the cover. The logic is non-inverted now! =d
DeleteThe official attribute used for cover by Facebook is inverted by default data-hide-cover=""
ReplyDeleteSetting this attribute to false will give a direct logic, hence I had no option but to configure this logic ;)
Mohammad Mustafa You are An Inspiration For All The Newbie BLoggers. And The Best Thing About You IS That You're A Pakistani ! And i am proud of you. You're Working Well . Keep It Up.
ReplyDeleteThose words mean a lot Thank you for the kind feedback. Sharing knowledge needs no boundaries and no color and that is what I believe in. Thank you for finding a small man like me worth your praise dear Naeem :)
DeleteMay Allah give you more success and get a chance to see you on the top!
Deleteits Different plugin thanks
ReplyDeleteHow can this plugin be used on the sidebar instead of inbetween posts
ReplyDeleteSame method for all sections. Just paste [facebook src="Your-FB-PAge"/] anywhere you want!
DeleteGreat job Mustafa,
ReplyDeleteFB plugin looks so shiny in my job portal blog. Thanks for sharing it with us. Waiting for your future posts.
nice!
ReplyDeleteThank you very much for this post.I follow this post and apply my site.so thanks a lot...
ReplyDeletehow to make it also appear in mobile?
ReplyDeletedear i m using blogger and i copy the page plugin code from offical fabook devlopers but whenever i try to save that code in template they said verios must end with delimeter any help thnx
ReplyDeleteHappened to me too, I wasted 2 hours trying to solve the problem. The codes on this site works better than the one in Facebook.
Delete[facebook src="bloggertricks"/]
ReplyDeleteTank you so much. After hours of working on this problem, it finally works. Thanks to you!!! <3 <3 <3
ReplyDeleteThis is awesome I just love it and I really appreciate. Please when I place the code in a post, my Facebook page only shoes when its on desktop mode while the code shows when viewing my blog on mobile version. Anything I can do to make my Facebook page show in the mobile version when I place the code in a post?
ReplyDeleteThank you Mohammad,
ReplyDeleteIt works perfectly on my blog.
Why in my HTML, there's no code with < body > ? I use simple template.
ReplyDeleteThanks very much,it works better!!!!
ReplyDeleteHi Muhammed,
ReplyDeleteI am unable to add it to my blog posts. There seems to be an error. Works fine in side bar.
When added inside the post, it just redirected and showed only share buttons,in a white page. Even my template is not shown.
It will work just fine in posts too if your template is using the standard CSS classes
Delete