Add Facebook Like box with Cover Photo in Blogger

Add Facebook Like box with Cover Photo in Blogger

Add Facebook Like box with Cover Photo in Blogger

Add Facebook Like box with Cover Photo in Blogger - This post is about how to add facebook like in website or blogspot blog.  By using this facebook like box you can use facebook like box with cover photo. Facebook authority recently update their Graph API v2.3. In this update they add some feature in facebook like box plugin. One of them facebook cover photo.

By using this new update, you should easily embed and promote your facebook page in your blog or website. Visitors are can like and share your facebook page without leaving your blog or website. In this post i share how to add facebook like box with cover photo (you should also add without cover photo). I am just share this code. You just change it with your facebook page url.


If you searching facebook like popup for website then, try our new and latest another post: Flat Popup Facebook Like Box Widget for Blogger . This facebook popup like box will help you to add a flat and minimal design facebook popup like box in blogger. Facebook widget for blogger is most important for every blogger. If you have a facebook widget in your blogger, then you can get a huge number of fan page like and it the best way to take your visitors on your hand.

Our another post about how to add facebook comment box to blogger. If you wanna add latest version facebook comment box in blogger, then must see this posts. hope you will helped. I saw many popular blog use facebook like box in their blog on sidebar. I think sidebar is the best position to place facebook like box on blogger. If you put facebook like box on sidebar, then it will be staring and you may get huge amount facebook like for your fan page.

Now lets star the tutorial. Follow below steps

  1. At first you have need include javascript SDK in your blog.
  2. Go to Blogger Dashboard > Template > Edit HTML and find <body> tag.
  3. Copy and past below code after <body> tag and Save Template.
 <div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'FB APP ID',
status : true, // check login status
cookie : true, // enable cookies 
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>

Note: if already added this in your blog, then ignore it.

Now go to Layout > Add a gadget > HTML/Javascript and Copy past the below code.

<div class="fb-page" data-href="https://www.facebook.com/msdesign.rtml" data-width="300" data-height="250" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/msdesign.rtml"><a href="https://www.facebook.com/msdesign.rtml">MS Design</a></blockquote></div></div>

Settings:

If you want to change the default setting of above, then you should change the following settings below. (the URL of facebook page must change)

Setting
HTML5 Attribute
Description
Default
href
data-href
The URL of the Facebook Page
msdesign.rtml
width
data-width
The pixel width of the plugin. Min. is 280 & Max. is 500
300
height
data-height
The maximum pixel height of the plugin. Min. is 130
250
hide_cover
data-hide-cover
Hide cover photo in the header
false
show_facepile
data-show-facepile
Show profile photos when friends like this
true
show_posts
data-show-posts
Show posts from the Page's timeline.
false


If you found any problem then must inform me on comment section and if you think our post is helpful for you then must share it with friends. Thanks for all. Happy blogging.
Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.

10 comments:

  1. Replies
    1. you have to must need add facebook app id like appId : 'FB APP ID',

      Delete
  2. I am searching such kinds of article that you shared. thanks for sharing your valuable experience.

    ReplyDelete
  3. Thanks for post but it is not working in my blog. Now what should i done.

    ReplyDelete
  4. Fantastic article. Thanks for sharing. keep it up.

    ReplyDelete
    Replies
    1. You'r most welcome bro. Keep visiting our site...

      Delete
  5. I am a new blogger, it help me very much. Thanks for sharing.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete