Plugin-less Integration of Facebook Like, Google Buzz and TweetMeme Retweet with WordPress

There are lots of plugins in the wordpress plugin repository which can be used to integrate Facebook Like, Google buzz, TweetMeme Retweet etc with wordpress. However none of them provided all three functionalities at the same time or were flexible enough to integrate seamlessly with the theme. Hence I wrote a small php function which can be used to integrate the aforementioned services with any wordpress theme. You can see a live preview at the bottom of this post. Here’s the code:

function soc_links_end_of_entry() {
  /**************Instructions******************/
  /*  Update $tmp_space with your bit.ly API key */
  /* Update appId: '120108738010035' with the facebook appid for your application. You can create your application at: http://www.facebook.com/developers/createapp.php */
  /* Update $twitterid with your twitter username */
  /********************************************/
  global $post;
  if( is_single() ) {
  if ( ('post' == $post->post_type) && 'link_category' !== get_query_var( 'taxonomy' ) ) {
    $data_url = apply_filters('stbottom_blog_post_url', get_permalink($post->ID));
    $href = urlencode($data_url);
    // Facebook Like Options: https://developers.facebook.com/docs/reference/plugins/like
    $layout = 'standard'; //fblike
    $show_faces = 'false';  //fblike
    $width = 210; //fblike
    $height = 25; //fblike
    $action = 'like'; //fblike
    $colorscheme = 'light'; //fblike
    // Google Buzz Options: http://code.google.com/apis/buzz/buttons_and_gadgets.html#javascript_api
    $data_button_style = 'small-count'; //google buzz
    $data_locale = 'en_GB';   //google buzz
    // TweetMeme Options 
    $twitterid = 'free_thinker';
    $tm_style = 'compact';
    $tm_service = 'bit.ly';
    $tm_space = 'R_XXXXXX'; //Update this with your bitly API key
    $fbtn = "<div class='birdbrain_fblike'><div id='fb-rootbottom'></div></div> <script type='text/javascript'> window.fbAsyncInit = function() { FB.init({appId: '120108738010035', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-rootbottom').appendChild(e); }()); </script> <fb:like action='$action' colorscheme='$colorscheme' href='$href' layout='$layout' show_faces='$show_faces' width='$width' height='$height'/>";
    $bzbtn = "<a title='Post on Google Buzz' class='google-buzz-button'  href='http://www.google.com/buzz/post'  data-url='$data_url'  data-button-style='$data_button_style' data-locale='$data_locale'></a> <script type='text/javascript' src='http://www.google.com/buzz/api/button.js'></script>";
    $tmbtn = "<div class='tweetmeme_button' style='float: right; margin-right: 0;'><iframe src='http://api.tweetmeme.com/button.js?url=$href&amp;source=$twitterid&amp;style=$tm_style&amp;service=$tm_service&amp;space=$tm_space' height='20' width='90' frameborder='0' scrolling='no'></iframe></div>";

    $soclinks = '<div class="soclink_div">';
    $soclinks .= '<div class="soclink_right"><ul>';
    $soclinks .= '<li class="fblike">' . $fbtn . '</li>';
    $soclinks .= '<li class="tweetmeme">' . $tmbtn . '</li>';
    $soclinks .= '<li class="googlebuzz">' . $bzbtn . '</li>';
        $soclinks .= '</ul><div style="clear: both;"></div></div>';
    $soclinks .= '</div>';
    }
  echo $soclinks;
  }
}

Here’s the CSS I used on my website, adopt it for your wordpress theme.

.soclink_div {
 padding-top: 10px;
 padding-bottom: 3px;
 }

 .soclink_right {
 clear: both;
 position: relative;
 }
 .soclink_right ul li {
 float: right;
 list-style: none outside none !important;
 padding: 0 0 0 15px;
 position: relative;
 }

li.fblike {
 margin-top: -2px;
 }

 li.googlebuzz {
 margin-top: -2px;
 }

To use the function you can either call the function directly or add it using ‘add_action’

add_action('hybrid_after_entry', 'soc_links_end_of_entry');

You will also need to add the fbml namespace using the below code snippet. This code goes into the functions.php of your theme.

define('FBML_NS_URI', 'http://www.facebook.com/2008/fbml');
function fbml_add_namespace( $output ) {
  $output .= ' xmlns:fb="' . esc_attr(FBML_NS_URI) . '"';
  return $output;
}

add_filter('language_attributes', 'fbml_add_namespace');

Let me know in your comments if you need any help in integrating the above function with your wordpress theme.