Facebook recommendations bar is one of the best widget i would recommend for all bloggers, if you are truly concerned about your site pageviews and bounce rate, because it will force readers to stay longer on your blog by engaging them with more posts. It's designed to collapse on page load and expand displaying additional recommended articles right after readers have reached a particular point while scrolling down. It contain a like button and also display only your blog posts that are previously liked or shared on Facebook.
Anda sedang membaca artikel tentang
Add Facebook Posts Recommendation Bar To Blogger
dan anda bisa menemukan artikel
Add Facebook Posts Recommendation Bar To Blogger
ini dengan url
https://doyshinja.blogspot.com/2013/03/add-facebook-posts-recommendation-bar.html
,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel
Add Facebook Posts Recommendation Bar To Blogger
ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link
Add Facebook Posts Recommendation Bar To Blogger
sumbernya.
Create Facebook App ID
The first step is to create a Facebook application so as to get a AppID which you are going to include in the recommendation bar code.
- Go to Facebook developer page
- If you have created an application on facebook before, then click on +Create New App, and a pop-up window will appear, but if you have never create an App before, then you will notice the pop-up window automatically.
- Now type Recommendation bar inside the App Name field and click on the Continue button.
- Enter the captcha security code and click on Submit.
- Now click on Website with Facebook Login tab and enter your site url including a slash at the end and leave the remaining options and click Save Changes as shown below.
- Your App ID is now ready. copy it from the top of the page as shown in the screenshot below.
Now let's move to, how to implement it on blogger.
How To Implement It On Blogger
- Go to your dashboard
- Click on Template > Edit HTML > Proceed (Mark/Tick Expand Widget Templates)
- Use ctrl F to find <html and replace it with the following code.
<html xmlns:fb='http://ogp.me/ns/fb#'This will make the plugin compatible in older versions of internet explorer also. but you can also skip it.
- Search for </body> and paste the following code above/before </body>
<div id='fb-root'/>
<script>
//Facebook Recommendation bar tutorial by www.realcombiz.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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
- Replace Your-App-ID with the Facebook App ID you copied in first step.
- Search for </head> and paste the following code above/before </head>
<b:if cond='data:blog.pageType == "item"'>
<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='"en_US"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
- Now lastly, find <data:post.body/> and paste the following code after/below it.
<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.doyshinja.com' trigger='40%'/></div>
</b:if></b:if>
- num_recommendations: this represent the number of posts to be displayed, you can adjust it by editing 3.
- side: the widget will float to the right by default, to relocate it to the left, simply change right to left.
- trigger: the widget will expand as soon as the reader scroll down to 40% of your blog.
- Replace http://www.doyshinja.com with your blog url.
- Now finally Save your template.
WARNING! Jika Anda Ingin Copy Paste Silahkan Sertakan Sumber nya, atau Jika Ingin Share Artikel nya Silahkan Sertakan Credit nya . Terima Kasih ;D
0 komentar :
Catat Ulasan