Exclusive, Integrate Facebook Comments Box For Blogger In Very Easy And Simple Steps – Fixed ( Full Guide ).

Step 1. Disable Default Comments.

The first thing you should do it to disable blogger default comments. because you don’t want to have 2 comments forms.
go to your blogger account, navigate to settings >> comments
and next to comments field choose Hide, then scroll down and click Save Settings

Step 2. Generate your Facebook App ID.

now you should generate your own facebook app id, it’s really easy and one step process,
just go to this page, facebook developers

then click + Set Up New Application

enter your application name, ( you can type any name )

and check agree and click Create Application

then click on Connect tab (on the left tabs-list) or see the next image.

and fill the following info.
Connect URL : Enter your blog url and you must enter it with an ending dash. (for example: http://myblogname.blogspot.com/) .

Base Domain you must type blogspot.com

then click strong>agree and click Save Changes 
on the next page facebook will generate you alot of info. you’ll need only one line, it’s App ID:
just copy it and keep any where, we’ll need it in the next steps. please see the following image to see where you’ll find your facebook App ID:.

Step 3. Codes To Add To Your Template.

you must add the following codes to your blogger template to ensure that the comments box will work for your blog in the right way.
and in this step we’ll add the following codes,

• xmlns attribute
• SDK script
• Open Graph protocol tags

• Adding the xmlns attribute :

please go to your blogger account again, and navigate to, layout >> edit html >> and checkExpand Widget Templates
then find the following code,

<html

you’ll find it on the top of your code. second or third line, and after it add the following code,

xmlns:fb='http://www.facebook.com/2008/fbml'

you must type a space before it and after it,
here is an example.

<html  xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog..............2005/gml/expr'  >

• Adding the SDK script Code :

search for

<body>

and after it add the following code,

<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>

but please don’t forget to change YOUR APP ID to your app id ( you got it in the previous step ).

• Adding the Open Graph protocol tags:

copy the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'/>

and change the colored text to the following,
Change MY-SITE-NAME with the one you want to appear when a user likes a page. (Gil likes Helping on Facebook)

Changehttp://google.com/…/blogger_logo.gif with your blog logo, or remove the all tag if you don’t want it.

Change YOUR-APP-ID with your application ID number.

Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.

after making this changes add the above code just before

</head>

now we finished adding the facebook codes to your template, please don’t touch anything and continue to the next step.

Step 5. Adding the Comments Box to your blogger template.

please find the following code.

<data:post.body/>

and after it, please paste the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS1BGmgBjgiHwRLn9ImJeNbxGVJnfrR1AZ9Hyda0_1Te8ves9JbOQOs4zM5l_76OAcRJEvLN4dhv91lmOv5GQFIMAUcBsfRLR7WaOUnqUeyIA-34JG9hu_j40UAE7HVd1etlo567_SuNk/' width='331'/></p>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url'   expr:xid='data:post.id'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a>  brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>
</b:if>

To change the width of your comments box, please change 450 to what ever you want, it’s in pixels,

and now please click Save Template , then check your blog. i wish it looks great and works perfectly.

Read More

Better Commenting System And Form For Blogger, IntenseDebate.

Step 1.

go to IntenseDebate.com and click sign up, fill the form with a true mail, username, and password, then click signup.

you’ll need to verify your e-mail, so please go to the email account that you used to register, you’ll find a message from IntenseDebate.com, please check it, you’ll find an activation link, click on it, and you are done.

Step 2.

now go to your blogger account, and navigate to >> layout >> edit html >> and click Download Full Template, and save your template in a convenient place on your hard drive.

Step 3.

now go back to IntenseDebate.com and on the top right area click login, and log on to your account, after you are loged in your account, on the right side bar
you’ll see this title, Manage blogs/sitesbelow it please click Install IntenseDebate. 
then you’ll be taken for a page asking you to type your blog url,
enter your blog url and click next step.

Step 4.

After clicking next step. in step 3, you’ll go to page separated for 2 parts. on the left hand, there is a sidebar contain 2 questions,

• - How would you like to install IntenseDebate?
  - Widget
  - Template
  please choose Template, ( check the box next to it )
• - Which blog posts should have IntenseDebate comments enabled?
  - Only on new posts
  - On all blog posts
  please choose On all blog posts ( check the box next to it )

and then scroll down till you see a button titled ” Browse ” click on it, and choose your blogger template that you downloaded in step 2, then click Upload file.

Step 5.

IntenseDebate.com will modify and generate your new template automatically , and on the next page, you’ll see your new template code, please see the next image.

as you see in the above image, please click on the box, then copy the new generated template code.
then go to your blogger account and once more again, navigate to >> layout >> edit html >>
but this time select all the current template code ( ctrl + A ), delete it, then paste ( replace ) your new template code, and click, Save Template now go to check any of your blog posts.

Read More

How To Use Google Custom Fonts For Blogger.

For years, Bloggers and web-designers were using those simple web fonts to style their blogs and templates. They didn’t had an option to change those fonts as there were only some fonts accepted world-wide as web fonts. It was impossible to use another fonts on web pages as they would appear in ten monitors in ten different styles ! Their appearance may change in  respect of the change in the OS, softwares … etc of that computers. So web-designers were trapped under those countable fonts…

But now Google has launched their new service Google web fonts with the slogan – ‘Making the Web Beautiful!’. This service will allow you to use custom fonts on google font directory on our blog/ websites without any sign-up or anything else. As it’s from ‘Google’, It doesn’t have any complications and it’s also completely free for commercial and private use.,No restrictions held or no harsh laws. This could make your blog look more stylish and is applicable for blogger blogs too. Don’t get amazed, It’s True ! I’ll show you how to do it with blogger.

Step 1 : Back-up Your blogger template

It’s always the first step for any blogger tutorial. I’ll be using this step as the first step for all my tutorials on allblogtools. You should always take a back-up of your blogger template before testing any hacks on blogger.

For this, go to Design or layout -> Edit HTML -> Download full template

Step 2 : Select your Font

For this, Go to Google Font directory and select any one of those stylish font, which you want to use on your blog.

Step 3 : Get the Code for your Font

In this tutorial I’ll be using the Tangerine font, Which I liked the Most. For this just click on the name Tangerine and a new windows will open. Select The tab named ‘Get the code‘.

Step 4 : Add the Code to your Blogger template

Now you have to copy the Code they provide and you have to add the code to your blogger template, just after

<head>

tag of your blogger template.

The code may look something like;-

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

Important : ?Please add a Forward slash (“/“) before the the end of the tag (“>”) of this code. i.e, The above code should look like ;-

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>

This is because blogger use XML for coding which won’t allow unclosed tags like this. So you have to close this tag by adding the forward slash.

Now Copy the code and paste it just after

<head>

. It should be the first code after the

<head>

section. Otherwise it could cause problems while displaying the text in IE and may be in Firefox.
Please remember to add the forward slash before the end tag. and now please click Save Template

now the code required for Google web font has been added to your blog. Now you have to can use google fonts in your blog by applying it on any widget tags.

Step 5 : Add the CSS code for Font to your Blog.

Now the last and final step. In this step, you have to specify where you want to add the font and have to add the css code for it.

If you want to make the font appear for a specific sentence only in your blog post, then use the HTML code ;-

<div style="font-family: 'FontName', serif;">Your text</div>

in the above code change

FontName : to the font name that you chosen it from google.

Your text : to any text you want.

If you want the font to appear for your

• Blog titile
• Post title
• post body
• sidebar fonts

you have to add the CSS code for it. Don’t worry, It’s very very easy.

Here I’ll tell you How you can change your post title. For this you have to search for the title css code

.post h3

or

.post-title h3

This is the common css code for post title in blogger. now we have to add the css code for the new fonts for this code,. For this, add/modify these lines below the above codes.

font-family: 'Your Font Name';

The code should look something like ;-

.post h3 {
font-family: 'Your Font Name';
}

Here I had added the css code for Tangerine. You should post the css code between the “{” and “}” tags of .post h3. Like wise you can add the css code for other position too by modifying the css code.

Here i’ll mention the main positions and the common css code for each position. Please note that it may change if you are using any custom template.

• Title : h1
• Post title : .post h3 or .post-title
• Post font : .post-body
• Sidebar : .sidebar h2

the above tags helps you to change the font for any position of the above 4 tags.
for example, if you want to change the post font,
in the above table, you can see that the tag to edit for the post font, is .post-body
so you have to search for .post-body in your template, and below it, add the following line.

font-family: 'google Font Name';

the final code should looks like

The code should look something like ;-

.post-body {
font-family: 'Your Font Name';
}

These above values may change in some custom themes. But these are the common seen tags. If you didn’t find the tags with this, try searching similar tags.

Read More