Aug 31, 2011

adding social media icons to your blog- tutorial

If you read my Facebook page, then you know the struggles I've had with adding these little guys to my blog.
I am a determined do-it-myself-kinda gal, to my own detriment at times.

What I will show you today in this tutorial, is the way I figured out how to get everything to line up the way I wanted and to get those buttons linked to the places they should go to.

It's pretty simple once you figure it out, but I'm kinda slow in the technological department- so I hope- if you're like me- it will be beneficial for you.
:)

Here we go!
I am giving you instructions on lining up your icons in a horizontal pattern using Blogger platform, like you see here on PinkPostcard.

Step 1: You need icons.
If you don't have a Photobucket account, you will need one. Go sign up right now. It's fast and free.
You'll need it to insert your code for your buttons.

I had Red Pearl Designs, who has done all of my PinkPostcard logos, make up some buttons that matched the theme of my blog.  Megan does really fast and beautiful work.  If you'd like to connect with her to make some up for your blog, you can click here for her info.  If you want a more generic set of icons, you can make up your own using some freebies that I found on Linkmedic.  They have a large selection of different types of icons.

Step 2:  Adding in your icon to Photobucket.
Once you have your buttons for your social media icons (Twitter, Facebook, RSS Feed, Pinterest, whatever you want to use) you will need to upload them like you would a photo to Photobucket.  Once it is uploaded, you will need to find the "Direct Link" box under each icon you plan to use. Copy that code for the first one and open up a blank page in Word, or any other software that will allow you to cut and paste.


Step 3: Adding in the code to make your icon.
Paste the entire code from Photobucket onto your page.


Then type this code onto your page:



Where you see the red letters here, you want to add in your link.  If this is your Facebook icon you're working on, copy and paste the web address to your blog's Facebook page. 
Next, take the "Direct Link" code for your icon image (from Photobucket), and paste that in where you see the blue letters.  You need to delete the code in blue here and insert your own Photobucket code.  It should all fit between the " " .

Once you have that all squared away, you are ready to do your next one!  If you are doing a Twitter icon, you need to add in your link to your blog's Twitter account, (where it is in red) and then grab your "Direct Link code from Photobucket associated with the Twitter button.

Each social media icon will be the same as above EXCEPT for your email.  Here's how that one will look:
mailto:yourblogemail
Make sure you have the mailto: inserted before you type in your email address. The Photobucket Direct Link will still be the same, just make sure you are linking it to your "email" icon. 

Step 4: Putting it all together.
Here's where I screwed up when I did this the first time. Make sure that all of your codes are together in one grouping.  Like this:


I had mine all separated out and it caused all of my links to only go to my Facebook page!  Once you have all of your links grouped together, you will want to go to your "Design" tab at the top of your Blogger page, and then click on "Add a Gadget".


Click on "HTML / Java Script".  Then in the box marked "Content" you want to add in that grouping of code that you have so lovingly prepared.  :)

Make sure you hit "Save"!! You can then go back to your page layout and put your icons wherever you like on your blog.  I have mine at the very top of my page, so they are easy to find.  On my layout it looks like this:




There it is! Right above my "picture".

I hope this has been a clear and concise tutorial on adding social media icons.  If you have any questions, I will do my best to answer them here in the comments so that others can see as well. 
I'm no techie or expert, I've just done them recently and thought it might be helpful to some of you other newbies out there!  The Blog Guidebook was the source I used when I was making up my own icons. It's very good, but I felt like it kinda assumed I'd know some of the stuff that ended up giving me some grief!

Happy Blogging!

11 comments:

  1. oh, good to know! I have been meaning to do this forever!

    ReplyDelete
  2. yes this is helpful,I am challenged and kind of lazy to figure it out, so I haven't done it...you saved me some hair pulling I think!

    ReplyDelete
  3. Being new to the whole blogging thing, this type of tutorial is like gold. Thank you!

    ReplyDelete
  4. Thanks Denise, for this tutorial - I definitely need to do this. I just 'mobile enabled' my blogs as well - woohoo! -amy

    ReplyDelete
  5. Thank you for this - after about 6 tries I got it to work ;)

    ReplyDelete
  6. Thanks for your help. I was almost there, just a tiny tweak with closing that "a" tag, was all that was keeping me from success. I've got it now. I'm glad I found your blog, it looks like we are neighbors. I love to shop over at Aunt Bee's House.
    Thanks again!

    ReplyDelete
  7. Your instructions seem so easy, but no matter what I do, I can't make it work - Blogger keeps adding and changing my code around, SO annoying, so I'll have to try this again later... must reset my patience!!

    ReplyDelete
  8. Thank you for such a nice tutorial.It was easy and concise but can we make it open in a new window when the social icon image is clicked?

    ReplyDelete
  9. @Janak, yes, it will open to a new page! :)

    ReplyDelete
  10. Yup..I tried it on my blog with some code change and it worked...Thank You @Densie

    ReplyDelete

Thanks for taking the time to leave me a note! I will respond to what you have to say right back here, or via email so check back!