How to: Add Tweetmeme Button to Byline

January 4, 2010 in Thesis Theme | View Comments

This is one of the main customizations that I did on my Thesis theme. Custom text under the headline, also called byline. It’s rather simple, really. But having the ReTweet button in byline instead in the post, makes the blog post look cleaner, in my opinion. And the best part is, you dont’ even have to have the Tweetmeme plugin installed.

Create Custom Byline with Tweetmeme Button

All you need to do, is insert the code below into your custom_functions.php file.

function custom_byline() {
?>
<div style="float:right; margin-top:-17px;margin-right:-27px;">
<script type="text/javascript">
tweetmeme_url = '<?php the_permalink() ?>';
tweetmeme_style = 'compact';
tweetmeme_source = 'markotu';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> </div>
<?
}
add_action('thesis_hook_byline_item','custom_byline');

You will have to adjust margins to fit your blog, just change the numbers in margin-top:-17px;margin-right:-27px; until it looks good.

Second thing you’ll want to change is tweetmeme_source = 'markotu';. Obviously you want to put your Twitter user name in there instead of mine.

And last you can change the URL shortening service to your preference in this line tweetmeme_service = 'bit.ly';, if you don’t like bit.ly. A list of services available and more information is here.

This is it. I’ll post more Thesis customization tips and tricks in the future, hope you liked this one.

If you enjoyed this article, you might also like:
  1. Thesis Theme Tutorial: Move Comments Link from Below the Post to Byline
  2. How to Add Google Buzz Button to Your Blog
  3. How to Add Custom Banner Ad in Thesis Theme Header
  4. Clickable Header Image in Thesis Theme
  • I know simple thank you comments don't mean much, but I was looking for a quick fix and you had it, so thanks!
  • Hi Pam, its quite simple, actually, you can use exactly the same technique for Facebook Share (and in fact, really all the social options out there). I posted a similar howto for Facebook share on my blog a month or so back. You can see it on my blog at Adding A Facebook Share Button to Thesis

    With Facebook share, you should also add some more meta-information to the post page, as Facebook actually scans your blog page when someone hit the share button, looking for specific information, which will end up being displayed in the share post on the sharers wall, so being able to control that is nice. Read the Facebook Share Wiki to find out more.
  • Would it not be a good idea to drop the inline style, tag the <div> with a class or ID, and stick the CSS in custom.css, for those of us who believe that presentation and style should at all times be kept separate?
  • Yes, it would be a good idea. :)
  • I've been trying to figure out how to do this -- thank you! I'd also like to add the compact Facebook Share button in the byline (example: http://www.briansolis.com) -- any idea how to go about it?

    Thanks so much!
  • any idea what the code is for facebook share and google buzz?
  • Thanks you for the tip. With your help I did it!
  • I'm glad I could help!
  • That's a great tip, and easier to do than install the plugin. Just one question, does the code go into the thesis custom programming main custom_functions.php theme editor? As everytime I add a code there, I get an error and having been inputting my codes by openhook!
    Thanks
  • The code goes in the custom_functions.php file located in this directory: yourdomain/wp-content/themes/thesis/custom
    Simply adding the code at the end of that file should work. Regards.
blog comments powered by Disqus

Previous post:

Next post: