Adding Social Media Buttons To Your Blog

Using social media is an an excellent way to build up your blog community, engage with like minded people or just talk rubbish with random people.

Whatever you use it for, it’s a good idea to have it linked to your blog.

This quick “how to” shows you how to do that.

First of all you need to either find, design or buy your social media icons.

A search of Google will present you with a whole bunch of options, once you have chosen those you like, you need to up load them your Photobucket account.

photobucket account

You then need this bit of html to connect your social media account, icon and blog.


<a href="SOCIAL MEDIA LINK" title="NAME OF SOCIAL MEDIA ACCOUNT">
<img src="DIRECT LINK TO SOCIAL MEDIA ICON" width="52" height="52" alt="NAME OF SOCIAL MEDIA ICON" /></a>

What you need to replace ~

SOCIAL MEDIA LINK replace with the url of your social media account i.e https://twitter.com/girlgonecoastal

NAME OF SOCIAL MEDIA ACCOUNT replace with the name of the social media you are linking to i.e Twitter

DIRECT LINK TO SOCIAL MEDIA ICON replace with the direct link for the image you want to link to, you will find this in your Photobucket account

copying direct link for blog button

You can adjust the height and width of your icons by amending these figures.

NAME OF SOCIAL MEDIA ICON replace with the name of the social media account icon i.e Twitter icon

It will end up looking something like this, but with your info, not mine!

social media icon code in notepad

You will want to repeat this process for each social media account you wish to add to your blog.

Once you have them all you need to add the html to your blog.

From your dashboard, use the drop down menu to enter the Layout screen, chose an Add Gadget tab.

html gadget

Copy the entire code you created in Notepad, and paste it in to the pop up box provided. You can play around with the arrangement of the icons, once you are happy with it, hit Save.

It’s perfectly fine to have all the icons in one Gadget tab.

social media icons html and rich text

If you followed all the steps correctly you should now have your social media accounts linked to your blog, if you have any problems let me know and I will help where I can!

12 comments :

  1. OH Oh Oh!!! So now you do it!!....It took me HOURS to figure this out dude!!


    Loves you still xx

    ReplyDelete
  2. Oh thank you!! I could not for the life of me figure out how to do this!

    ReplyDelete
    Replies
    1. You're welcome, one of those things that once you figure it out, you'll want to change the icons all the time!

      Delete
  3. Thank you! I needed this, badly! You are very good at explaining things to people that don't have a clue! (ME) :)

    ReplyDelete
    Replies
    1. Oh thank you! I always write these as I want to read them, and yep I use my own tutorials if I need a reminder!

      Delete
  4. how do you do the email one? like where do you type in your email address and stuff?

    thanks
    annie
    acollegeconfession.blogspot.com

    ReplyDelete
    Replies
    1. Hi Annie,

      I've tweeted you a link to blog post that tells you how to do it, any problems let me know and I'll try to help!

      Delete
    2. Can i also get that link? i was just wondering how to do the email. :)

      Delete
  5. I followed your instructions, but when I try to hit save on the gadget pop up box, it won't do anything. I've tried multiple html codes also. They won't work even when I follow all the instructions. I've even downloaded multiple different icons. What could I be doing wrong?
    Thanks for the help! :)

    ReplyDelete
    Replies
    1. Hi Brooke,

      Could you let me have an email address and we can try and figure out what's going wrong! I'm sure it's something simple or a blogger glitch which sometimes pops up!

      Delete
  6. hey do you know where I can find side button that stay firmly to put Leakey facebook page because everything else is too heavy and I do not load my page :) I have messed with all the code html

    ReplyDelete

Thank's for taking the time to read and comment, I appreciate each one!

09 10