Thursday, September 3, 2015

How to Install Social Media Icons | Book Blogging Tips (#15)

Share it Please
I bet you've seen them all on other people's blogs, including mine. The little icons that look like the logos of major social media sites like Twitter, Tumblr, Facebook etc.

I've always thought they'd come with prepurchased themes and there was no way to add them to my blog without changing my theme.


You don't need an IT degree to figure out how to add them and I'll explain it to you in a few simple steps.

Please Note: I use Blogger, so obviously I don't know whether this guide would work for you if you are self-hosted or use a different blogging platform than I do.


1. Decide on a design.

There's multicolored ones, black-and-white ones, simplistic ones, stylized ones - just google for free social media icons and take your pick. A great source is They have a great selection of free and fee-based icons.
  • Make sure the icons you download are available under a creative commons licence or free for commercial use! (If you have ads on your blog or use affiliate links, you're using those icons commercially.
2. Download the image.

It doesn't matter where you take the icon from, whether it's the web or another site. Right-click and download. You should all know how to download an image, I hope.

3. Make a photobucket, flickr or similar image hosting website account

4. Upload the image on said account so you'll have a fixed link for that image as long as your account exists

Why? What if the website you're taking the icon from eventually gets shut down? You're going to want to make sure that those icons stay on your website

5. Right-click on the uploaded image and copy the image's URL

6. Head over to your Blogger account

Sadly I can't change my language settings but the buttons are in the same spot so nevermind the text.

1. Click on Layout
2. Click on Add Gadget
3. Choose HTML/Javascript

Now a window should open, similar to the "new post" window.

7. Add the code

Here's where it gets a little complicated, but don't panic. You don't need an IT degree to figure this out

The basic code is

<a href="[the link to your social media profile]"><img src="[the link to your social media icon]"/></a>
For example, if I would want to use a specific image as my social media icon and link to my blog:

<a href=""><img src="URL of the image"/></a>

Got it?
Now you repeat the process for every social media site and icon that you want to add to your blog, save, and place the gadget wherever you'd like the icons to show up.

If you've got any more questions, let me know!

Come back next thursday for a new edition of Book Blogging Tips!

More Tips:

No comments:

Post a Comment

Comments make every blogger's day. Don't be afraid and say something, even if it's just a smiley face or a quick "Hey, I liked this" or "Hey, I didn't like this". Don't be shy! xx

Related Posts Plugin for WordPress, Blogger...