Add Facebook Comment On Blogger

If you want to adding facebook comment, you may disabling your blogger comment box , or up to you if want to use 2 comment boxes .. (Disable blogger comment : Settings - Comments - Select "Hide")

Adding Facebook Comments on Blogger


Go to Edit HTML - tick Expand Widget Templates ..

1- First , "Create an Application" , here http://developers.facebook.com/setup/ , Fill,
Site name: Your Blog Name
Site URL: http://YOUR-BLOG.blogspot.com/
Locale: ...

Note: on the "Site URL" you must type "/" at the end of URL , example : http://seoblog7.blogspot.com/ , if not, your fb comment will not work well...

Then click "Create Application" , and you'll see your "App ID" , example my App ID is "App ID:124929134233306"

2 - Back to blogger , add the following code into your top section of Template Code, befor the <head> tag :
xmlns:fb='http://www.facebook.com/2008/fbml'

And will look like below:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>

Note: You can ignore the code above, but your fb comment will not work except in firefox

3 - Next, add the following meta tags , after the <head> tag , before the <b:skin><![CDATA[/* code ,

<meta content='YOUR Blog Name' property='og:site_name'/>
<meta content='YOUR App ID' property='fb:app_id'/>
<meta content='Your Facebook ID' property='fb:admins'/>

And will look like below approximately :

<meta content='SEO Blogger 7' property='og:site_name'/>
<meta content='125488420843950' property='fb:app_id'/>
<meta content='Iwan Rachmanto' property='fb:admins'/>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

4- Next , Find this code : "post-footer-line post-footer-line-3" , and place the following code after the end section (afer the </div> code)

</div><div align='left'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div>
<fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='400'/></div>
</b:if>
</div>

And will look like below approximately :

<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>
</div>
</div>
<div align='left'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div>
<fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='400'/></div>
</b:if>
</div>

You may change width='400' and align='left' with yours , example : width='500' and align='center'
Labels: ,
Posted by Nenen Online, 21.11.10 at 6:56 PM 288 comments

How to hide, remove, delete blog post, sidebar, footer page element or body blog on blogger

My friend said "How do I delete the blog posts element off my main page..." ?

Ok, Go to Edit HTML section , and find the code below:

]]></b:skin>

Then, place the code below, after the code above

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post, .post h1, .post h2, .post h3, .post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

So, in your template code, approximately will look like the following:

]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post, .post h1, .post h2, .post h3, .post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>
</head>

<body>

<div id='bgwraper'>

How to display only post title

?

Such as on white hacker blogger template or free7 blogger, over there only post titles displayed , how to do it ?

To do it, such as the above steps, but delete this code : .post, .post h1, .post h2, .post h3, , and will look like below :
]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

Want to remove sidebar or footer or header..? , simply by adding each class code, for example:

Hide Sidebar

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.sidebar{display:none;}
</b:if>
</b:if>
</style>

Hide Footer

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.footer{display:none;}
</b:if>
</b:if>
</style>

Hide, Blog Post, Sidebar, Footer, Header

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post, .post h1, .post h2, .post h3, .post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header, .sidebar, .footer, .header {display:none;}
</b:if>
</b:if>
</style>

Hide all , anything inside your body blog?

Add this code into body code " visibility : hidden; "

Example will look like below:

body {
background: #000000;
color: #F6F4F4;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px auto 0px;
padding: 0px;
visibility : hidden;
}

Ok, don't give me question how to delete your blog..
Labels: ,
Posted by Nenen Online, at 4:46 PM 670 comments
Subscribe to: Comments (Atom)