How to add social media buttons to Blogger

Social media is all the rage for the past few years. And of course, if you’ve been online any time in the past 5 years or so, and definitely if you have a blog - you probably already know that. Bloggers use social media to drive traffic, so we want to push-push-push it in our readers face.

When facebook introduced the “like” button, that was a true revolution: all the reader has to do is click once - and our page is visible to all of the user’s friends. Then came Twitter, Google+ and Pinterest and offered their own button for easy sharing. However, all these buttons caused a serious design issue. They are dynamic (how dare they?). The height and/or width might change according to the button’s settings and how many people shared the page.

There are several different ways to deal with this issue, most of which cause silly gaps between the buttons or require various types of floating vertical areas which contain the social media buttons. I didn’t want to be quite so “in your face”, so I worked on it a little bit and I think I came up with a nice layout which requires a minimum amount of size mismatch, a horizontal layout and no gaps whatsoever. You can take a look at the bottom of this post for an idea of how it’s going to look when you’re done. If you don’t like it, I suggest you stop reading now…

Note and warning: Before you do this, please back up your template. If you don’t know what that means, don’t even try. Wherever there is a yellow highlight, you should replace the values with your own (according to what is needed in that location).

[This tutorial covers the code necessary for setting the image for the Pinterest button dynamically, so no need to do both.]

Pin-it button for blogger - with count!

If you don’t already know Pinterest, you should. This uprising star of social networks is the next big thing. Personally, what I like about it is that it’s driven by content - I don’t know most of the people I’m subscribed to, and they don’t know me. But the pictures are big and colorful, and repining is so easy… The virality factor is awesome! After I pin anything from my blog, I automatically see a spike in my stats, it can double the visits to my blog instantly.

Pinterest works on images, that’s the main content driver and posting without an image is just missing the point. Unfortunately for us, unlike the post title and url which are available through blogger data properties, the post doesn’t expose an “images” property (and it really should).

OK, so we all want in on the action, but the “pin-it” button Pinterest supplies doesn’t take into account dynamic content. I’ve seen a few solutions which take the pin-it bookmarklet (i.e. a short cut for your browser) and embed it on the page. That works fine and allows you to chose an image to pin, but then you don’t get the nifty count of how many people have pinned this page, and that’s a big loss.

Lucky for us, and as opposed to how the facebook like button works, we can control the image (or: media) property via javascript.

Note and warning: Before you do this, please back up your template. If you don’t know what that means, don’t even try.