5 Dec 2012
How To Create A Facebook Recommendation Bar For Blogger
Labels:
BLOGGER WIDGETS,
FACEBOOK Tricks And Tips
#
First of All goto your facebook and login.
Then Click The Below Link
https://developers.facebook.com/apps
Then After the Link Opens You will be in the developer section of Facebook.
Click The Register button.
And Register.
After you will get a Button " create A New App " ~ Click It
Click Continue
Now A Security Check Will popup-- Enter the text that would be shown to you.
Click Continue.
And your App is ready... And You will get the App Id.
Now Its Time To put that Recommendation Bar In blogger.
Login to your Blogger account.
From your Blogger Dashboard
For Old Blogger Interface:
Go to Design >> Page Elements >> Edit HTML.
For New Blogger Interface:
Go to your blog Drop Down Menu >> Template >> Edit HTML >> Proceed.
3. Backup first your Blogger template see the tutorial here on How To Backup Blogger Template (Old and New Blogger Interface).
4. Then (CTRL + F) search this
<html
and replace it with
<html xmlns:fb='http://ogp.me/ns/fb#'
then Save Template.
Press (CTRL + F) again and searh the <head> tag.
Copy the code below and paste it after <head> tag.
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
Save Template again.
Press (CTRL + F) again and searh the <body> tag.
Add the code below after <body> tag.
<div id='fb-root'/>
<script>
//Facebook Recommendation Bar By http://www.thehackersblog.com
//<![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=XXXXXXXXXXXXXXX"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='2' read_time='10' side='right' site='http://www.thehackersblog.com' trigger='40%'/></div>
</b:if></b:if>
Replace
The Red XXX Codes with your App Id
And The Orange Codes With Your Website URL
Host Unlimited Websites for just Rs.59
Unlimited Disc Space, Unlimited Bandwidth with FREE Unlimited Email Hosting
◙ Stay Connect with Us:- Facebook § Twitter § Google+ § LinkedIn § YouTube § Email Us ◙ 
THE ARTICLE IN THIS POST IS FOR INFORMATIVE AND EDUCATIONAL PURPOSE ONLY..WE ARE NOT RESPONSIBLE FOR ANY TYPE OF USE BY YOU..FOR MORE INFORMATION OR FOR ANY QUERIES CONTACT US.
