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.
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
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
- At first you have need include javascript SDK in your blog.
- Go to Blogger Dashboard > Template > Edit HTML and find <body> tag.
- 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.
