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.

6 comments

  1. I’m trying to call function directly now from single.php but I get undefined function hybrid _ get _ textdomain ( ) error. What can cause that?

    Thanks.

    1. Hi Viktor,

      Sorry about the late reply. I have updated the post with some new instructions and additional code. Can you please try again and let me know if it works?

  2. I guess code didn’t show up.
    [code][code]

    If this won’t show up, then the way I’m adding add_action tag is just like any WP tags, with php tags around it.

  3. Hey Pratik,
    I noticed the problem when I was scrolling down the page to leave a comment. The code is missing ?> closing tag, which showed broken code at the top of dashboard when file was saved in WP. But now, buttons not showing up.

    When I tried adding add_action both ways, nothing shows up.

    Minus the stars. Maybe I’m adding it wrong?

  4. I tried adding that function in my function.php but code keeps showing up at the top of dashboard after I save it. Is this issue in WP3?

    1. Hi Viktor,

      I’m using WP3, so its not an issue with WP3. What add_action code are you using? May be thats the issue. hybrid_after_entry is specific to the theme I’m using, for you it might be something different. You could also call the soc_links_end_of_entry function directly from index.php or single.php right after the call to the_content.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.