5.24.2012

How to install social media icons

Now that I'm providing free social media icons at The Latest Find, I've put together some tips/tricks on how to install the icons onto your blog. My instructions will be Blogger based since that's what I use, but if you don't use blogger, google "Adding social media icons in Wordpress" or whatever your blog host is. You can find lots of tutorials and instructions for adding buttons and codes to your blog on Google for Blogger, Wordpress, etc.

To use The Latest Find free social media icon buttons...There's a few ways.

Each button contains the HTML code for the image only. These will each need to be linked to your social media sites. Don't worry it's not too hard!

Option 1:
 I've put together a small Blogger tutorial for you with pics, just click HERE and scroll to the bottom!

Option 2:
Look at this particular Facebook button code...

 <a href="http://s820.photobucket.com/albums/zz125/CreatedbyAshley/?action=view&amp;current=AquaGrayIconFacebook2.jpg" target="_blank"><img alt="AquaGrayIconFacebook2" border="0" src="http://i820.photobucket.com/albums/zz125/CreatedbyAshley/AquaGrayIconFacebook2.jpg" /></a>

Notice that this button code has 2 URLS in it...or two spots that start with http. The first URL is in the first set of < > brackets (in bold below). 

<a href="http://s820.photobucket.com/albums/zz125/CreatedbyAshley/?action=view&amp;current=AquaGrayIconFacebook2.jpg" target="_blank"><img alt="AquaGrayIconFacebook2" border="0" src="http://i820.photobucket.com/albums/zz125/CreatedbyAshley/AquaGrayIconFacebook2.jpg" /></a>

That first URL is the destination that you will be taken to if you click on the button.  So...if you replace that first URL with your Facebook page URL, then when  you click on the button, it will go to your Facebook page!
So I'm going to copy and paste that same code again, but this time I'm going to replace the first URL with my facebook page URL. I'm only going to take out what's inside the quotation marks, and then paste in the URL for my facebook page.  Make sure to leave the quotation marks intact.

 <a href="https://www.facebook.com/pages/The-Latest-Find/319914628067260?ref=tn_tnmn"_blank"><img alt="AquaGrayIconFacebook2" border="0" src="http://i820.photobucket.com/albums/zz125/CreatedbyAshley/AquaGrayIconFacebook2.jpg" /></a>

I left the entire code the same, except for what was between that first set of quotation marks. 

The second URL in the code (inside the last set of quotation marks) needs to remain intact.  That is the link to the picture of the button.
Then, from your layout in blogger, "add a gadget" where you want your buttons to go. Choose the HTML option, and copy and paste your code that you added your Facebook page URL to.
  If you have other codes to add as well, just paste them back to back in the same window, with no spaces or anything in between. After you've added your codes, click Save.
If you get confused about which social media site the particular code is for...notice that the code has "AquaGrayIconFacebook" in it twice.  That's the file name of the image. Just look at what that says, it will say which social media icon it is. I named each one for which site it's for.  For BlogLovin' I abbreviated with BL.

Option 3:
If you know how to add an image to your blog, the 2nd URL in each icon code will take you to the image. Just copy and paste the second URL code to go to that web page. From there you can right-click to save the image to your computer. Or when adding a picture through "add a gadget" it gives the option to add an image from the web.  The 2nd URL in each of these icon codes is the URL you will insert into "add image from the web Paste an image URL below" (which is under Add a gadget and then Picture).


I apologize if these instructions are hard to understand or not too clear! I learned most everything I know about HTML and how to add it to your site by Googling the topic. There's lots out there to help you!


To see current free icons available, click HERE and HERE!

3 comments:

  1. I am you newest follower!! I am excited about all the new bloggy tips!
    Love on a Budget

    ReplyDelete
  2. Thanks so much for the icons! And... your explanation of what the URL's in the coding are for not only helped me install the icons, but do some other blog stuff that I have been getting so frustrated with! Thank You!!!! (btw - I don't know if it is just me - but the small golden yellow pinterest image had an error pop up) Thanks again :)

    ReplyDelete
  3. This was such a nice tutorial, so helpful I can not describe how thankful I am!!!
    http://futurereflectionsk.blogspot.com/

    ReplyDelete

We're so appreciative of your comments! Thanks so much for visiting!

Connect

AppFacebook AppTwitter-1 AppPinterest-1 AppRSS AppGoogleplus AppBloglovin

Add to Google
bloglovin