Add A Tweet This Post Box To Your Thesis Post Footer

A couple posts back I wrote about creating a recent tweets section with Twitter’s new @Anywhere service. Now, let’s take it a step further and set up a “Tweet This Post” box. We’re going to be using Thesis, and we’re going to place the box at the bottom of each post on single posts.

tweet-this-footer

Twitter API Key

The article I referenced above explains how to register and set up your @Anywhere app on your blog. If you haven’t already got your Twitter API key you will need one. For a full walk through check out my last post regarding @anywhere integration.

The Code

First, we need to insert the scripts that enable @Anywhere. Be sure to change “YOURAPIKEY” and “YOURUSERNAME” appropriately. Also, you can set the parameters contained in label:"Tweet This Post:", height: 50, width: 600 to whatever you like.

Be sure to place these scripts using the hook. If you use Thesis options for this, the php code for the post’s title and permalink will not pass through

function anywhere_scripts() { ?>
	<script src="http://platform.twitter.com/anywhere.js?id=YOURAPIKEY&v=1"></script>
	<script type="text/javascript">
		twttr.anywhere(function(twitter) {
			twitter.hovercards();
			twitter('#follow-YOURUSERNAME').followButton("YOURUSERNAME");
		});
		twttr.anywhere(function (T) {
			T("#tbox").tweetBox({ label:"Tweet This Post:", height: 50, width: 600, defaultContent: "<?php the_title(); ?> - <?php the_permalink(); ?>" });
		});
	</script>
<? }
add_action('thesis_hook_after_html', 'anywhere_scripts');

Next, we need to grab the code that will actually insert the tweet box below the post:

function tweet_box() {
	if(is_single()) { ?>
		<div id="tbox"></div>
	<? }
}
add_action('thesis_hook_after_post', 'tweet_box');

And that’s it! Just add those to snippets to custom_functions.php in your Thesis custom folder and you’re done!

Go Ninja

If you really want to be a ninja, check out this post by Matt Langford on Automatic URL Shortening with Bit.ly. He offers a simple solution for replacing the permalink with a bit.ly URL so that your users won’t have too!

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Adam Baird

Adam is a Wordpress designer, Thesis specialist, and blogger from Indianapolis, Indiana. He writes web design tutorials and resources on Theme Big. Check out his custom work here.

Comments

  • Matt Langford says:

    Good stuff! I’ve actually gotten a good bit of positive feedback since I incorporated the tweet box and the bottom of my posts. And people seem to be using it! Can’t go wrong with that…

    Also, thanks for the link!

  • Bill Weye says:

    Thanks for this tip. Just a couple of things … you should repeat or make direct reference to the steps of getting the API key; I didn’t realize it until I went to your previous post.

    Also, I don’t know how to pull it, but WordPress already has a URL shortening service integrated right into the post editing screen. Look at the end of the permalink, “Get Shortlink”. Now the question is, how do you pull that out and integrate that variable into your function?

    Thanks again.

    • Adam Baird says:

      Guess I just figured there was no sense in repeating myself and I did clearly state that it was in the other article…sorry for the confusion!

      Also, WordPress does not have an integrated shortener. You’re running WP-Stats which is why that shows up for you. It may also show up with a few other plugins, but it isn’t native.

      Automattic has been a bit tight lipped about that whole service…you can’t access it via API that I know of, and there is no way to call it directly. Short of writing some sort of custom code, the only solution for that would be to get that shortened link and copy and paste into a custom field. Then you would call that custom field in your code where ever you wanted the permalink.

      Furthermore, the wp.me links include a 5 digit id number for your blog…seems counter-productive to me when they are trying to shorten the links. It has a lot of potential but I wouldn’t touch that service just yet.

    • Greg Rickaby says:

      @Adam, you beat me to this post you bastard! :)

      @Bill, Adam’s right…there’s no way to access the built in WP-Shortening service. I’ve tried and was going to “figure it out” before making a post similar to this…alas Matt’s awesome tut on Bit.ly is worth checking out.

  • John Sullivan says:

    Brother your no joke :)
    Thanks for all I learned

  • Jarkko Laine says:

    Great stuff! The moment I saw this in action on this blog, I knew I had to have it on my blog. And the fact that you explained how to do it this clearly made my day.

    Thank you!

  • Awesome. Using this now along with Matt’s bit.ly shortening tutorial. Hopefully it encourages some tweets! Thanks Adam.

  • Actually, on closer inspection it’s not working right for me. It isn’t looping properly, i.e. it’s showing one specific post every time, regardless of what post it’s on. Any idea why?

  • Orfebre Martin says:

    It isn’t looping properly, i.e. it’s showing one specific post every time, regardless of what post it’s on

  • Faheem says:

    Your article is brilliant! I didn’t face any trouble implementing it but unfortunately there’s a glitch,my tweetbox is not working properly. It gets stuck on sending tweet. You can check it yourself!

    Please let me know if i’ve done something wrong!