Adding a Facebook share button and Digg this button with tweetmeme retweet button in wordpress thesis theme

November 5, 2009

I guess the thesis theme is among the most popular wordpress themes among professional bloggers. The best part about the theme is its ability to support custom functions and styles. So virtually everything is possible.

After I tried my hands at Thesis theme for WordPress I added some plugins. I need not explain to you the merits of social media sharing buttons. The hottest in this section are Twitter, Facebook and Digg. Especially the share buttons with the counter are must haves for any blog. You get the code to add these buttons from the official portals. There are plugins to achieve the same. But it’s hard to get all three of them or two of them next to each other using different plugins. The example is right on this post.

If you need to have some thing like this on your blog, then follow this simple guide. I have put in screenshots to help you in process. We will be tinkering around with the coding. So some hands on experience with PHP and HTML is welcome. Else you can follow the coding exactly as it is and hope for the best.

Most popular and accurate Re-Tweet button with count comes from tweetmeme. They have a wordpress plugin for that. I am going to add official Facebook and digg share buttons with share count display to the tweetmeme plugin. In this example I am messing with Thesis wordpress theme. You can do the same to any theme you want. It only changes the code of the plugin so – a theme independent solution.

Browsing to the Tweetmeme.php file in wordpress
Browsing to the Tweetmeme.php file in wordpress

I believe you have a self hosted wordpress blog.

>>So navigate to the wp-content folder.

>> >>Find the plugins folder. Enter

>> >> >>Find the TweetMeme folder. Enter

>> >> >> >> locate this file tweetmeme.php

Now we tinker with the code. To do so, download the file to local system and open is with some standard text editor. I am using dreamweaver. Now look for this function in the code ‘tm_generate_button()’. Use the find feature in your text editor (ctrl +f ) to find this function. The code is rather long so might be hard to do it manually.

Editing the code
Editing the code

The red bordered area is where we do the actual change. You will have something different in the original file. Now add this code to the $button variable so that the final code looks like above.

<br><br><script>var fbShare = {size: \’large\’,google_analytics: \’true\’}</script><script src=”http://widgets.fbshare.me/files/fbshare.js”></script>
<br><br>
<script type=”text/javascript”>
digg_url = \”.$url.’\’;digg_title = “TITLE”;

</script>
<script src=”http://digg.com/tools/diggthis.js” type=”text/javascript”></script> </div>

Replace the file and enjoy. Download this php file right here if it is too much for you.

You can do your own modifications to suit your purpose. Replace the <br> with spaces to get a horizontal effect. Feel free to comment.

15 Comments

  1. Sweet little tutorial thank you for posting it! I just installed Thesis a few days ago just added your code to tweetmeme – worked like a charm, so easy!

  2. Hey man, great tutorial! This is just what my blog needed. I am, however, having a slight issue. When my posts aren’t longer than the iframe for the buttons – for instance, when I just want to post a quick paragraph with a small update – the buttons spill over the rest of my layout.

    (i.e http://www.yourwiseguy.com/?p=218)

    I tried to play with the code, adding height styling and whatnot, but couldn’t come up with a fix. Any thoughts or tips would be much appreciated. Thanks!

  3. Thanks for the appreciation friends.
    @Charles Dude. I did chk your page. The Digg button is almost hidden. Y not put some line breaks to accommodate the bar. I know that is a stupid solution. But that is a easy thing to manipulate without making things look odd.

    @Sathia Friend I am glad you find it useful.

  4. Hah, worked like a charm! I don’t know why I didn’t think of it before. I think because I was so focused on editing the styling of the actual plugin. Thanks for your help and feel free to stop by the site =)

  5. Arg! I updated Tweetmeme and now I can’t get the buttons to show up again (after re-adding the code of course). Is it possible that the updated PHP file could make this code not work?

  6. W0W thank you so much this tool is so cool. I was searching for it for long time now … actually tried to do it my self with different plugins and all that … but without success.

    Thanks again !

  7. Doesn’t seem to work with the new version of Tweet Me Me. Any changes in the code that could help. If I use the same code it breaks my whole theme and site.

  8. Dear Lawrence,
    I checked your post and it looks pretty neat with the code there. I think you found out the right way of doing it. cheers.

  9. Nice tutorial. I tried using it, but the TweetMeme plugin has been updated and the code is a bit different. Also, I believe there is another plugin called Digg Digg that will accomplish the same thing without making code changes.

Comments are closed.

Latest Posts

Rooturaj Pattanaik

Technology & Business Consultant with customers across 6 countries. A doting father and loving husband writing about various topics like Technology, Travel, Society, Digital marketing, Investment consulting etc.

MY DICTIONARY PROJECT

I have started a new project called the Indic Dictionary. This will cover popular household words in India and what they are called in various languages. Eventually, I will make this an easy to use app where where people can easily find something like “hing in English” or “Tea Tree Oil in Hindi” or “carrom seeds in Urdu”.
Previous Story

Forced beggary in Delhi | I see, I feel, I understand but I don’t Act

Next Story

Great Google Doodles by Indian Kids

Latest from Programming

Go toTop

Don't Miss