Pages

How to Add Social Media Icons & Blog Buttons to your Website

One of the most important elements to include on any website is a set of branded 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 by clicking “Share” when your mouse is hovering over your image, and then the ”Get Link Code” tab.
The link to copy is the “Direct link for layout pages” 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



 

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
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/collecter6 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.

No comments:

Post a Comment