Twitter badge update for Guitarlodge.co.uk

Posted by on Jul 12, 2012 in Internet, Music, Web | 0 comments

Guitarlodge.co.uk, the total guitar & amplifier repair service, regularly uses Twitter to post pictures of the latest guitars and amps they are working on.

Although in the past I had added a Twitter badge to the homepage, the regular Twitter badge doesn’t display the image in the tweet, it just displays a link to the image.

I was asked if it would be possibly to display the images in a redesigned badge – a challenge!

In my research I came across this post: Create a Twitter Feed with Attached Images from Media Entities which uses jQuery Masonry to display Twitter images in a lovely way and is customisable using CSS.  The full details of which code to enter where on your page are shown in the article making it easy to add.

So the original Twitter badge on Guitarlodge.co.uk looked like this:

and the new Twitter badge looks like this:

Guitarlodge can now just simply Tweet a picture and their website homepage is automatically updated with their latest work.  As an added bonus, when you click on the image on their homepage a larger version is displayed using a Fancybox lightview popup which includes the text from the tweet as the description.

Check it out in it’s full glory on www.guitarlodge.co.uk

Guitarlodge.co.uk