Social Media Icons.

Social Media Icons

Incase you hadn’t notice I got some new social media icons and blogger photo. I had fairly quickly found the old icons and decided I wanted something more me, namely pink.

The great thing about the surge in social media, is that loads of icons are readily available. Some are free, others cost a couple of pounds.

Mine are from Craftiments, they come in 10 different colours and each individual icon is a separate .png image. Perfect really.

Adding them onto your wordpress blog, could not be easier. Firstly add all of the files onto your image host, whether it’s Dropbox, Flickr or the media inbuilt to wordpress.

Then go onto your Dashboard — Appearance —  Widgets.

You now want to add some text. The HTML used to link to a social media page and to allow someone to e-mail directly to you is below:


<div id=”social-icons” style=”text-align:center;”>

<a href=”URL OF SOCIAL MEDIA PAGE” target=”_blank”/><img src=”URL OF IMAGE OF SOCIAL MEDIA ICON” width=”SIZE OF PIXELS” height=”SIZE OF PIXELS” alt=”TEXT DESCRIBING THE SOCIAL MEDIA ” /></a>

<a href=”mailto:YOUR E-MAL ADDRESS“><img src=”URL TO E-MAIL ICON” width=”48″ height=”48″ alt=”E-MAIL” /></a>
</div>


The  <div id=”social-icons” style =”text-align:center;”> defines a section of HTML, the text-align center ensures that the icons are centered within the block.

The target=”_blank” will open the link in a new browser window.

My code for the 4 widgets is seen below. It sets the widgets neatly in a row. If you want them on a different line simply put <br> after </a>.


<div id=”social-icons” style=”text-align:center;”>

<a href=”http://www.bloglovin.com/blog/11970575” target=”_blank”><img src=”http://coffeeandconfetti.me/wp-content/uploads/2014/04/bloglovin.png” width=”48″ height=”48″ alt=”Bloglovin” /></a>
<a href=”mailto:coffeeandconfetti@gmail.com“><img src=”http://coffeeandconfetti.me/wp-content/uploads/2014/04/email.png” width=”48″ height=”48″ alt=”E-mail” /></a>
<a href=”http://instagram.com/fieheath” target=”_blank”><img src=”http://coffeeandconfetti.me/wp-content/uploads/2014/04/instagram.png” width=”48″ height=”48″ alt=”Instagram” /></a>
<a href=”https://twitter.com/fieheath” target=”_blank”><img src=”http://coffeeandconfetti.me/wp-content/uploads/2014/04/twitter.png” width=”48″ height=”48″ alt=”Twitter” /></a>
</div>


 

It’s honestly that simple, it makes your blog look more polished and helps link your readers to more of your content.