How to make facebook comment box seo friendly and show comment counts in wordpress

The facebook comment box is now became popular and most loved comment system for the blogs. The main advantage of this plugin is reader can share their comments in facebook wall and it increases the readers participation. It is light weight, fast and sexy look. The main disadvantage of this plugin is it opens inside iframe and search engine will not track the comments. Also it doesn't increase the comment counts. Many bloggers keep both facebook and wordpress default comment system in their blog. But it doesn't look good. There are various plugins for wordpress that helps to overcome this disadvantages. With some work you can make your wordpress blog comment system fully functional with facebook comment box.

With this tutorial you will be able to do following:

• Replace default wordpress comment by facebook comment box
• Keep your existing wordpress comments visible but not comment box.
• Fetch the comments from facebook comment box to your wordpress blog and allow search engine to track it.
• Increase the comments counts as per comments made on facebook comments box.
• Make your comment display similar to the facebook comment box.

Steps:

• Download a wordpress plugin named Facebook Comments to WordPress. There is small bug in this plugin which you can correct by adding one line of code. 
• Open the plugin directory ->classes->FacebookCommentImporter.php
• Find the code below (around line number 220)

       if ($db->insert($db->prefix.'comments', $data)) {  
         $this->commentMap[$comment['id']]['id'] = $db->insert_id;  
       } else {  
         return;  
       }  

• And replace it by the code below

       $cmt_id = wp_insert_comment($data);       
       if ($cmt_id) { 
         $this->commentMap[$comment['id']]['id'] = $cmt_id; 
       } else { 
         return; 
       } 

Note: I have informed the plugin developer. May be your code is already corrected.

• Now install this plugin and configure it from its settings as per your need. 
• Once you install the plugin successfully, you need to modify your theme's comments.php file. For that open your comments.php file and replace the code by the code below (backup your comments.php file so you can restore in case shit happened :))

 <div id="comments">  
      <!-- fb comments -->  
           <div id="fb-root"></div>  
           <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>  
           <fb:comments href="<?php the_permalink() ?>" num_posts="5" width="625"></fb:comments>  
      <!-- fb comments -->  
      <div class="clearing"></div>  
      <?php if ( $comments ) : ?>       
      <div id="comments_wp">  
      <?php $i = 0; ?>  
      <?php foreach ($comments as $comment) : ?>            
           <?php $comment_type = get_comment_type(); ?>  
           <?php $comment_parent = $comment->comment_parent; ?>  
           <?php if($comment_type == 'comment') { ?>  
           <?php $i++; ?>  
           <?php $cssClass=($i&1)?"odd":"even"; ?>  
           <?php $cssClass .= ($comment_parent)?" child":" parent"; ?>  
           <?php $cssClass .= ($comment->comment_agent=='facebook-seo-comments-1.0')?" facebook":""; ?>  
                <div id="comment-<?php echo $comment->comment_ID; ?>" class="<?php echo $cssClass; ?>">  
                     <div class="avatar-wrap"><?php echo get_avatar( $comment, 50 ); ?></div>  
                     <div class="comment-wrap">  
                          <div class="author">  
                               <a href="<?php comment_author_url(); ?>" title="<?php comment_author(); ?>" rel="external nofollow">  
                                    <strong><?php comment_author(); ?></strong><?php edit_comment_link('Edit', ''); ?>  
                               </a>  
                          </div>  
                          <div class="comment"><?php comment_text() ?></div>  
                          <div class="date"><?php comment_date() ?><?php comment_time() ?></div>  
                     </div>  
                     <div class="clearing"></div>  
                </div>  
      <?php } /* End of is_comment statement */ ?>  
      <?php endforeach; ?>  
      </div><!-- end #comments_wp -->  
      <?php else : ?>  
      <?php endif; ?>  
      <?php if ( comments_open() ) : ?>       
      <div id="trackbacks">  
      <div class="heading"><span>Trackbacks</span></div>  
           <ul>  
                <?php foreach ($comments as $comment) : ?>  
                <?php $comment_type = get_comment_type(); ?>  
                <?php if($comment_type != 'comment') { ?>  
                <li><?php comment_author_link() ?></li>  
                <?php } ?>  
                <?php endforeach; ?>  
           </ul>  
           <p class="trackback">  
                <?php comments_rss_link('comments rss'); ?>   
                <?php if ( pings_open() ) : ?>|   
                     <a href="<?php trackback_url() ?>" rel="trackback">trackback url</a>       
                <?php endif; ?>  
           </p>  
      </div><!-- end #trackbacks -->  
 <?php else : // Comments are closed ?>  
      <p class="comments-closed"><?php _e('Sorry, the comment form is closed at this time.'); ?></p>  
 <?php endif; ?>       
 </div><!-- end #comment-template -->  

• In your css file, add the code below to beautify your comments display

 /* comment */  
 #comments #comments_wp{padding: 3px 0 5px 4px;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;}  
 #comments #comments_wp div.facebook{display:none;}  
 #comments div.odd, #comments div.even{border-bottom:1px solid #E9E9E9;padding-top:7px;}  
 #comments div.child {margin-left: 59px;}  
 #comments div.child .comment-wrap{width:530px;padding-bottom: 18px;}  
 #comments div .avatar-wrap{float:left;padding:0 0 0 5px;width:50px;}  
 #comments div .comment-wrap{margin:0 0 0 10px;width:575px;float:left;padding-bottom:10px;}  
 #comments div .comment-wrap .comment p{margin:0;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;line-height: 15px;}  
 #comments div .comment-wrap .author{margin:0;}  
 #comments div .comment-wrap .author a{color:#3B5998;font-size:11px;}  
 #comments div .comment-wrap .author a.comment-edit-link{margin-left:5px;font-size:8px;}  
 #comments div .comment-wrap .date, #comments div .comment-wrap .date a{color:#808080;font-size:10px;}  
 /* trackbacks */  
 #trackbacks .trackback{text-align:right;}  
 #trackbacks ul li{list-style:lower-greek;}  

The above describe code will fetch the comments from facebook graph api and stores into the database. This will show the old comments made by users and keeps the comments made through facebook plugin in hidden div so search engine can crawl it. This plugin also increases the comments counts if any comments is made.

You can see the demo of this plugin at

• Facebook comment with comments counts:  http://www.buzzom.com/2011/07/sorry-guys-i-love-it-but-google-plus-is-destined-to-fail/
• Old comments made from wordpress comment box with comment box plugin of facebook: http://www.buzzom.com/2008/02/shopping-search-in-finland/comment-page-1/#comment-7814

Make your wordpress blogs comments  sexy with facebook comment box plugin. Cheers !!!!!