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.
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.
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&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.*
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:
If your linking the image to an email your code should look like this:
<a href="mailto:firstname.lastname@example.org?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:
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??