Now a days when google is hitting websites with its panda, penguin and spam updates. Search Engine Rankings are falling more towards how well reputed your website is on social sites, even though it do provide the big giants a step ahead of others as they are followed by a larger community yet its the last resort of SE’s after all the spamming webmasters have done through On Page and Off Page SEO techniques including link building, comment spamming, blah blah.

The proof of social importance of your website or blog can seen by the faster indexing of links shared on Google+ and on the other hand facebook, twitters are the all time favorites to generate traffic after hitting the publish button of your cms, although they do not participate much on the ranking side. In addition pintrest is a new social site where images can be pinned, and a few others are also in the list, though Dig is old and StumbleUpon is no more in business much.

I recently got rid of a long list of plugins I was having at my other blog since it was started, managed to removed a few them, embed functionalists of few in the theme itself and lastly I was left with the social icons. In a couple of minutes I managed to install the three, Google+, twitter and facebook on my blog without using any of my supper programming skills as it was a really simple job for any courageous person who can dare to mess with a few lines of human readable code.

Before getting started, lets first discuss the place where we want to embed our social bookmarking icons? the best would be from where they are prominent and are not irritating the user much. Like for my blog I opted for the space under on title on the right for the single page and for the index the leftover space under the post excerpt.

Add Social Bookmarking Icons to your website or blog article

Add Social Icons to your blog website article

So as you can see I decided to go with the top three:

  • Google+
  • Facebook
  • Twitter

Well that was just my personal preference as most of the audience resides in these networks. Now now we have got our social bookmarking space lets begin with the installation:

G+ is the most easiest to install on any of your websites or blog. Just copy this link to the place where you want the G+ icon to appear:

Don’t forget to replace YOUR LINK TO +1 with your desired link or in wordpress it should be <?php the_permalink() ?> inside the quotes.

And to make this button appear, you’ll have to add this java-script in your footer just before the </body> tag:

YAY! Now we can +1 our content.

You get a twitter tweet button on our site, we’ll repeat the same steps, will copy this code snippet where we want the button to appear:

Here you’ll replace the <?php the_permalink() ?> with your link if its not a wordpress cms.

Next, copy this button rendering java-script to your footer just like we did before for G+

And the twitter tweet button is ready to go. next? facebook?

Facebook Like
For facebook its little ugly, you’ll copy this code to the place you want the like box to appear:

You can actually tweak a number of things from this code snippet, which are as follows:

  • href – the URL to like. The XFBML version defaults to the current page.
  • send – specifies whether to include a Send button with the Like button. This only works with the XFBML version.
  • layout – there are three options.
    • standard – displays social text to the right of the button and friends’ profile photos below. Minimum width: 225 pixels. Minimum increases by 40px if action is ‘recommend’ by and increases by 60px if send is ‘true’. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
    • button_count – displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
    • box_count – displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
  • show_faces – specifies whether to display profile photos below the button (standard layout only)
  • width – the width of the Like button.
  • action – the verb to display on the button. Options: ‘like’, ‘recommend’
  • font – the font to display in the button. Options: ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, ‘verdana’
  • colorscheme – the color scheme for the like button. Options: ‘light’, ‘dark’
  • ref – a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:
    • fb_ref – the ref parameter
    • fb_source – the stream type (‘home’, ‘profile’, ‘search’, ‘ticker’, ‘tickerdialog’ or ‘other’) in which the click occurred and the story type (‘oneline’ or ‘multiline’), concatenated with an underscore.

Next you’ll add this java-script along side the others we just added:

and in the end update your html markup with these lines which will enable XFBML in the earlier versions of ie browsers:

The Final Count Down Begins

So approached this far and now the buttons and the like box are in there places waiting for some css tweaks? well lets give them some basic horizontal layout which will be enough for now to end this tutorial successfully. Copy this HTML Code to your desired place and tweak if something goes fishy with the margins:

And the results will be something like:

Add Social Bookmarking Icons to your website or blog article

Add Social Bookmarking Icons to your website or blog article



To add pintrest social icon add this along side your rest of social toolbars:

Make sure you change all [fields] to add your desired URL/Logo/Desc. To make it work with your wordpress blog, use <?php the_permalink(); ?>  for URL.

For logo use this code-snippet:

and description will be: <?php the_excerpt(); ?>

You can change the look and feel of Pinterest pin button by changing the value of count-layout:

  • Horizontal count: horizontal
  • Vertical vertical count: verticle
  • No count: none

To finish add this Java-script code just before the closing body tag </body>

You can as many Pinterest buttons as you want but you’ll need the Java-script only Once!


Pinterest Follow Me

Make sure you update your profile link after pasting it to your blog with some style adjusting.