Poofy Cheeks

Cut Files for Silhouette Cameo and Cricut Machines

  • Silhouette & Cricut
    • Cut File Library
    • Project Ideas
    • Membership Site
    • Cheapest Supplies
  • Recipes
  • Crafts
    • Crafts
    • Parties
    • Printables
  • Home DIY
    • All Home DIY
    • Our Home
  • Contact Me
  • Shops
    • Cut File Membership
    • Cut File + Mockup Shop
    • Vanadey Bride
    • TShirt Shop
  • Blog
You are here: Home / Uncategorized / Blog School: HTML Code Tutorial for Social Media Icons

Blog School: HTML Code Tutorial for Social Media Icons

08/07/13 | Uncategorized

**This post contains affiliate links to products I use and recommend. I may recieve a small commission, at no cost to you, if you make a purchase through a link.**

Yesterday I shared 9 FREE Social Media Icon Sets and today I am sharing how to create the HTML code to go along with them. It might seem hard but I am going to break it down to make it as easy as possible. Once you have your social media icon images picked out you will need to upload them to a place on the web such as Photo Bucket or Picasa and plug the image code and URL links in. Ready? HTML Tutorial for adding Social Media Icons to your blog

Please remember that if you have any questions along the way I am more than happy to answer them for you! You can leave them in the comments section at the bottom of this post or hop on over to the Blog School Facebook Group and ask there! As a side note I am doing this tutorial based on a user with a Blogger blog and this isn’t very hard but when you do it for the first time it can be a bit time consuming. If you want to follow along then open up notepad. (Start>Accessories>Notepad) Use notepad rather than Word because it doesn’t auto correct to mess up your code. There are three things you need to create your customized code – direct image links to the icons you want to use, the URLs to your social media accounts and the basic code I am giving you. In the gray box below is the example code for your social media links – you need to change http://www.facebook.com/YourPageHere to your own facebook page URL and the direct image link where it says directimagelinkhere.jpg to the facebook icon image link. You will do the same thing for your twitter, google+, pinterest, instagram and blog lovin’ accounts. Go ahead and copy and paste the line below into Notepad.

<a href=”http://www.facebook.com/YourPageHere”><img src=”directimagelinkhere.jpg” /></a>

Now that you have the base code we need to find out what your image links and social media URLs are so we can plug them in. Step #1: Save the images you want to use to your computer if you haven’t already done so. If you are using my FREE icons then you can pick the images you need for each platform. For this tutorial I am going to use the aqua watercolor icons to create buttons for my Facebook and email. Below is a screenshot from my icons in Google Docs. At the end of the file name it shows which social media platform the image is for. To the right of the file name there is a little arrow you click and then pick download. You will get a message asking if you want to open or save – click on save. HTML Tutorial for adding Social Media Icons to your blog 2. When you save the image(s) PLEASE for the love of Christmas save it somewhere you will remember! I don’t know how many times I have had people who can’t seem to figure this out because they don’t remember where they saved their images. Take note of where you are saving and press ‘save’ HTML Tutorial for adding Social Media Icons to your blog 3. Now you want to upload your images to the web. I am going to use Photo Bucket for this but if you have a place of preference then please use what you are familiar with! (Please tell me you still remember where you saved them!) HTML Tutorial for adding Social Media Icons to your blog 4. Once you upload your image(s) you need to get the direct link to your uploaded image. In Photo Bucket if you click on the image four links come up on the right sidebar. Copy the code in the direct box (where the arrow is pointing). Now I have my direct image link for facebook so I can plug that in on Notepad where it says directimagelinkhere.jpg . HTML Tutorial for adding Social Media Icons to your blog 5. Okay now that we know where to find your image codes you also need to know all of the URLs for the platforms you want to link to. You can see my facebook page URL below. (I like to open a new tab for all of my social media accounts when I am writing this code so I can quickly copy/paste everything.) Plug your URL into notepad where it says http://www.facebook.com/YourPageHere HTML Tutorial for adding Social Media Icons to your blog 6. Repeat steps 4 and 5 for all of the social media platforms you want buttons for EXCEPT for your email. For your email copy and paste the code in the gray box below. Instead of adding a URL you want to put your email address, so for me mailto:youremail@gmail.com would be mailto:kelsalexandra@hotmail.com . (However adding the direct image link to your email icon will still be the same.)

<a href=”mailto:youremailhere@gmal.com”><img src=”directimagelinkhere.jpg” /></a>

7. Now that you have the code part down we need to add it to your blog. Open up Blogger and go to Layout. Then click on Add Gadget. When the different gadgets pop up choose HTML/JavaScript. HTML Tutorial for adding Social Media Icons to your blog 8. This window will pop up and you want to copy all of the code from Notepad and paste it into the content section and press save. You might want to arrange your new gadget to a different place on your sidebar but now is the moment of truth when you go to your blog homepage and see if everything looks right! HTML Tutorial for adding Social Media Icons to your blog My final code looks like this when I plug in my URLs and direct image codes –

<a href=”http://www.facebook.com/PoofyCheeksBlog”><img src=”http://i1328.photobucket.com/albums/w533/lifeinour20s/aqua_paint_facebook_zpsa2f1ba7a.png” /></a> <a href=”mailto:kelsalexandra@hotmail.com”><img src=”http://i1328.photobucket.com/albums/w533/lifeinour20s/aqua_paint_email_zps88300b22.png” /></a>

When copy/pasted into the HTML/JavaScript widget it will look and work like this-   If your buttons don’t look right or work correctly and you are not sure why then please do not hesitate to ask me! I would be more than happy to look over your code! If you are still like WHA!? this is not in English then stop by the Blog School Facebook  roup and see if myself or another member of the group can work with you to figure it out! ot tnaw uoy fI Enjoy,
Follow Poofy Cheeks on InstagramFollow Poofy Cheeks on TwitterFollow Poofy Cheeks on PinterestFollow Poofy Cheeks on Facebook I party HERE

Comments | 16 comments

About Kelsey

Kelsey is a wife and mom of four living in Central Florida. She shares recipes, crafts, DIY tutorials and so much more. Her passion is creating with her Silhouette and Cricut machines and sharing free cut files.

« Back to Blog School: 9 Free Social Media Icon Sets
Teacher ‘Thank You’ Back to School Printable »

Comments

  1. Frank Robinson says

    02/16/2016 at 11:07 am

    Hello, great article, besides if you don't have enough of time to create some icons by your own you can just download them on http://www.cannypic.com/ you can find there a lot of great stock photos, images and icons for your website or blog.

    Reply
  2. anna says

    11/07/2014 at 7:29 am

    Hello!
    Whenever I click on my social media icon, it just adds the social media link to my blog website like this…

    http://theadertons.blogspot.com/"https://www.facebook.com/anna.aderton&quot;

    any ideas?

    Reply
  3. Marie says

    11/06/2014 at 6:31 pm

    Hi Kelsey,

    Thank you for this easy tutorial! Is there a way to change the size of the icons?

    Reply
  4. Arti Arte says

    10/02/2014 at 10:31 am

    do you have a social icon for tumblr

    Reply
  5. Ickynicks J says

    09/01/2014 at 6:49 pm

    Thank you so much! I have attempted to type in the HTML code several times into the blogger gadget, however I knew something was wrong because it would not work. I read several other blogs and I had no luck. After reading yours and doing it a third time, it worked!

    Reply
    • poofycheeks says

      09/03/2014 at 3:29 pm

      So glad it helped!! 🙂

      Reply
  6. Bethany Anne says

    04/09/2014 at 7:30 am

    I can't figure out what to put in to find the pinterest image on my computer
    I understand the first portion…

    a href"
    http://www.pinterest.com/diehlbeth82/"&gt;
    img src
    "directimagelinkhere.jpg"

    but what should I write here? ="directimagelinkhere.jpg" /></a

    Reply
    • poofycheeks says

      04/11/2014 at 1:23 am

      Hey Bethany! This would be the link to your image from wherever you uploaded it (In the example here I uploaded mine to photobucket and put the image code photobucket gave me there). See the image under step #4. Let me know if that helps or not!!

      Reply
  7. Matt says

    02/25/2014 at 8:00 pm

    Kelsey – I followed all of your steps and still can't get it to work. I can email my code if needed.

    Reply
  8. Nanachi Younge says

    02/09/2014 at 5:57 pm

    hi, thank you for this. for some reason the icons when published are like so close together and when i click on each one the all go to Facebook, how do i fix that please

    Reply
  9. Francesca says

    02/06/2014 at 9:38 am

    Hi Kelsey, thank you for making your icons available, and for this tutorial! I've finally managed to add them to my blog, though I'm somehow getting a gray frame around them, which is making them far too big for my sidebar. Hopefully, I'll be able to figure out how to remove it …
    Any chance that you'll consider making a Flickr icon too? 🙂
    Thanks again!
    http://www.fuoriborgo.com/fuoriborgo/

    Reply
  10. Laura Tucker says

    02/02/2014 at 6:27 am

    Hi Kelsey!
    Thank you so much for this entry. I used it to add your black icons to my photography website at http://www.lauratuckerphotography.com
    I am very happy with how they turned out. It was my first time with html and you helped me learn a few things!

    Reply
  11. Power, Love, and Self Discipline says

    11/15/2013 at 6:54 pm

    Oh my goodness, thank you so much!!! I just started blogging last week and this is all so new to me. And usually when you follow tutorials, they always seem to assume I have more knowledge than I actually do so I wasn't holding out much hope that I'd be able to do this on my own. But it worked! Thank you, thank you, thank you! You are a great teacher, making it so easy to follow along and getting it working on the first try with no trouble whatsoever.

    Reply
  12. ceylaroux says

    10/26/2013 at 5:35 am

    This is amazing! Thank you so much for the tips!!!

    Reply
  13. Sandra Paul says

    08/08/2013 at 2:04 am

    Thanks Kelsey! I can't wait to try this out!

    Reply
  14. ~The Bargain Babe from *Zucchini Summer Blog* says

    08/08/2013 at 12:17 am

    those are so cute!!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

New on the Blog

  • 20 Free St. Patrick’s Day Cut Files -Pot of Gold Cut File – SVG, DXF, PNG
  • Feelin’ Lucky Cut File for St. Patrick’s Day – SVG, DXF, PNG – Silhouette Cameo and Cricut
  • Confident, Kind Cut File – SVG, DXF and PNG for Silhouette and Cricut

Our ETSY Shops

Privacy Policy

Recent Posts

Lucky Pot of Gold Cut File - SVG, DXF, PNG

20 Free St. Patrick’s Day Cut Files -Pot of Gold Cut File – SVG, DXF, PNG

02/19/2021 By Kelsey 7 Comments

Feelin' Lucky Cut File - St. Patrick's Day

Feelin’ Lucky Cut File for St. Patrick’s Day – SVG, DXF, PNG – Silhouette Cameo and Cricut

02/12/2021 By Kelsey 1 Comment

Kind Cut File - Digital Design Cut File

Confident, Kind Cut File – SVG, DXF and PNG for Silhouette and Cricut

02/09/2021 By Kelsey 3 Comments

Connect With Me

Categories

Archives

Copyright © 2021 · Tasteful theme by Restored 316