2 Ways To Add Social Bookmarking Buttons To Your Blog

Many bloggers and analysts argue that search engine ranking and SEO are starting to become less and less relevant in gaining traffic as social media rises. Sites such as Digg, Twitter and Stumbleupon are sworn by in the blogosphere for getting huge spikes in traffic when a post goes viral.
So if you own a blog or website and think that your content has what it takes to compete on these sites then you’ll need to add social media buttons such as the ones we have here on MUO at the bottom of this post.
We’ll look at two options. Firstly, the easier one – plugins.

Plugins

Wordpress is the most popular blogging platform mostly because of how adaptable it is by using plugins – and it’s free. The first plugin we’ll look at is one you’ll recognise from many different blogs. The tweet button.

Twitter

Twitter is the fastest of all social media sites by its very ‘micro-blogging’ nature so having it at the top of the post works best.
Download and install this plugin.
If you’re not familiar with installing plugins on Wordpress here is a quick guide (although the process is fairly basic and even beginners should be able to do it without any fuss):
When in the wp-admin panel, click on the Plugins option in the menu to the left of the screen. Then click ‘Add new‘. Up at the top of the subsequent screen click ‘Upload‘ and choose the .zip file you downloaded earlier. When this has finished installing, click ‘Activate‘. Each of your posts should how have a Retweet button beside them with a counter.
Or you could search for “Tweetmeme” from the Plugins page and the Retweet Button plugin should appear as the first result. Click on “Install” to add it to your plugins.

Add This

This plugin, pictured here to the left combines in excess of 200 social media buttons into one. The design is minimal and very functional. It’ll look good and work well for the majority of blogs.
When on the plugin menu in the WP-Admin screen, select search and enter ‘Add This‘. This popular plug-in should appear. Click on it and then select the option to install it on your blog. Each post should now have this button for your readers to promote your posts.

HTML – For Advanced Users Only

I say advanced but really you just have to know the basics of HTML or have enough patience to slowly read down through it and decipher where the post starts and ends. A small tip I’ll give you at this stage is to use your browsers Ctrl+F function to find certain parts of the HTML code.
The HTML file you’ll be editing in Wordpress is called singlepost.php or something similar. Use the HTML editor under the Appearance tab in the admin menu. For people using Blogger, you too can try using this code under the HTML editing section in Blogger however it may not work as Blogger templates are often poorly coded or are simply ports from Wordpress themes which don’t accept new code too well.
I’ll say this now rather than later: Back up the file you’re editing. Trust me, it’ll save you much frustration later if it all goes wrong. This is especially important if you’re not too familiar with HTML. While the chance is small, adding code to your theme may conflict with something else and cause your website to act like a drunk carving the Christmas turkey!
The most basic way of doing this is to copy all of the text in the file into Notepad (or another text editor) and save it. That way, if it messes up your blog you can simply copy the original code back in.
In the singlepost.php code, find coding which indicates the end of the posting area. This is normally just after coding for the comments submission form and some ‘

’ tags. If you want the social media inside the post areas, select a section before the tag. And if you want it further down the page select an area after that. Paste in the following code :

&title=” target=”_blank”>/wp-content/themes/arthemia/images/sociable/digg.png” title=”Digg this!”> &title=” target=”_blank”>/wp-content/themes/arthemia/images/sociable/delicious.png” title=”Add to del.icio.us!”>&title=” target=”_blank”>/wp-content/themes/arthemia/images/sociable/stumbleupon.png” title=”Stumble this!”>” target=”_blank”>/wp-content/themes/arthemia/images/sociable/technorati.png” title=”Add to Techorati!”>&t=” target=”_blank”>/wp-content/themes/arthemia/images/sociable/facebook.png” title=”Share on Facebook!”>&h=” target=”_blank”>/wp-content/themes/arthemia/images/sociable/newsvine.png” title=”Seed Newsvine!”>&title=” target=”_blank”>/wp-content/themes/arthemia/images/sociable/reddit.png” title=”Reddit!”>&u=&ei=UTF” target=”_blank”>/wp-content/themes/arthemia/images/sociable/yahoomyweb.png” title=”Add to Yahoo!”>

Important Note:

You’ll notice with this code that a lot of the images (i.e. the buttons) are associated with my theme. So if you paste this code directly into the file the buttons won’t show up. Here’s what you’ll have to do.
Find some buttons. This post gives some great choices:
So, for example:
When you download a Facebook button, upload it to your site using the ‘Add Media‘ option in Wordpress. When it’s finished uploading you’ll be given a URL. Copy this URL from the ‘/wp-content’ part onwards so it looks something like this:

Then copy that in place of the Facebook image URL you see here in the code. Make sure you copy it over the right image in the coding otherwise your buttons will be mixed up.
This process seems tedious and time-consuming but it’s really quite simple when you think about it. And you can download any kind of button you like. If you don’t fancy the buttons on the site I suggested above, simply Google ’social media buttons’.
When this is done, save the file. The bottom of your posts should look something like this:

You can add further buttons anywhere on your posts and customize them. However this really is only for advanced users who are familiar with HTML.
For other social bookmarking button codes, simply Google the site’s name followed by ‘button code’ and paste it in at the bottom of the above coding. The sites included in the code above are; Digg, Del.icio.us, Stumbleupon, Technorati, Facebook, Newsvine, Reddit and Yahoo!.
For many, I think, plugins might be the quicker and easier option. There are tonnes of other designs out there. Just Google ‘Wordpress Social Media Plugins’ and you’ll see what I mean.
However, the rule-of-thumb for blogging states that ‘content is king’; so no matter how many social bookmarking tools you have on your blog, nobody will use them unless your articles are useful and entertaining.
What social media do you use on your blogs?
Did you like the post? Please do share your thoughts in the comments section!