Basically , there are two methods that are allowed by Facebook to add Like button to your blog.
- If you prefer the basic Like button, you can use a simple iframe method.
- If you prefer a fuller-featured Like button, it is available via the
XFBML tag. This version enable users to add a comment to their like as it is posted back to Facebook.<fb:like>
Note:
1. Please back-up your template first before doing any changes.
2. To copy the code, just press Ctrl-A ( or highlight the code ) + Ctrl-C
(Right-click is disabled in this blog )
1. Please back-up your template first before doing any changes.
2. To copy the code, just press Ctrl-A ( or highlight the code ) + Ctrl-C
(Right-click is disabled in this blog )
iframe method
- Go to Layout > Edit HTML
- Then, mark the Expand Widget Templates checkbox
- Press Ctrl-F, then find
<data:post.body/> - Then, paste this code either before or after it
<b:if cond='data:blog.pageType == "item"'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </b:if>
Hint #2 : Paste it after the code if you want to put the Like button at the bottom of your post entry,
XFBML method
1. Go to: http://www.facebook.com/developers
2. Click on the + Set Up New Application button (at the top right of the page)
3. Type your Application Name (example: Mysite-Name Likes) and select Agree, then click on Create Application
4. Go to the Connect tab (on the left tabs-list)
5. Enter your blog url with an ending slash in Connect URL
6. You must enter this in the Base Domain field: blogspot.com , and click on Save Changes
7. You will see your Application ID number
Next , login to your blogger site
8. Go to Layout > Edit HTML, and mark the Expand Widget Templates checkbox.
9. Find:
<htmlCopy this code
xmlns:fb='http://www.facebook.com/2008/fbmlthen paste it between word expr' and tag >
It should be like this :
<html expr:dir='data:blog..............2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>10. Find
</head>Then, copy the following code and paste before it
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='MY-SITE-NAME' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>Note:
Edit MY-SITE-NAME with the one you want to appear when a user likes a page.
Edit http://google.../blogger_logo.gif with your blog logo, or remove the all tag if you don't want it.
Edit YOUR-APP-ID with your application ID number.
Edit YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID. You can find your user profile ID at your profile page url address , e.g http://www.facebook.com/profile.php?id=123457890 , then copy the whole numbers.
11. Find:
<body>Then, copy the following code and paste after it.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>Note: Edit YOUR APP ID with your Application ID number.
12. Find:
<data:post.body/> Then, copy the following before it if you want to place the Like button between the title and body of post entry ( This blog, Being Coach Potato use this method)
<div><fb:like expr:href='data:post.url'/><br/></div>or after it , if you want the Like button display after the post entry.
13. Then, click on Save Template.
Credit to :
http://forum.developers.facebook.com/viewtopic.php?pid=227562
http://www.allblogtools.com/tricks-and-hacks/add-facebook-like-button-for-blogger-blogspot-and-customize-it/
1 comment:
kalau yg guna [dot]com cane ek?
Post a Comment