Networking Buttons / Social Media Icons: Blogging Tip # 4

I had been wanting to have some of those cute little networking buttons on my blog, but always thought it probably needed some HTML coding.  Or I thought may be if I bought a domain I could add them.

Since I had no intentions of buying a .com domain for Spusht anytime soon or ever in the future (because Alok said he cannot buy the entire Spusht Technologies businesses located in UAE & India just for my hobby :P), I dropped the idea of adding the social networking icons.

In a few months I realized how simple adding the social media icons to blog was.  How adding icons did not need any kind of advanced coding knowledge.  And how all these months I missed out on having readers easily connect with me.  One year, precisely.

It is so much better to have the small icons at the top of page instead of a long list or big boxes for social media on the side bars.  All that clutter and mess on the blog, no good.

So here it goes - how to add social media icons to your blog/website - making it as simple as I can for those of you who want to add these to your site.
(right click images and open in new window to view full size)

Step 1:  Search for social media icons or social networking buttons on Google Images and choose what you like.

Step 2:  If the images are separate, great.  Otherwise using MS Paint, MS Office Picture Manager, Adobe Photoshop, or any other software you're comfortable with - crop each image, save as separate files in .png format.  Yes, NOT the usual .jpg format.  Name each image as what it is [eg. facebook icon named as facebook or fb] because it will help you later in Step 5.  Reduce the size to as little icon as you want.  I feel 1 cm x 1 cm is perfect.

Step 3:  Create a new post on your Blogger.  Upload all the images at once onto your post.  Now click on "HTML" and look for the addresses for each .png image.  Let's call it IMAGE URL.  Copy each of them, go back to "Compose", and paste the IMAGE URLs below the images on your post.  If you're on any other publishing platform, upload your images on a new post or somewhere online to extract the link leading to the image.

Step 4:  Now go to your pages (for Twitter / Facebook / Pinterest / RSS / E-mail Subscription / Instagram / LinkedIn, etc etc etc) and copy the links that lead to your page [let's call them TARGET LINK] and paste below the images in your post.  Like so.

Step 5:  This is basically the equation for each of your media icon that you add on your blog/website:
<a href ="TARGET LINK" target="_blank"><img src="IMAGE URL"></a>

- Since you already saved each image as its media name [Step 2],
- and since you already sorted out each TARGET LINK and its IMAGE URL [Step 3 & 4],
- now all you have to do is copy paste each TARGET LINK & IMAGE URL into the equation, separately.  Like so.


Step 6:  In your Blogger Layout, click 'Add a Gadget' where you want to place your icons and choose HTML/JavaScript (to add third-party functionality or other code to your blog).  Copy-paste your code in the order of icons you want appearing.  Click Save.  Click Save arrangement.  Check out the cute little icons on your blog now.

And then come back to check my social media buttons.  And then click on each icon.

Like my Facebook page.  Stalk me on Twitter.  Subscribe to my RSS feeds.  Follow my Pinterest boards.  Sign up for e-mail updates.

And share all of them with all your friends and tell them to do all of the above.

Just kidding.


More Blogging Tips:                                                                                                
Blogging Tip # 3: How to set your RSS feed
                                                                                                                                         

If this post helped you and if you will apply this blogging tip in future on your blog - leave me a comment to tell me about it (it will make me feel proud to know this post was worth my time).  If you find this tip and this blog useful - share the link with people in your network to let them know too (it will make me happy!).
. . . . . . . . . . . . . . . . . . . . . . . .
Connect with Spusht via: Facebook  |  Email  |  RSS  |  Twitter

11 comments:

  1. wow this is amazing. i would try this
    thanks for this amazing tip

    ReplyDelete
  2. hi there.. i am not active on twitter .. and not so active on pinterest..
    so i have used the button from sharethis.com.. that lets me display a choice of buttons to diplay underthe post.. this is for sharing...
    for facebook i put up a separate code.. pinterest i am yet to do..
    i am too lazy to do this procedure... will remember that u had posted this in case i get myself to do something in this regard..thanq

    ReplyDelete
    Replies
    1. renu i am goin to try this on my test blog where i do all sorts of experiments

      even i have also used easy share this thing but wud really love to try this one

      if i get it right i wud put it on my current blog

      Delete
    2. Hey Renu, I'm not active on those either, but if readers would like to connect through their preferred media, this gives them an option.
      I prefer having small icons right on top in an obvious location than use up space with larger ones around, that's why I prefer this method. One day when you don't feel lazy, try this :D

      Delete
  3. Social media marketing activity has a lot of 'unmeasurable' benefits to businesses that use it for example many will claim it is through using social media as part of marketing

    ReplyDelete
  4. Very useful post Nisha, even I have not added all of these buttons..

    ReplyDelete
  5. your tutorial worked fantastic... have implemented it in my blog... Thank you so much... :)

    ReplyDelete
  6. Hi Nisha, I found a very simple way of adding these buttons.. do check out www.addthis.com. While I found the info on this post very useful, I thought I should let u know of a simpler way..

    ReplyDelete
  7. Hey Nisha,
    Mom (Anjana) had asked me to add these buttons to her blog a long while ago and had sent me your link, and finally got around to doing it today - and I must say you've put it down VERY well. GREAT job!

    ReplyDelete
  8. Hey Nisha.. used your tips and added some links to my blog... worked like a charm! Thanks :)

    ReplyDelete

Note: Only a member of this blog may post a comment.