WAQAR's BLOG: October 2010

Hi All,

Here is a piece of text from Facebook developers Blog..

Since Facebook Connect launched, we've seen over 6,000 developers make their sites more social using Facebook Connect. One of the most common features we've seen sites add with Facebook Connect is the ability to allow users to log in with a single click and comment with their real name and profile photo from their Facebook account. Sites have seen as much as 40-50% more comments since they launched added these features.

Watch this video to have a more general idea about FB comment box.

Now you can imagine what if the comment box is installed on your blog!!!!

Here is the simple tutorial for adding Facebook Comment Box to Blogger Blog.

Go to Facebook Developer Page and Enter you Blog Name and Blog URL, select you language and then click Create Apllication button.After this It may ask for image verification.
Now an application ID will be generated for your personalised comment box. Note this Application ID.

Now copy the code below and save it in a notepad. Now replace the text APPLICATION ID with the application ID which you noted in step 2.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <h4 id="comment-post-message">Post a comment</h4>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
  FB.init({appId: &#39;APPLICATION ID&#39;, status: true, cookie: true,
  xfbml: true});
  };
  (function() {
  var e = document.createElement(&#39;script&#39;); e.async = true;
  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);
  }());
  </script>
  <fb:comments/>
  </b:if>

Now Go to your Blogger Dashboard >Settings >Comments tab and select Hide as shown below.

Go to Design >Edit HTML tab and check Expand Widget Templates checkbox as shown below.

Now place the code from Step 3 just after below code in template code
(You can find this code by pressing Ctrl+F)
```
<data:post.body/>
```
Note:- Make sure that you have replaced the text APPLICATION ID with your Application ID noted in Step 2.

Save the template and Now you are done.

Note: Use this Facebook Comment Box wisely at it will hide your Blogger comments.

See Demo here

While opening a label link in blogger blog, you must have seen the message:

Showing newest posts with label…………... Show older posts

Also when you search on blog ( default search box in blogger blog) you get following message before search results:
Showing newest posts for query ....………. Show older posts

Most of the blog owners don’t like this message box. If you want your blog to look proffessional, then it is very good to remove this box.

Till now on the I have seen many posts on the web regarding this, but most of them have provided a lengthy procedure and making a lot of changes in the code.

Here I am going to tell you a very simple trick to remove this message box. It involves adding only one line of code.

So here is the standard procedure to remove that box.

Login to your Blogger account. Now you are on the blogger dashboard
Click “Design” link and then Edit HTML tab
Make sure to download your template before doing any code change. If in case, something goes wrong while editing the code, You can move to your original template.
After downllading the full template
Search for below code:

]]></b:skin>
Now just before that code, Insert the following code.

.status-msg-wrap { display:none !important;}
Now Click “Save Template” button, Now you have done it