One of the most important elements to include on any website is a set of branded social media icons.

social-media-icons

Your icon set can include links to your RSS or email subscription options, Twitter, Facebook, YouTube, LinkedIn, Instragram, StumbleUpon, Flickr, etc. Basically, wherever you have active accounts, including a linked social media icon helps readers and customers easily find and follow you there.

How Do I Add Social Media Icons to my Website?

  1. The first step in adding social media icons to your website or blog is to search for and choose a collection that you like. Sites like HandyCons, Web Designer Ledger, Web Designer Depot and Icon Dock offer free social media icon collections. You also can ask a designer to create custom icons to match your current website design.
  2. Once you decide on a set of icons that you like, download the image file(s).
  3. Upload your files to a site like Photobucket or your WordPress media library.
  4. Locate the image URLs of your new icons before advancing to the next step. You’ll need to include the URLs for each social media icon you plan to add to your site, to some code in a text widget in your sidebar or header.

How Do I Find my Image URL?

If you store your images on Photobucket, you can find your image location URL in the “Direct” field in the “Links to Share This Photo” on the right side of the page (when viewing the specific image you intend to use).

Photobucket-social-media-icon-image-URL

For those uploading images to their WordPress library, simply navigate to and click on the image in your library, and then copy the text in the “File URL” field.

Wordpress-media-library-image-URL

What Code do I Need for my Sidebar Widget?

Popular blog platforms like Blogger and WordPress have text widgets that can easily be added to widgetized sidebar and footer areas. The code that needs to be added to those text widgets, whether it is for 1 social media icon or a whole collection, is this:

social-media-icon-code

 

(If you are having difficulty getting your icons to render correctly, you might want to try the slight variation of code below. It has the / symbol removed before the ></a> at the end.)

add-social-media-icons

The first part of the html code – www.YourWebsiteAddress.com – is the URL of the profile or page that you want someone to connect to. For example, we’d enter: twitter.com/EliRoseSocial to send anyone who clicked on our Twitter icon, to our Twitter page.

The second part of the html code – www.URLofImageLocation.com – is where you’d include the image location URL from Photobucket or your WordPress media library. Each social media icon that you want to add to your website needs the code above. These lines of html code can be repeated several times in 1 text widget, so if you have 4 social media profiles that you want to link to icons on your blog, repeat that code 4 times, changing your profile and image location URLs each time. This same code works to create badges and buttons, too. If you receive an image from an agency or brand you are working with, you can upload it to Photobucket or your WordPress media library, and follow the same steps as outlined above to turn that image into a button to add to your sidebar or post.

Eli-Rose-Blog-Button


What sites do you love for collections of social media icons?

*Post publishing Note 1: We had a reader try to use social media icon images uploaded to Picasa who wasn’t able to make it work on her Blogger blog. As soon as she uploaded her images to Photobucket instead, it worked perfectly.

About LizJostes (300 Posts)

Liz is a 30-something marketer, social media consultant, speaker and mom. Originally from Chicago and currently living in the land of Dixie, she relishes in the flavor of fried pickles and BBQ, but longs for deep dish and a proper Chicago dog.


Related Helpful Posts: