Customizing WP plugins: rolling my own TweetMeme

Oh, the joy of WP plugins… they *never* do exactly what you want. I tried out Tweetmeme, but that just didn’t get the title of the page it was on, only a post title. Also it places a gif image without a transparent background, so I could not use it in my footer. And I thought it could use some styling on the button, a more discreet rollon or hover effect… Too much.

I also tried out the EasyDigg plugin, which does enable you to style the badge yourself and has some interaction feedback by way of jQuery. Downside is that the plugin just didn’t bother to connect to the Digg API (!) – it only counted clicks on posts and stored them in the WP database… amazing – does nobody check these things? And the plugin’s author is no longer to be found online, of course. Another plugin featured some dodgy site’s url as the Digg API key – which could get that site banned from Digg, if not your own – nice and friendly. Note to self: always check the plugin’s php code… who knows what else you might get with your nice freebie…

But what really kills me is that none of these plugins worked with pages – they only correctly retrieved titles and Id’s for posts – like you wouldn’t want the world to know about your main content (and some even called that “tacky”, tss).

So what I did was make a mashup do a complete re-write of the EasyDigg plugin code with the jQuery-enabled interaction and css styling, but with *some* corrections that would enable the plugin to get the correct Id for pages as well. I think the trick is using a badge class instance per page, and passing the id from the instance – not the global – to the get/save/increase-count functions. With instances you can have a per-page count, instead of storing the count in the first post for the whole site… a familiar idea from Actionscript 3, where classes and instances are basics.

To add a shortened url to the tweet, I used a little bit of code that I found here: How to create your own ReTweet Button on Bawaal.com. Thanks for that!

What does it do?

• places a “tweet it” badge on both pages and posts, but not on category or index list pages
• gets and stores the tweet-count in the wp database for each page or post (not just for the whole site)
• badge can be placed anywhere by adding code in a template file, i.e. show it in the footer or sidebar, not only in the content area
• the tweet text can be customized on the WP settings page
• specific pages or posts can be excluded by their Id
• on click, the badge updates the number of clicks it’s showing
• on rollover, it shows the tweet url in the status-bar , so you know what’s going to happen when you click
• images and css can be customized to fit your theme

Here is the php url for Twitter, constructed like the Bawaal button code:

$tweet_url = 'http://twitter.com/home?status= '.$usertweet_txt.' '.$this->btb_pag_title.'
- '.$this->btb_posturl_short;

This will connect to your twitter page and set the status update text to something like: “RT @telexer: Hello world! – http://www.blagoworks.nl/telexer/go/1″.

The structural styling goes in the plugin’s css file, but the custom backgrounds and positioning go into the main style.css, like this:

#blago_tweetbadge {padding:0; margin:0 14px 0 0; display:block; float:left;}
#blago_tweetbadge .tbtn_count {background:url('imgs/tweet_badge_top.png') no-repeat 0 0;}
#blago_tweetbadge .tbtn_button {background:url('imgs/tweet_badge_btn_off.png') no-repeat 0 0;}
#blago_tweetbadge .tbtn_button:hover a.active {color:#000; background:url('imgs/tweet_badge_btn_off.png')
 no-repeat 0 0;}
#blago_tweetbadge .tbtn_button:hover a:hover.active {background:url('imgs/tweet_badge_btn_on.png')
 no-repeat 0 0;}

Also note that I very creatively called the first version of this “TweetIt” – but as it was made on Michael Jackson’s dying day +1, and the plugin’s name and the Beat It song were doing their own mashup in my head… heh… I changed the name.

Please see the readme file for more information on how to install and use this plugin.

---

UPDATE – I’ve now added a Settings page as well, for easy access to the line of text that gets tweeted: