Customizing your Social Media Icons & Buttons

Including a coordinated set of icons linked to your various social media accounts either at the top of your sidebar or in your site’s header makes it easy for visitors to your site to further connect with you on other platforms. After linking your social media profiles to your coordinated icon set, there are some additional customizations you can add to improve your visitors’ experiences.

HTML Code for your Icons

Below is an example of the HTML code needed for an icon that links to your RSS feed.

<a href=”http://feeds.feedburner.com/YourSiteName” target=”_blank”><img src=”http://www.YourSiteName.com/wp-content/uploads/2011/05/sm-rss.gif” alt=”Subscribe via RSS” title=”Subscribe via RSS” />

Using Target=”_blank”

When a visitor clicks on a linked icon or button on your site, the current page with reload, taking that visitor off your page and to a different website. Since you as the website owner want to keep visitors on your site for as long as possible, you can add this piece of code (colored green above for easy identification) after your destination URL to make a new page open instead in a new window.

This is a great way to make it easy for your visitors to connect with you via your Twitter account, Facebook fan page, etc. without leaving your site.

Adding a Title to a Linked Icon

You’ve probably noticed this action before: You briefly hover your mouse over a linked social media icon and a small text box appears with a few words about what clicking on that button will do.

Adding-titles-to-social-media-iconsAdding a piece of code with your desired title for that icon (colored blue above for easy identification) after your image source URL will generate this text box.

You can be as basic or as creative as you want with your titles, and is a simple way to add customization to your site.

Do you currently have titles for your linked icons? 

7 Comments

  1. CraftyMummy

    Thanks for the hover text code – I’ve wondered about that.

    Reply
  2. Jamie

    I’ve got the pretty buttons, thanks to you!! I’ll have to work on the hover code to add to it!

    Reply
  3. Dana K

    I couldn’t get the hover text to work. I have no idea why. Blargh. I wouldn’t think Blogger vs WordPress should make a difference when it comes to the html code.

    Reply
    • admin

      Yes, it wouldn’t matter the platform. All it takes is for one character to be off and it won’t work.

      Reply
  4. Cristina

    Thank you so much for this! So easy to follow along….worked like a charm! 🙂

    Reply
  5. Kelly Vee

    So glad I ran across this – exactly what I needed and you made is super simple! Thanks so much!

    Reply
    • Kelly Vee

      Just a heads up to readers – Adding a Title to a Link – if you copy the code you MUST change the quotations manually. It would not work properly until I swapped out the quotes and then voila… Magical!

      Thanks again!

      Reply

Leave a Reply to Cristina Cancel reply

Your email address will not be published.

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

Sign Up For Insider Tips!

Subscribe to our mailing list.

Read our privacy policy here.
* indicates required
Interests

Pin It on Pinterest

Share

Share this post now!