Tweet and Like This for your site

Just as Posterous has Tweet and Like buttons on each post, a client asked me to do the same for his site yesterday.

 

Getting all twittered up wasn’t too hard – I started with John Resig’s Easy ‘Retweet’ Button

http://ejohn.org/blog/retweet/

Nomenclature not withstanding (it’s not exactly ‘retweeting’, more ‘tweet this’) I found it to be a pretty good guide, highly customisable, and it was up and running before I left the Brixton office.

 

Facebook Like buttons are a bit more work, and I haven’t finished them yet, as they require ‘setting up your page as a Facebook Application’ – I’ve done everything on the client site end, which required a lot of reconfiguring of the way the site was moddled, which is OK as its now much closer to the MVC model, and now just need to deal with the Facebook end. Arse about tit perhaps, but the Facebook instructions neglected to mention the minor of matter of making your site an FB app – or how to do it as far as I have found yet. Well that’s one of the next things on the list.

I am going for the more complex <fb:like> XFBML tag/Javascrip route over the iFrame method for two reasons:

1)      Javascript is more powerful, flexible and tidier.

2)      iFrames just SUCK. Once upon a time they were a clever and necessary if messy way of achieving some nice tricks. Today they are like the appendix, the coccyx and nipples on men.

 

Here are some links that have gotten me this far:

http://developers.facebook.com/docs/opengraph
http://developers.facebook.com/docs/reference/plugins/like
http://developers.facebook.com/docs/reference/javascript/

http://hillarsaare.com/multiple-facebook-like-buttons-on-one-page/

http://www.hyperarts.com/blog/how-to-add-facebook-like-button-social-plugins-to-wordpress-posts/

Note, I’m not working on a wordpress site, but this was the first page I saw that pointed out that <fb:like> XFBML  “requires that your page/post make a call to the JavaScript SDK and that your page be set up as a Facebook application (quite easy)” and then goes on to show you EXACTLY HOW TO DO IT! Yeah, that’s the way we like it, uh huh, uh huh…

[UPDATE 1800 4-6-2010]
Well, the application setup was incredibly  simple, and just dropping in the FB App ID (and adding a <div id=”fb-root”></div> tag to the end of the page, which FB didn’t  think important enough to mention!) it works. Now I need to hack it to display the way I want it to! 

[/UPDATE] 

[UPDATE 2000 4-6-2010]
Ah. No, it doesn’t work – it just throws an error with no debug info. That sucks.
And you don’t stand a chance in hell of restyling it – even the Javascript method calls up an iFrame, meaning you are unable to affect it’s appearence with either JS or CSS. That also sucks.

[/UPDATE] 

[UPDATE 1650 21-6-2010]
First time back on this particular client’s site since, and it appears things are actually working well. It does occasionally throw an unspecified error, as I first saw, making me think it was crocked on my first test, but you will get AJAX communication errors from time to time whatever you are doing.
Now I just had to make it usable – we don’t have room in the site design to have this massive Facebook like widget eating virtual real estate, and as noted before, we can’t control the iFrame contents using CSS or Js.

BUT we can control the iFrame container. By placing the Facebook widget in a div, we can shrink that div to just the size of the button, and then using the :hover pseudoclass increase it’s size on mouseover.

[/UPDATE] 

What is it with documentation? I’m a clever guy, I write tech docs myself, and while I’m not a university trained programmer I’m not a bad one. But SO many tech docs sketch barest bones on very specific tasks, miss vital instructions that could often be provided with a simple link where they are more complex than space permits, and don’t provide examples!

Speaking of which, I hope to add some code examples of both these methods later, as well as my Like and Tweet PSD files, free to use, modify and redistribute.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *