Monday, March 05, 2012

How to add customized social media buttons to your blog

Hello!  Today's post is mostly for my fellow bloggers (sorry non-blogging readers!).  I'll be back tomorrow with updates on our den remodel project.  Contractors are here and ready to roll (yikes!).

So..........I'm going out on a limb here.  I recently learned how to add customized social media buttons to my blog. These guys here:




And I know that most of you fellow bloggers already know how to do this (and know how to do it better than me), but when I was trying to figure it out, well,  I'm afraid to say it took me a little longer than I wanted it to.

So on the off chance that there is one of you bloggers out there that is like me (not inherently tech savvy),  I thought that I would share with you how I managed to add these buttons to my blog.  These instructions work if you are using Blogger.  I don't know how WordPress works.


  1. Select an image for each of the social media outlets that you want to connect to (I chose RSS, Facebook, and Pinterest).   There are a number of websites that offer free social media buttons for you to use. A Google search for "free social media icons" will turn up a bunch. IconFinder.com has thousands of icons to choose from.  Make sure you read the terms of the license.  Many of the images are free for personal and commercial use, but some are not. You can also create your own images if you're extra savvy.
  2. Once you've chosen your "license-friendly"images, download them to your computer.
  3. Next you need to upload them to an online photo sharing website.  For simplicity, I used Google's Picasa.  
  4. Once the images are successfully uploaded to Picasa (or another online photo sharing site you choose to use) keep Picasa open and launch your blog in another window.  
  5. From your blog, go to Design>Layout and click "Add a Gadget" where you want to insert the social media buttons.  Select the HTML/JavaScript Gadget.
  6. Next are instructions to add the HTML code for RSS, Facebook, and Pinterest.  I don't have a Twitter account, but I'm sure you could easily add a Twitter button using the same format.
  7. Copy and paste the following code into the HMTL/JavaScript gadget:  <a href="ENTER YOUR FEEDBURNER URL HERE" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="ENTER YOUR RSS IMAGE ADDRESS HERE" alt="" style="border:0"/></a> <a href="ENTER YOUR FACEBOOK URL HERE"><img src="ENTER YOUR FACEBOOK IMAGE ADDRESS HERE" /></a> <a href="ENTER YOUR  PINTEREST URL HERE"><img src="ENTER YOUR PINTEREST IMAGE ADDRESS HERE" width="61" height="61" alt="Follow Me on Pinterest" /</a>
  8. Replace the pink text with your own information. If you don't know your Feedburner address, it should be something like http://feeds.feedburner.com/NAMEOFYOURBLOG.  You can find the addresses for the images that you uploaded to Picasa by right-clicking on the images and selecting "Copy Image Address".  For the Pinterest icon, I used one that Pinterest has on their website.  Login to Pinterest and on the menu bar select About>Pin It Button.   There are a few options to choose from.  Select the one you want, and right click on the image to get the image address.  Note: in the HTML code you will notice width="61" and height="61" after the Pinterest image address.  These settings worked well for my blog, but you can customize the size.  Rule of thumb is that 100 pixels ("100") is about 1 inch.
  9. Once you've finished editing the HTML, you can add a title that you want to appear above the social media buttons.  I chose "Keep In Touch."  
  10. Click Save and there you have it.  The social media buttons should now appear on your blog.  Click on the buttons to make sure the links work correctly.
This is my first time giving any instructions related to anything "HTMLy" or "Techy" so if it doesn't make sense, or something doesn't work, let me know and I'll try to fix it!

No comments:

Post a Comment

Question or Comment? Leave it here. I love hearing from you!

Related Posts Plugin for WordPress, Blogger...