2012 June 26 Archive - EXEIdeas – Let's Your Mind Rock

Facebook introduced their new awsome social plugin called “Facebook Recommendation Bar” which allows users to like content, get recommendations and share what they are reading with their friends. It is a great way to increase your site page views as this plugin will display your most useful and popular articles on the bottom right corner of your site. This plugin also has a “Like/Recommendation button” which lets users share your posts with one click. This widget is more helpful to drive traffic from Facebook with instant likes.This is how the “Facebook Recommendation Bar” will look like on your site: How to add Facebook Recommendation Bar to Blogger?Adding this widget to your site is really a piece of cake. Just follow the steps bellow:*1.-* First you need to create an app to get an id. So go to http://www.facebook.com/developers/createapp.php and pick a name that suits your website/blog for the Application Name.*2.-* Select “Agree” for Facebook’s Terms, and then hit the “Create App button”.*3.-* Select the “Web Site” tab on the left and configure the app: – Enter your Site URL in the format: http://mydomain.com/ (make sure you include a trailing slash). – Enter your Site Domain as: mydomain.com (drop the http://, www., and the trailing slash. – Hit the “Save Changes” button. *4.-* Now copy your App ID (located at the top). Eg: App ID: 4534xxxx34567 -Keep your App ID on a side for future use.*5.-* Now go to Blogger > Layout > Edit HTML and search the following code pressing Ctrl f key to make the search easy or *6.-* Just bellow that code, we need to add the JavaScript SDK code which is this: window.fbAsyncInit = function() {FB.init({appId: &#39;App_ID&#39;, status: true, cookie: true, xfbml: true, oauth: true}); }; (function() {var e = document.createElement(&#39;script&#39;);e.type = &#39;text/javascript&#39;;e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;e.async = true;document.getElementById(&#39;fb-root&#39;).appendChild(e);}()); *7.*- Now replace the *APP_ID* of the above code with the ID of the App you created in the first steps of this tutorial.*8.-* Before to save changes, we need to add a special META tag in the head section to make it work in Blogger. So look for the code and just bellow that, paste the meta code: *9.-* Now you can save the changes of your template.*10.-* To finish, we need to place the plugin code wherever you want it to appear on your page. Search for tag and just above it, paste any of the following (just one): If you choose the first line, it will display the “Recommend button”, but if you choose the second one, then it will display the “Like button”.And that’s all. If you followed all the steps above, you will have the widget installed on your site successfully.*Important:*By default the plugin will appear on the bottom right corner of your page, if you want it on the left, then use any of the following codes instead of the previous one: You can customise more options on the Facebook Social PluginPage: https://developers.facebook.com/docs/reference/plugins/recommendationsbar/#ath { background:#f8f8f8; margin:0 0 40px 0; padding:10px; border: 3px outset #e8e8e8; -moz-border-radius: 10px; border-radius: 10px; overflow:hidden; font-size: 14px; } .pro { background:#FFF; float:left; margin:0 10px 0 0; padding:4px; border: 2px inset #e8e8e8; } .social { float:right; } About the Author: Antonella León Cotrina loves blogging and social networking. She has a site named EvolucionFacebook which provides tutorials, tricks and news about Facebook.Find Me On GooglePlus Facebook Twitter