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 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?
Liz is a 30-something marketer, social media consultant, blogger 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.
Thanks for the hover text code – I’ve wondered about that.
I’ve got the pretty buttons, thanks to you!! I’ll have to work on the hover code to add to it!
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.
Yes, it wouldn’t matter the platform. All it takes is for one character to be off and it won’t work.
Thank you so much for this! So easy to follow along….worked like a charm!