I was using the Social Media Widget plugin to add social network icons to my websites but it had a major security hole that allowed malicious scripting. I dropped it but couldn’t find a replacement I liked. From that point I decided to manually add the icons and links myself, in a widget and in the top right of my site.
Adding social media icons to a widget is the easiest; I used this as a guide. First locate free to use social media icon images; I like Icon Finder since you can choose the size and licensing. I uploaded them to a new folder called social in /wp-content/uploads and then added the following as a text widget. Just create one line per social media site.
<a href=”https://www.facebook.com/pages/Beautiful-Calling/248484021901″ target=”_blank” title=”Follow us on Facebook”><img src=”http://www.beautifulcalling.ca/wp-content/uploads/social/facebook.png” height=”112px” width=”112px” style=”margin:0 0px;” /></a>
<a href=”https://twitter.com/beautifulcall” target=”_blank” title=”Follow us on Twitter”><img src=”http://www.beautifulcalling.ca/wp-content/uploads/social/twitter.png” height=”112px” width=”112px” style=”margin:0 0px;” /></a>
<a href=”http://www.beautifulcalling.ca/feed” target=”_blank” title=”Subscribe via RSS”><img src=”http://www.beautifulcalling.ca/wp-content/uploads/social/rss.png” height=”112px” width=”112px” style=”margin:0 0px;” /></a>
Let me break it down. The a href is the link to your social media page, target is opening a new window, title shows text when you hover over the icon. Img source is the location of the icon image. Height and width are used to adjust the image size to be just right for your space, and margin is the space around your image. I ended up playing with the image size until it fit the three icons nicely in the sidebar.
Adding the same icons to your site’s header is mostly the same process. This time your adding the links and image paths to your header.php and then customizing their position in style.css. Here’s the header.php portion.
<div class=”social-networks”>
<a href=”https://www.facebook.com/pages/Beautiful-Calling/248484021901″ target=”_blank” title=”Follow us on Facebook”><img src=”http://www.beautifulcalling.ca/wp-content/uploads/social/facebook.png” height=”112px” width=”112px” style=”margin:0 0px;” /></a>
<a href=”https://twitter.com/beautifulcall” target=”_blank” title=”Follow us on Twitter”><img src=”http://www.beautifulcalling.ca/wp-content/uploads/social/twitter.png” height=”112px” width=”112px” style=”margin:0 0px;” /></a>
<a href=”http://www.beautifulcalling.ca/feed” target=”_blank” title=”Subscribe via RSS”><img src=”http://www.beautifulcalling.ca/wp-content/uploads/social/rss.png” height=”112px” width=”112px” style=”margin:0 0px;” /></a>
</div>
As you can see it’s basically the same thing as the text widget, except I’ve defined it as div class social-networks. Smaller icons may work better in the header but that’s up to you. Now we set that up in style.css with some positioning we can get twitter followers.
.social-networks {
position: absolute;
float: right;
right: 40px;
top: 100px;
}
So it’s a set position, 40 pixels from the right of the site and 100 pixels from the top. Adjust as needed. W3schools.com is a great site to look up any and all of these items.
