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

How to show first image of the wordpress post as a thumbnail

In wordpress, if you want to show first image of the post as a post thumbnail in loop, then you can do it easily. You just need to download a code snippet called timthumb.php. This great code is enough to get the thumbnail of your choice from the post. It is highly optimized for the wordpress.

Just follow the steps below to do it:

Make a directory (with wordpress write permission) named "thumbs" in your theme root directory.
Put the timthumb.php file inside it. Directory should be writable because this file will create catch images folder inside it.
Inside your theme's functions.php file (Make one if not exists) add the code below:

 /* Extract thumbnails from post */
function show_thumb($w,$h,$zc,$cropfrom,$q) {
     global $post;
     preg_match_all('/\< *[img][^\>]*src *= *[\"\']{0,1}([^\"\'\ >]*)/',get_the_content(),$matches);
     $thumb = get_post_meta($post->ID, 'thumb', true);
     if ($thumb) {
          print get_bloginfo('template_directory').'/thumbs/timthumb.php?src='.$thumb.'&amp;w='
               .$w.'&amp;h='.$h.'&amp;zc='.$zc.'&amp;cropfrom='.$cropfrom.'&amp;q='.$q;
     } elseif (count($matches[1]) > 0) {
          print get_bloginfo('template_directory').'/thumbs/timthumb.php?src='. $matches[1][0] .'&amp;w='
               .$w.'&amp;h='.$h.'&amp;zc='.$zc.'&amp;cropfrom='.$cropfrom.'&amp;q='.$q;
     } else {
          print get_bloginfo('template_directory').'/thumbs/timthumb.php?src='. get_bloginfo('template_directory').'/images/no_image.png&amp;w='
               .$w.'&amp;h='.$h.'&amp;zc='.$zc.'&amp;cropfrom='.$cropfrom.'&amp;q='.$q;
     }
}

Now your code is ready to include in wordpress theme. You can use this code in index.php, archive.php etc file as below:

 <?php if (have_posts()) : ?>
<div class="heading"><span>Recent Posts</span></div>
<!-- <entries -->
<ul id="entries">
     <?php     while (have_posts()) : the_post(); ?>
     <li>
               <div class="post-thumb">
                         <img title="<?php the_title(); ?>" alt="<?php the_title(); ?>" src="<?php show_thumb(160,125,1, middle, 90); ?>">
               </div>
               <div class="entry">
                         <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                                   <small><?php the_time('F jS, Y') ?>
                                             <span>|</span> <?php the_category(', ') ?> <span>|</span>
                                             <?php the_author_posts_link() ?> <span>|</span>
                                             <img src="<?php bloginfo('template_directory'); ?>/images/like_mark.png" /><?php comments_popup_link('0', '1', '%'); ?>
                                   </small>
                         <div class="snippet">
                                   <?php the_excerpt(); ?>
                         </div>
               </div>                    
               <div class="clearing"></div>
     </li>               
     <?php endwhile; ?>
</ul>
<!-- </entries -->
<?php else : ?>
<?php include (TEMPLATEPATH . '/404.php'); ?>
<?php endif; ?>

Sample css for the thumbnail:

/*-- thumnails --*/
.post-thumb{float:left;margin-bottom: 15px;}
.post-thumb img{display: block;font-size:10px;height:125px;overflow:hidden;text-align: center;width: 160px;}

Cheers !!!

Why being an entrepreneur SUCKS

I was going thorough an old issue of Entrepreneur magazine and I found an interesting article at the last page. It was about pain of the entrepreneur who started their own company by quitting their job. The points mentioned on that article are very true. If you are thinking to quit your job and want to start your own company then make yourself ready for it :)

I have copied all points exactly same from from the article. So I would like to give the credit of this article to its author Ankush Chibber.

Why being an entrepreneur sucks:

1. Banks hate you. They will give a BPO fresher a credit card, but not an entrepreneur like you.
2. R.E.S.P.E.C.T. You will get N.O.N.E. of it. Atleast in the first five years.
3. That idiotic neighbor who codes for a living at Infosys will be the apple of even your own parents' eye.
4. You will be the scum of the earth. For everyone in the housing society.
5. Your dad will start mention your old job when asked by his friends.
6. You will lose your friends. No one wants a jockey who is gone 24/7 building his dream.
7. You will never have enough money. Never in the beginning.
8. No one will marry you. But that will cheese off your parents more.
9. No one will date you either. That will cheese you off more.
10. The government... enough said...

The aim of this article is not to scare but to motivate you to give continuous effort to get success. What you say? you can share your thoughts :)

Post javascript array to server using jquery post

I was making a "create poll form" containing a question, multiple choices and other options. The challenge was to post values to the server without refreshing page. Another problem was there will be one or more options (means array of the options value) and each option may contain comma with it. While posting values to the server, array values are separated by comma. And if any of the option contains comma, we are gone. Server code will create one more option while spiting comma separated string back to array :) . After trying several things I found a simplest and reliable solution as below:

 <html> 
<head> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 
  <script type="text/javascript"> 
    function SavePoll() { 
      var pollQues = $('#txtPollQues').val(); 
      var input = $("#answer-options input:text") 
      var choices = ""; 
      var optionCnt = 0; 
      for (var i = 0; i < input.length; i++) { 
        if (input[optionCnt].value != '') { 
          choices += "&choice-" + optionCnt + "=" + $.URLEncode(input[i].value); 
          optionCnt += 1; 
        } 
      } 
      choices = "&optCnt=" + optionCnt + choices; 
      //some validation here 
      var pars_choices = "SavePoll.aspx?question=" + pollQues + "&pollId=" + pollId + choices; 
      $.post(pars_choices, function(resp) { 
        //viewPolls(pollId); 
      }); 
    } 
</script> 
</head> 
<body> 
  Poll question 
  <textarea id="txtPollQues" name="txtPollQues" rows="3" cols="50" style="width: 99%"></textarea> 
  <br /> 
  Poll options 
  <ul id="answer-options"> 
    <li> 
      <input type="text" /></li> 
    <li> 
      <input type="text" /></li> 
    <li> 
      <input type="text" /></li> 
    <li> 
      <input type="text" /></li> 
    <li> 
      <input type="text" /></li> 
  </ul> 
  <input type="button" value="Save" onclick="SavePoll()" /> 
</body> 
</html> 

The corresponding server side code is as below:

 protected void Page_Load(object sender, EventArgs e) 
{ 
     string pollQuestion = ["question"]; 
     int optCnt = Convert.ToInt16(Request["optCnt"]); 
     string[] choices = new string[optCnt]; 
     for (int i = 0; i < optCnt; i++) 
     { 
          choices[i] = Server.UrlDecode(Request["choice-"+ i] ); 
     } 
     Your save method (pollQuestion, choices); 
} 

Forward mail helps spammer to collect email ids

I get several forward emails from friends. I like it and I also forward it if it is worthy to forward. Few month before I had created a new email id for official use but I am using it for other things like to send email to friends and some non official things. Within a month of period time, I started gatting several spam mails. I was surprised how it came on my newly created email id. Later I found that It was because of forward emails.

I have covered this story on globalthoughtz. Please visit to read more.

My best creation

I have developed several products solely and as part of development team. Among them Buzzom Desktop application and Nxy url shortening service are my favorite product I ever developed. I am part of this product development team. The interesting parts of this product are both are based on twitter services. Both applications provide login using twitter credentials. This application seems very simple, but they run on much optimized way.

Buzzom Desktop is a twitter tool for windows. Its basic function is to send tweets and read tweets. But while sending tweets, if the url length is greater than 23 characters, it shortens it using http://nxy .in service. Another interesting part is the short url. Each short url created using Buzzom Desktop will be unique for each creator. When these short url opens in a browser, it will show a small advertisement at top, and that advertisement will be creators(yours) advertisement. For that you need to configure it from http://nxy .in. Wow you can earn while sharing your views to the world. And also, you can track your urls, how many clicks you have got. The concept behind these products is to benefit users maximum. Oh I dived in to financial things; let me discuss again technical part.

Technically, twitter gives 150 APIs hit per user per hour. This is very essential while developing twitter based application. And there is heavy client server communication also. So every request sent to web/twitter is an expensive task in terms of performance. Buzzom Desktop communicates two different web server for two different purpose: 1. Twitter to provide twitter service and Nxy to provide shortening url. So these factor are considered while developing it. To know more about Buzzom Desktop visit buzzom blog. I will back to you soon with more stuff and fun. Good bye.

Social media and profile picture

I am a social media man. Do actively use Twitter, Facebook, and Linkedin; and use others like Hi5, Orkut, Live, Yahoo360 etc. moderately. In most of these social media services, I add those friends who are known to me. I upload my latest pictures, post my current statuses, wish on birthdays, comment friends statuses and photos. I also love to see my friend’s status, new events, new pictures uploaded, new profile picture, discussion and many more. I keep on changing my profile picture, and it bores me to see someone keeping same profile picture for a long time.

I am having totally different experience with twitter. I have thousands of friends and very few of them are known personally. Usually I read tweets from few users only, because their interests match mine. They are my favorite tweeters. I know names of only few tweeters but I recognize many by their profile picture. When my favorite face tweets something, I don’t miss it.

I came to know that, changing profile picture is painful for those who like you. Today, one new face was tweeting there in my favorites and it surprised me. I thought it was someone I haven’t followed. When I saw user name there, that was bit familiar but not completely. Later I came to know that, he was my favorite twitter friend,@shresthayash.

This incident made me rethink my Twitter strategy. You may have to also. Think twice before you change your profile picture. It creates great confusion to your followers. It might cost you.

Have a great twit ahead. cheers!!!!