Installing Social Icons On Your Blog

Something so simple can be daunting, but you can do it! They have premade widget and apps – but what if you don’t want to use the prescribed social networks? None of them ever have Goodreads. The key to perfection is doing it yourself. Let’s install social icons on your blog.


The first thing we have to do is find some icons. There are a lot of free ones out there. I even have a few Free ones that you can download on my blog.

All_icons


Upload your social media icons onto your server, or flickr, or another image hosting software and get the links for each image. I’m using my own server. Please do not use my links, use your own.

The links will look like URLs:

http://www.parajunkee.com/wp-content/uploads/2016/08/booklikes.png


Copy each link into a Text Editor. I would use something that will not add its own code – like TextEdit or Notepad. Programs like Word add their own HTML and they can drive you mad when you copy and paste them into your blog editor.

Now we are going to make this image into an HTML code that shows it in the browser.

[sourcecode language=”plain” padlinenumbers=”true”] <img src="http://www.parajunkee.com/wp-content/uploads/2016/08/booklikes.png">

[/sourcecode]
Remember to replace http://www.parajunkee.com/wp-content/uploads/2016/08/booklikes.png with your own image url. Put it within the quotations.


Next we are going to wrap a link around the image. Sounds easy, right? Make sure to have your link ready. We are linking Booklikes, so my Booklikes link is:

http://parajunkee.rocks

[sourcecode language=”plain” padlinenumbers=”true”] <a href="http://www.parajunkee.rocks" target="_blank"><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/booklikes.png"></a>[/sourcecode]
Remember to replace http://parajunkee.rocks with your own social link. Put it within the quotations.

Now you have ONE icon that works and links:


If you are good with your icon, repeat those steps for each image you would like on your blog. To keep them neat and tidy, watch your spaces they can do weird things to your string. It looks messy, but each one should come after the other:

[sourcecode language=”plain” padlinenumbers=”true”] <a href="http://www.parajunkee.rocks" target="_blank"><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/booklikes.png"></a><a href="http://www.twitter.com/parajunkee” target="><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/twitter.png"></a><a href="http://www.parajunkee.com/feed” target="><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/rss.png"></a><a href="http://www.pinterest.com/parajunkee” target="><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/pinterest.png"></a><a href="http://www.instagram.com/parajunkee“ target="><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/instagram.png"></a><a href="https://www.goodreads.com/user/show/2680107-parajunkee" target="_blank"><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/goodreads.png"></a><a href="“http://www.facebook.com”" target="_blank"><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/facebook.png"></a>[/sourcecode]
Which looks like this:


Now if you are okay with size and placement, you are done. But, if you need to tweak the size… let’s move along. We’re going back to the single string.

[sourcecode language=”plain” padlinenumbers=”true”] <a href="http://www.parajunkee.rocks" target="_blank"><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/booklikes.png"></a>[/sourcecode]
The code is fine, but the image is way too big. I want to make this 100px image half the size. We are now going to add a bit more code to the string of HTML. We are going to STYLE it.

(This first way is a SIMPLE way to adjust your image – if you want to go into a bit of CSS, skip this part and go to the end. If you don’t want to mess with CSS, do it this way. Your choice. They both work.)

[sourcecode language=”plain” padlinenumbers=”true”] <a href="http://www.parajunkee.rocks" target="_blank"><img style="max-width: 50px; max-height: auto;" src="http://www.parajunkee.com/wp-content/uploads/2016/08/booklikes.png"></a>

[/sourcecode]
The key is adding the STYLE at the end of the IMG string:

[sourcecode language=”plain” padlinenumbers=”true”] style="max-width:50px; max-height:auto;"[/sourcecode]
The output looks like this:

Big difference. You can change the 50px to anything you want. Do the math. If your sidebar is 300px wide and you want to fit 5 social icons across, each one can be no bigger than 60px. You would add the STYLE tag to each of your IMG codes.


Are you good to go? Or ready for more?

If you are good with what we’ve done you can stop here.


But, if you want to take it to the next level. Keep going – c’mon Alice let’s go down the CSS rabbit hole. Let’s add timing and hover functions to it, using CSS. Don’t be scared. It’s easy. Copy and Paste.


I took out the style tag and wrapped it in a div. You take out that previous STYLE max-width we added, because now we are going to do it with CSS. On top of removing the STYLE tag – or not adding it at all. I gave the div, I wrapped it in, an ID of socialfun. This is how we identify what we want to style.

[sourcecode language=”plain” highlight=”1,3″] <div id="socialfun">
<a href="http://www.parajunkee.rocks" target="_blank"><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/booklikes.png"></a><a href="http://www.twitter.com/parajunkee” target="><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/twitter.png"></a><a href="http://www.parajunkee.com/feed” target="><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/rss.png"></a><a href="http://www.pinterest.com/parajunkee” target="><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/pinterest.png"></a><a href="http://www.instagram.com/parajunkee“ target="><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/instagram.png"></a><a href="https://www.goodreads.com/user/show/2680107-parajunkee" target="_blank"><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/goodreads.png"></a><a href="“http://www.facebook.com”" target="_blank"><img src="http://www.parajunkee.com/wp-content/uploads/2016/08/facebook.png"></a>
</div>[/sourcecode]

To get them to act “fancy” you have to get a little fancy with CSS. Go into your source code, EDIT HTML in blogger, under settings. Or if you are in WordPress you would have to turn on Jetpack’s CSS feature and add this in.

For Blogger look for the closing style tag:[sourcecode language=”“plain””] </style>[/sourcecode]

Copy the following code right before it. For WordPress, go to Appearance > Edit CSS – then copy and paste this:

[sourcecode language=”css”] #socialfun {
display: block;
text-align: center;
}

#socialfun img {
display: inline-block;
margin-right: 3px;
max-width: 50px;
}

#socialfun img:link {
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

#socialfun img:hover {
opacity: 0.5;
padding-bottom: 5px;
}[/sourcecode]

And that about does it. Go forth and install your social icons! Let me know how you did, or if you have any questions.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *