Pin It

Widgets

How To Create Recommended Facebook Plugin in Blogspot

hey all my friends today i am going to tech you how to insert Facebook Recommended Plugin to blogspot,
it very easy to install just follow my simple step:-
add recommended facebook Plugin
this is how your plugin look like


Add Facebook Recommendations Bar widget in Blogger   

 1)Create Facebook App
Go to your facebook and type developer after that create new app
add recommended facebook Plugin
insert your app name and namespace

add recommended facebook Plugin
insert your app domain with your url and website with facebook login with your website
                             






2)Insert Open Graph Meta Tag into your Blog Template
After you finish do step one now you go to your blog edit html and find <head> and put this meta tag open graph bellow <head>


<!-- Begin Open Graph metadata -->

<b:if cond='data:blog.pageType == &quot;item&quot;'> <meta content='article' property='og:type'/> <meta expr:content='data:blog.title' property='og:site_name'/> <meta expr:content='data:blog.pageName' property='og:title'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl'property='og:image'/> </b:if><b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta content='website' property='og:type'/></b:if><meta expr:content='&quot;en_US&quot;' property='og:locale'/><meta expr:content='data:blog.canonicalUrl' property='og:url'/>


<!-- End Open Graph metadata -->

without this meta tag your plugin will never work so make sure you place it like i says.

3)Insert javascript SDK  bellow <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/all.js#xfbml=1&appId=YOUR_APP_ID";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));//]]></script><b:if cond='data:blog.pageType == &quot;item&quot;'><div style='z-index:999999; position:absolute;'><fb:recommendations-bar action='like' max_age='0' num_recommendations='2'read_time='25' side='right' site='http://www. YOURDOMAIN.com ' trigger='40%'/></div>


</b:if>
please change your yourdomain with your domain and your_app_id with your app id you can get this app ID at your app details

4)finally you are done just press save button and this plugin will work very nice in your blog but sometime it will show only title in this widget box but it will work very well after 2 or 3 day you use it.

done now you are professional


{ 0 comments... go to Comment Box }

Add your comment

 
Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
copyright 2012© -