Adding Social Media Buttons to Your Website

14 May

I’m mixing directions from several different websites, but I have tried clearing it up as much as possible.  Enjoy!

Adding Social Media Buttons to Your Website via HTML Code


Although some (and other website-building site) themes have a way to automatically customize social media, quite a few actually don’t.  For my WordPress website, I used to just add the “Image” widget and link to my other accounts. But since you can’t line them up horizontally, that ended up with a long line of pictures down my sidebar.  So instead, I mixed directions from different websites, played around, and came up with the following instructions for adding a horizontal row of Social Media icons linked to your accounts.  


The first thing you need are the Social Media icons you want to use.  This just  requires that you search the internet to find a set of icons/images that you like. Save them to your computer.  

I particularly like the icons offered by Jennifer Bourn on her website “Bourn Creative.”  She offers all different styles, sizes, and colors. If you like hers, you just pick the style (Circles, Squares, Scalloped Edges, etc.) you like and download her zip file.  This file will contain all the different colors she offers.   Once you have downloaded the zip file, go up and extract all files within the folder.  Make sure you know how to find that file on your computer (usually it has downloaded to “Downloads” if you go to “My Computer”).  

Free Circle Social Media Icons in 48 Different Colors

Second, you have to upload your chosen icons to the website’s WordPress Media File.  If you haven’t ever done this before, don’t worry; it’s simple.  

  • Go to the WordPress Dashboard. 
  • Under the Media Tab, choose “Add New”

Social Media 2

  • This is going to take you to the standard “Upload Image” screen; I’m presuming you already know how to upload pictures (click “Choose File(s)” –> Pick your image –> “Okay).    It may try to have you upload them one at a time, which is tedious.  To avoid that, choose the “multi-file uploader link on the screen)

Social Media 3


  • Upload the image for each social media account you want to add.   You’re done with the Media tab for now, but leave it open because you’ll need this in a minute.

  • Now open your WP Dashboard on a new page.  Go to your “Appearance Tab” and pick “Widgets”

Social Media 4


  • Drag the “Text” widget onto your Sidebar.  This will allow you to import the HTML Code.
  • Copy and Past the following HTML Code into the Widget:

<img src=”PICTURE URL”/>

Social Media 5

  • Within the code, you will need to replace two things:
    • “SOCIAL MEDIA URL” = the hyperlink for your social media account (i.e. for Twitter ->  Basically, go  to each website and copy the url for your homepage; replace the “SOCIAL MEDIA URL” with that url.  

<a href=”“><img src=”PICTURE URL”/>

  • “PICTURE URL” = the hyperlink for the image in your media file.  
    • Go back to the Tab with your Media File where you uploaded all the images.  Open the image for the account you are working on.
    • On the Right side, you will see “File URL.”  Copy that hyperlink. (I.e. the hyperlink for my Twitter icon was×125-scallopedcircle-94-tw.png

Social Media 8

  • Go back to your widget and replace “PICTURE URL” with that File URL. 

<a href=”“><img src=”×125-scallopedcircle-94-tw.png“/></a>


  • You have officially completed one Social Media Icon.  Check out your Website and bask in your accomplishment!
  • If you want multiple icons (which most people do), you just have to repeat that process for each icon.  The only difference is that instead of making a new widget for each one, you just keep repeating the code in the same box.  I have added Facebook, Twitter, Pinterest, Youtube, RSS Feed, and Google+ icons to mine.  The finished HTML Code looks like this:

<img src=”×125-scallopedcircle-94-fb-e1400105590132.png” />


There may be a small problem with the size of your images.  The file from Bourn Creations downloads all images as 125 x 125 (or at least the ones I played with did).  Supposedly there are a bunch of different sizes, but all of them I looked at were the same size.  Since this was bigger than I wanted,  that meant I needed to re-size the images.

  • Re-Open the image on your Media File Tab.

Social Media 10

  • Underneath the Picture, click “Edit Image”


Social Media 11


  • Where it says “Scale Image” enter in the dimensions you want. I used 48 x 48.  When you are done, select the “Scale” button.
  • Social Media 12Now click ‘Update” on the far right.

Social Media 13

  • Go back through the process in Part 4  of the instructions where you replace “PICTURE URL” with the new FILE URL.
  • You’re Finished!


One Response to “Adding Social Media Buttons to Your Website”

  1. spider identification poster May 29, 2014 at 8:39 pm #

    Great info. Lucky me I found your site by chance (stumbleupon).
    I’ve book-marked it for later!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: