Blog Pile, Wordpress

Rolling New Tweet Button into WordPress

UPDATE Jan 6 2012: While the code should still work, I have disabled this approach on my own blog, instead using the Sharing tool built into the JetPack plugin.

Twitter has created a new widget that makes it more friendly to provide a tweet this button from your own web sites, blogs, etc. The benefit is that it pops a window up with the twitter functionality, so you are not sending people from the web site.

See the announcement from the twitter blog to learn more. The tweetbutton creation widget makes it easy to generate the code, and has a umber of options to choose from for the appearance of the button and what gets prefilled in the tweet (plus with their new url shortener t.co is one letter shorter than competitors!).

The sample code includes a Javascript link to the library that provides the functionality-

This works well on a WordPress single post template, where it pulls the url for the current page and provides a tweet button where-ever you like it. I put mine in the header tag that displays the blog post.

I also want on my main index page and archives where there are multiple posts. Here is how I set it up.

First I put the Javascript link in the header template, inside the <head>…</head>

This way we only load this library once, and now can use the code on any web page.

Now on my single post I can use the rest of the widget code to add my button (sans the javascript tags)

That was easy.

But I wanted more- I would like it on each post on the front of my blog.

That is also easy.

For the main page template, index.template, we cannot use the basic code because it posts the URL and title for the current page in view (just my blog) rather than for each post in the loop. This is easily rectified using the WordPress loop variables, so inside my loop where it is moving through posts, I have:

so I am populating the data-url and the data-text fields with the permalink and post title as WordPress moves through the loops. Try it out on http://cogdogblog.com/ – each post title has its own tweet this button.

I can now add this to archives, search result templates etc.

I like the functionality and am looking at rolling it as well into our NMC fleet of web sites.

Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Comments

  1. Thanks for the comprehensive tutorial on how to implement the new ‘tweetthis’ feature.

    I was actually trying to decide whether or not to add a ‘tweet-this’ button to an archive.

    After reading your post, I’ve got the answer. Yes, an archive will benefit just as much as a current post. In addition, my visitors no longer have to leave my blog in order to tweet the post.

    Well done!

  2. hey! first of all thank you so much for the knowledge. That was really helpful.

    further, i would like to know if i can add the addthis share button to my index page after each post?

    i tried but i cannot rectify the loop variable problem. let me know if this is possible.

    e.g. i want the following buttons to appear on the main index page of my website, after each post:



Leave a Reply

Your email address will not be published. Required fields are marked *