Click on Create New App button at top right corner
As soon as you hit Create New App button a pop up box will appear.In App Name field fill Recommend Bar and keep all it is and hit Continue button.
Click On Image To Enlarge
- Enter the captcha as shown in image and hit Submit button
- Now you will redirect to an another page.Scroll down and click on Website with Facebook Login tab and inside the box input your blog URL.Now leave all fields as it is and click Save Changes
- Now copy your App ID and paste it into notepad,we will need it later.
Great,you have created your App.Now lets see how to add Recommendations Bar to blogger.
- Go to Blogger Dashboard > Template
- Download a copy of your template
- Click on Edit HTML
- Hit Proceed button
- Now search for below code in your template
<htmlreplace it with below code,
<html xmlns:fb='http://ogp.me/ns/fb#'Now find for below code,
<body>just below of it paste following code, Note - If you are using default blogger templates then search for <body tag instead of above code.
<div id='fb-root'/> <script> //Facebook Recommendation bar by http://www.helperblogger.com/ //this notice must stay intact for legal use //For more visit http://www.helperblogger.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=YOUR APP ID HERE"; 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='3' read_time='10' side='right' site='http://www.helperblogger.com/' trigger='40%'/></div> </b:if></b:if>
Thank you Prats for this step by step guide to add Facebook recommendations bar on Blogger. However, it is very easy to install it on WordPress blog by plugin.
ReplyDelete