Facebook Page Plugin Shortcode For Blogger

Facebook page plugin shortcode

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:

shortcode for facebook page plugin

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:

custom Page Plugin shortcode

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 »

25 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. 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. :)

    ~ Rohan.

    ReplyDelete
    Replies
    1. 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 :)

      Delete
  2. So, "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.

    ReplyDelete
    Replies
    1. based 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

      Delete
  3. The official attribute used for cover by Facebook is inverted by default data-hide-cover=""
    Setting this attribute to false will give a direct logic, hence I had no option but to configure this logic ;)

    ReplyDelete
  4. 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.

    ReplyDelete
    Replies
    1. Those 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 :)

      Delete
    2. May Allah give you more success and get a chance to see you on the top!

      Delete
  5. How can this plugin be used on the sidebar instead of inbetween posts

    ReplyDelete
    Replies
    1. Same method for all sections. Just paste [facebook src="Your-FB-PAge"/] anywhere you want!

      Delete
  6. Great job Mustafa,
    FB plugin looks so shiny in my job portal blog. Thanks for sharing it with us. Waiting for your future posts.

    ReplyDelete
  7. Thank you very much for this post.I follow this post and apply my site.so thanks a lot...

    ReplyDelete
  8. how to make it also appear in mobile?

    ReplyDelete
  9. dear 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

    ReplyDelete
    Replies
    1. Happened 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
  10. [facebook src="bloggertricks"/]

    ReplyDelete
  11. Tank you so much. After hours of working on this problem, it finally works. Thanks to you!!! <3 <3 <3

    ReplyDelete
  12. This 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?

    ReplyDelete
  13. Thank you Mohammad,

    It works perfectly on my blog.

    ReplyDelete
  14. Why in my HTML, there's no code with < body > ? I use simple template.

    ReplyDelete
  15. Thanks very much,it works better!!!!

    ReplyDelete
  16. Hi Muhammed,
    I 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.

    ReplyDelete
    Replies
    1. It will work just fine in posts too if your template is using the standard CSS classes

      Delete