Hello Guys,We are back with new shortcode plugin for facebook page.In previous post we have described the notifications/messsage boxes for blogger.Today in this tutorial we are going to explain how to add facebook page shortcode widget plugin in blogger,you can easily embed this shortcode anywhere in blog or website.From this plugin you can show your facebook page feed also and the most unique part of this plugin is you can embed this plugin inside your post,sidebar widgets/gadgets even also in comment box.
Installation steps
1. Go To Blogger > Template > Backup your template.2. Click Edit HTML
3. Search </head>
4. Paste the following code just above it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>6. Go To Blogger > Template > Backup your template
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
7. Click Edit HTML
8. Search for </body>
9. Paste the following js just above it.
<script src='https://googledrive.com/host/0B58fhAmOxE7EQlBuTkR4d3REbjQ' type='text/javascript'></script>10. Go To Blogger > Template and Backup your template
11. Click Edit HTML
12. Paste the following code just below <body>
<div id='fb-root'/>13.Now Save your template...Done !!
<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>
How to add shortcode facebook page plugin?
Add the below shortcode page plugin in your blog or website,you can add anywhere in your blog or website weather its your composer,sidebar widger/gadget,inside your comment box,inside blog post and in html/javascript gadget box.
If you just want to show the facebook page like box then add the following code.
[facebook src="bloggersstand"/]If you want to show the page post and wants to hide your cover photo and wants to change height and width of the page then add the following code.
[facebook src="bloggersstand" width="500" height="400" hide-cover="true" posts="true"/]
Here is the complete list of supported attributes for the shortcode of Facebook page plugins.
src - Facebook Fan page username.width - Change the width of facebook like box. Minimum width is 280.
height - Change the height of facebook Page Plugin.Minimum allowed height is 130.
hide-cover Setting - Set it to "true" Hide your Cover photo.Default value is false.
posts Setting - Set it to "true" Display your facebook Page Posts. Default value is false.
face Setting - Set it to "false"Hide your Friends Profile Display Pictures.Default Value is true.
You can now embed shortcode for facebook page plugin for blogger anywhere in your blog or website,let me know if you need any help.