14 May 2015

FREE Social Media Icons for Your Blog (you're welcome)

Free Social Media Buttons for your Blog

A few years ago I put together a collection of social media icons in various different styles and turned them into Code for people to grab and use.
Considering how common these little puppies are they can be surprisingly difficult to find in an easy-to-use form.

I remember spending hours - days - weeks - hunting for a simple way to add social media buttons to my blog and although I found plenty of actual icons, nowhere could I find a simple way to install them (I'm not on Wordpress, I don't have access to Plug-ins).

Eventually I stumbled across some code, figured out how to make it work, and created that original post with the grabable code for collections of social media icons. My pain, your gain.

Today I'm adding a bunch of new styles to the collection, to help all you lovely code-phobic bloggers out there beautify your blog without busting a brain cell.

These buttons have been *mostly* created by me in Photoshop (with the exception of the Sleek Collection - the style is originally by DesignBolts but I made two different versions of them and turned them into code for easy installation).

TO USE:
  • Choose your style. Select and copy the code you want (control+c) then paste (control+v) into a Word document. Save.
  • Replace the coloured text with your own social media details. Save. (If there are some Social Media Platforms you don't use, move the code for those buttons to the bottom of the page and keep for later, just in case).
  • Copy the new personalised code (control+c) and paste into an html gadget in your sidebar. Save.
  • Done!
TWEAKING:
  • If you want to resize the buttons, change the number value e.g. width="45"; Increase size by increasing the number e.g.  width="55"; reduce the size by reducing the number e.g. width="35"
  • To push a button onto the next line, insert a "break" e.g. <br/> before its code.


Social Media Button Collections

Free Social Media Buttons - round green

<a href="https://www.facebook.com/YOURFBPAGE"><img style="border: 0pt none ;" title="Facebook" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/icons%20green%20clear%20FB.png" width="60" /></a>
<a href="https://twitter.com/YOURTWITTER"><img style="border: 0pt none ;" title="Twitter" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/icons%20green%20clear%20Twitter.png" width="60" /></a>
<a href="http://www.bloglovin.com/en/blog/YOURBLOGLOVIN"><img style="border: 0pt none ;" title="Bloglovin" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/icons%20green%20clear%20bloglovin.png" width="60" /></a>
<a href="http://YOURBLOGURL/feeds/posts/default"><img style="border: 0pt none ;" title="RSS Feed" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/icons%20green%20clear%20RSS.png" width="60" /></a> 
<a href="http://pinterest.com/YOURPINTEREST/"><img style="border: 0pt none ;" title="Pinterest" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/icons%20green%20clear%20Pinterest.png" width="60" /></a>
<a href="http://instagram.com/YOURINSTAGRAM"><img style="border: 0pt none ;" title="Instagram" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/icons%20green%20clear%20insta.png" width="60" />
<a href="https://plus.google.com/YOURGOOGLE+/posts"><img style="border: 0pt none ;" title="Google+" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/icons%20green%20clear%20G.png" width="60" /></a>
</a>
<a href="mailto:YOUREMAIL" ><img style="border: 0pt none ;" title="Email" alt="" 
src=" http://i788.photobucket.com/albums/yy162/donnasimone/icons%20green%20clear%20email.png" width="60" /></a>

Free Social Media Buttons - sleek grey



<a href="https://www.facebook.com/YOURFACEBOOK"><img style="border: 0pt none ;" title="Facebook" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/Facebook_zps7e32721e.png" width="45" height="45" /></a>
<a href="http://www.twitter.com/YOURTWITTER"><img style="border: 0pt none ;" title="Twitter" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/Twitter_zps20dfaea5.png" width="45" height="45" /></a>
<a href="http://www.bloglovin.com/en/blog/YOURBLOGLOVIN"><img style="border: 0pt none ;" title="Bloglovin" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/bloglovin2_zpse569ab89.png" width="45" height="45" /></a>
<a href="http://YOURBLOG/feeds/posts/default"><img style="border: 0pt none ;" title="RSS Feed" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/RSS_zpsc1c92771.png" width="45" height="45" /></a>
<a href="http://pinterest.com/YOURPINTEREST/"><img style="border: 0pt none ;" title="Pinterest" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/Pinterest_zpsf8bc7d2e.png" width="45" height="45" /></a>
<a href="http://instagram.com/YOURINSTAGRAM"><img style="border: 0pt none ;" title="Instagram" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/Instagram_zps72a97848.png" width="45" height="45" />
<a href="https://plus.google.com/YOURGOOGLEPLUS/"><img style="border: 0pt none ;" title="Google+" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/Google_zps0426233b.png" width="45" height="45" /></a>
</a>
<a href="mailto:YOUREMAIL" ><img style="border: 0pt none ;" title="Email" alt="" 
src="http://i788.photobucket.com/albums/yy162/donnasimone/email_zps6bcaf5c5.png" width="45" height="45" /></a>


Free Social Media Buttons - sleek outline



<a href="https://www.facebook.com/YOURFACEBOOK"><img style="border: 0pt none ;" title="Facebook" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekBlackoutlinefacebook_zps673e6eb6.png" width="45" height="45" /></a>
<a href="http://www.twitter.com/YOURTWITTER"><img style="border: 0pt none ;" title="Twitter" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekBlackoutlinetwitter_zpsecd2f7aa.png" width="45" height="45" /></a>
<a href="http://www.bloglovin.com/en/blog/YOURBLOGLOVIN"><img style="border: 0pt none ;" title="Bloglovin" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekBlackoutlinepng_zps8f27fcd0.png" width="45" height="45" /></a>
<a href="http://YOURBLOG/feeds/posts/default"><img style="border: 0pt none ;" title="RSS Feed" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekBlackRSS_zpsdad050bd.png" width="45" height="45" /></a>
<a href="http://pinterest.com/YOURPINTEREST/"><img style="border: 0pt none ;" title="Pinterest" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekBlackoutlinePinterest_zps6d57ce83.png" width="45" height="45" /></a>
<a href="http://instagram.com/YOURINSTAGRAM"><img style="border: 0pt none ;" title="Instagram" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekBlackoutlineInstagram_zps6eed8bbb.png" width="45" height="45" />
<a href="https://plus.google.com/YOURGOOGLEPLUS/"><img style="border: 0pt none ;" title="Google+" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekBlackoutlineG_zps28fafb38.png" width="45" height="45" /></a>
</a>
<a href="mailto:YOUREMAIL" ><img style="border: 0pt none ;" title="Email" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekBlackoutlineemail_zps463b8b79.png" width="45" height="45" /></a>


Free Social Media Buttons - sleek red



<a href="https://www.facebook.com/YOURFACEBOOK"><img style="border: 0pt none ;" title="Facebook" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekRedfacebook_zpsff2e65a6.png" width="45" height="45" /></a>
<a href="http://www.twitter.com/YOURTWITTER"><img style="border: 0pt none ;" title="Twitter" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekRedTwitter_zps6b5d06dd.png" width="45" height="45" /></a>
<a href="http://www.bloglovin.com/en/blog/YOURBLOGLOVIN"><img style="border: 0pt none ;" title="Bloglovin" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekRedBloglovin_zps12834505.png" width="45" height="45" /></a>
<a href="http://YOURBLOG/feeds/posts/default"><img style="border: 0pt none ;" title="RSS Feed" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekRedRSS_zps46b5f39e.png" width="45" height="45" /></a>
<a href="http://pinterest.com/YOURPINTEREST/"><img style="border: 0pt none ;" title="Pinterest" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekRedPinterest_zps22bedb2e.png" width="45" height="45" /></a>
<a href="http://instagram.com/YOURINSTAGRAM"><img style="border: 0pt none ;" title="Instagram" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekRedInstagram_zps01683be9.png" width="45" height="45" />
<a href="https://plus.google.com/YOURGOOGLEPLUS/"><img style="border: 0pt none ;" title="Google+" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekRedG_zps6d18149e.png" width="45" height="45" /></a>
</a>
<a href="mailto:YOUREMAIL" ><img style="border: 0pt none ;" title="Email" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/SleekRedEmail_zpse6f017f2.png" width="45" height="45" /></a>






Free Social Media Buttons - typewriter grey



<a href="https://twitter.com/ YOURTWITTERNAME "><img style="border: 0pt none ;" title="Twitter" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewritertwittergrey_zpsb1515127.png" width="45" height="45" /></a>
<a href=" http://www.facebook.com/YOURFACEBOOKPAGE "><img style="border: 0pt none ;" title="Facebook" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/typewriterfbgrey_zps8e5933c9.png" width="45" height="45" /></a>
<a href="http://YOURBLOG/feeds/posts/default"><img style="border: 0pt none ;" title="RSS" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewriterrssgrey_zpsa7d46c7d.png" width="45" height="45" /></a>
<a href="http://pinterest.com/YOURPINTEREST"><img style="border: 0pt none ;" title="Pinterest" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewriterpinterestgrey_zps3cc80eaf.png" width="45" height="45" /></a>
<a href="YOUR GOOGLE+ page URL"><img style="border: 0pt none ;" title="G+" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewriter%20g%20grey.png" width="45" height="45" /></a>
<a href="http://instagram.com/YOURINSTAGRAM"><img style="border: 0pt none ;" title="Instagram" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewriterinstagramgrey_zps5abf35e9.png" width="45" height="45" /></a>
<a href=" http://www.bloglovin.com/en/blog/BLOGLOVIN-ID"><img style="border: 0pt none ;" title="Follow with Bloglovin" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/typewriterbloglovingrey_zps02e2db48.png" width="45" height="45" /></a>

<a href="mailto:YOUR EMAIL" ><img style="border: 0pt none ;" title="Email" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewriteremailgrey_zpse6df4ab0.png" width="45" height="45" /></a>


Free Social Media Buttons - typewriter grey and pink



<a href="http://www.twitter.com/YOURTWITTERNAME"><img style="border: 0pt none ;" title="Twitter" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewritertwitter_zpse1390073.png" width="45" height="45" /></a>
<a href="http://www.facebook.com/
YOURFACEBOOKPAGE"><img style="border: 0pt none ;" title="Facebook" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewriterfacebook_zps98c4ba69.png" width="45" height="45" /></a>
<a href="YOUR GOOGLE+ page URL"><img style="border: 0pt none ;" title="G+" alt="" 
src="http://i788.photobucket.com/albums/yy162/donnasimone/typewriterg_zps72af5a9e.png" width="45" height="45" /></a>
<a href=" http://instagram.com/YOURINSTAGRAM"><img style="border: 0pt none ;" title="Instagram" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewriterinstagram_zpscb051004.png" width="45" height="45" /></a>
<a href="http://YOURBLOG/feeds/posts/default"><img style="border: 0pt none ;" title="RSS" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewriterrss_zpsbd5ef193.png" width="45" height="45" /></a>
<a href="http://pinterest.com/YOURPINTEREST/"><img style="border: 0pt none ;" title="Pinterest" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewriterpinterest_zps4bb5b186.png" width="45" height="45" /></a>
<a href=" http://www.bloglovin.com/en/blog/ BLOGLOVIN-ID"><img style="border: 0pt none ;" title="Follow with Bloglovin" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/typewriterbloglovinpink_zps36870c04.png" width="45" height="45" /></a>
<a href="mailto:YOUREMAIL" ><img style="border: 0pt none ;" title="Email" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/typewriteremail_zps7fac0399.png" width="45" height="45" /></a>



Free Social Media Buttons - Simple black stitched

<a href="https://twitter.com/YOURTWITTERNAME"><img style="border: 0pt none ;" title="Follow on Twitter" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/roundblackbuttontwitter_zps7482ad6e.png" width="50" height="50" /></a>
<a href="https://facebook.com/FACEBOOKPAGE"><img style="border: 0pt none ;" title="Follow on Facebook" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/roundblackbuttonfacebook_zpsdc9ae951.png" width="50" height="50" /></a>
<a href="YOURBLOGADDRESS/feeds/posts/default"><img style="border: 0pt none ;" title="Subscribe by RSS" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/roundblackbuttonrss_zps979d9c8e.png" width="50" height="50" /></a>

<a href="YOURPINTEREST"><img style="border: 0pt none ;" title="Follow on Pinterest" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/roundblackbuttonpinterest_zps165bb24e.png" width="50" height="50" /></a>

<a href="YOURGOOGLEPLUS"><img style="border: 0pt none ;" title="Follow on Google+" alt="" src="phttp://i788.photobucket.com/albums/yy162/donnasimone/roundblackbuttonG_zps963b9eac.png" width="50" height="50" /></a>
<a href="YOURINSTAGRAM/"><img style="border: 0pt none ;" title="Follow on Instagram" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/roundblackbuttoninstagram_zpsf3815d5e.png" width="50" height="50" /></a>
<a href="mailto: YOUREMAIL" ><img style="border: 0pt none ;" title="Email" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/roundblackbuttonemail_zpsdb916cd8.png" width="50" height="50" /></a>
<a href=" http://www.bloglovin.com/en/blog/ BLOGLOVIN-ID"><img style="border: 0pt none ;" title="Follow with Bloglovin" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/roundblackbloglovin_zps65d49ebf.png" width="45" height="45" /></a>



Free Social Media Buttons - Black sketchy

<a href="https://www.facebook.com/YOURFBPAGE"><img style="border: 0pt none ;" title="Facebook" alt="" src="http://i788.photobucket.com/albums/yy162/donnasimone/facebook_zps2d2478b7.png" width="60" /></a>
<a href="https://twitter.com/YOURTWITTER"><img style="border: 0pt none ;" title="Twitter" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/twitter_zps83e757af.png" width="60" /></a>
<a href="http://www.bloglovin.com/en/blog/YOURBLOGLOVIN"><img style="border: 0pt none ;" title="Bloglovin" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/bloglovin_zps39d299cc.png" width="60" /></a>
<a href="http://YOURBLOGURL/feeds/posts/default"><img style="border: 0pt none ;" title="RSS Feed" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/rss_zps9c2ac676.png" width="60" /></a>
<a href="http://pinterest.com/YOURPINTEREST/"><img style="border: 0pt none ;" title="Pinterest" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/pinterest_zps932e079a.png" width="60" /></a>
<a href="http://instagram.com/YOURINSTAGRAM"><img style="border: 0pt none ;" title="Instagram" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/instagram_zps547f4226.png" width="60" />
<a href="https://plus.google.com/YOURGOOGLE+/posts"><img style="border: 0pt none ;" title="Google+" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/g_zpseb92e619.png" width="60" /></a>
</a>
<a href="mailto:YOUREMAIL" ><img style="border: 0pt none ;" title="Email" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/email_zpsbae27c73.png" width="60" /></a>

Free Social Media Buttons - Black speech bubbles
<a href="https://www.facebook.com/YOURFBPAGE"><img style="border: 0pt none ;" title="Facebook" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/speech%20bubble%20FB.png" width="60" /></a>
<a href="https://twitter.com/YOURTWITTER"><img style="border: 0pt none ;" title="Twitter" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/speech%20bubble%20twitter.png" width="60" /></a>
<a href="http://www.bloglovin.com/en/blog/YOURBLOGLOVIN"><img style="border: 0pt none ;" title="Bloglovin" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/speech%20bubble%20bloglovin.png" width="60" /></a>
<a href="http://YOURBLOGURL/feeds/posts/default"><img style="border: 0pt none ;" title="RSS Feed" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/speech%20bubble%20rss.png" width="60" /></a>
 <a href="http://pinterest.com/YOURPINTEREST/"><img style="border: 0pt none ;" title="Pinterest" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/speech%20bubble%20pinterest.png" width="60" /></a>
<a href="http://instagram.com/YOURINSTAGRAM"><img style="border: 0pt none ;" title="Instagram" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/speech%20bubble%20IG.png" width="60" />
<a href="https://plus.google.com/YOURGOOGLE+/posts"><img style="border: 0pt none ;" title="Google+" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/speech%20bubble%20G.png" width="60" /></a>
</a>
<a href="mailto:YOUREMAIL" ><img style="border: 0pt none ;" title="Email" alt="" src=" http://i788.photobucket.com/albums/yy162/donnasimone/speech%20bubble%20email.png" width="60" /></a>


................................

MORE BLOG TIPS & BUTTON FREEBIES



If you want to say "thanks" for the buttons, please would you share this post and help spread the word to other button-needy bloggers? (You can also leave me a comment so I can come visit you and see the buttons installed on your blog).


FOLLOW ME ON Facebook // Twitter // Instagram // Bloglovin //

No comments:

Post a Comment