Thursday, March 8, 2012

How To Add Social Media Badges To Your Blog

Last weekend I spent some time cleaning up my blog and adding Social Badges instead of having an individual widget for each form of social media. Adding badges has Pros and Cons compared to the widgets that Twitter and Facebook offer. Using the ones that Twitter and Facebook have are beneficial if your readers are clicking on their Follow and Like Buttons but if you haven't had any hits from those it might not be a bad idea to free up some prime viewing space on your blog and simplify things.


The key to Social Badges is to keep them uniform in size meaning: DO use the same size images; Example 38 x 38 pixels for each image instead of 38 x 38 pixels for one image and 68 x 68 for another image.
Keeping your images all the same size will make this a lot easier and make your icons fall in line with one another instead of having crazy spacing.

STEP ONE
First head over to Icon Pedia and search for some icons that your looking for whether it be for Twitter, Facebook, Google Plus, or Email just fill out the search terms and make sure you select FREE for the license type. Once you find an image you like select the size and save to your computer.

STEP TWO
Once you have found the badges you want head over to Photobucket and create a account if you don't already have one. Photobucket is completely free and makes adding the badges much easier because once uploaded it generates an HTML code for you to use! Once you get the image you want to use uploaded go to that images page on Photobucket and under LINKS copy the HTML CODE it should look something like this:

<a href="http://s1247.photobucket.com/albums/gg621/BeautyFlawed/?action=view&amp;current=Twitter-48.png" target="_blank"><img src="http://i1247.photobucket.com/albums/gg621/BeautyFlawed/Twitter-48.png" border="0" alt="Photobucket"></a>

The highlighted portion is what were going to replace so that this image will link to your social media account. *Do not edit the <img> part of the tag otherwise your image will not display properly.*

To install this code on a Blogger Platform go to your Dashboard then to Design then click on Add Gadget in the column you want your badges to appear then select the HTML/JAVASCRIPT Gadget. I recommend putting them at the top of one of your columns. Label it however you like a Follow Me works fine or leave it blank.

The code you end up with should look something like this but with your link of course.

<a href="http://www.Twitter.com/BeautyFlawed" target="_blank"><img src="http://i1247.photobucket.com/albums/gg621/BeautyFlawed/Twitter-48.png" border="0" alt="Photobucket"></a>

Using this code will get you this image result, that will take you to my twitter account:


Photobucket


If your linking the image to an email your code should look like this:

<a href="mailto:beautyflawed@gmail.com?subject=Blog Inquiry" target="_blank">
<img src="http://i1247.photobucket.com/albums/gg621/BeautyFlawed/Open-Email-48.png" border="0" alt="Photobucket" /></a>

Replace the highlighted portion with your email and what subject you would like to show up on the email. Using this code will get you this image and my email:

Photobucket


Repeat this process for each form of Social Media you use for your page. The codes for each of these should all go in the same gadget so they will all be together and not in separate sections. You can also use alignment codes in this gadget so if you want it left, right, or centered you can do that too!

I did end up making the Beautylish button because I couldn't find one that was the correct size so if you guys need help making badges let me know but keep in mind my Photoshop skill are basic! I also added my Pinterest and Bloglovin links to the same follow me section just to help keep everything clean looking. Those codes were both generated by the respective website.

If you need any help adding badges to your blog feel free to leave me a comment of shoot me an email!

What do you think of Social Media Badges??
SHARE:

14 comments

  1. I love social media badges! My personal blog, adorability.org, has a whole ton at the top haha I keep adding on.

    I also had to create some Beautylish badges since they didn't have any to use...if you're interested, they're here: http://beauty.adorability.org/?p=950

    ReplyDelete
  2. totally helpful! thanks!
    xo
    http://stylegod7.blogspot.com

    ReplyDelete
  3. Great post,it is very helpful! One of these days soon Im going to re vamp some Badges!

    ReplyDelete
    Replies
    1. Let me know if you need any help :)

      Delete
  4. This is very helpful...I've got social media buttons on my blog that were done by my web designer...but I'm not sure if they're effective because they're on the right sidebar.

    ReplyDelete
  5. Great post!! I love using social media badges.

    xo,
    Angela
    headtotoechic.blogspot.com

    ReplyDelete
  6. Thanks for this! I think my blog is looking a bit cluttered so this will help tidy it up. x

    ReplyDelete
  7. Nice post! i like this! Been meaning to do this but never had the time to edit my blog =P

    xoxo HitomiNeko xoxo
    http://hitomineko-hn.blogspot.com

    ReplyDelete

Thanks for taking the time to stop by and comment on my blog, I try to get back to comments as quickly as possible but if you need an immediate response please email me or tweet me on Twitter.

• Comment Moderation is ON, your comments will appear shortly. •

© Beauty Flawed | All rights reserved.
Blogger Template Created by pipdig