Since I just posted some freebie icons in my new Fun Stuff for Your Blog feature I thought I should do a short tutorial on how to add those to your site as well. If you have any questions feel free to ask.
First, you need to upload your new icons to a image hosting site like Photobucket. Next add a HTML/Javescript gadget to your sidebar. Then your going to copy and paste this code below into your the gadget:
<a href="YOUR URL" target="_blank"><img border="0" alt="SITE NAME" src="DIRECT IMAGE LINK" /></a>
Your going to have to include your info in those spots. For the site URL you need to put the link to your profile. For example: https://twitter.com/Loriimagination
For what site is you would put Twitter. Then for the image URL you get the direct link that the image hosting site gave you. The finished code will look like this (except with your links)
<a href="https://twitter.com/#!/SouthernBBs" target="_blank"><img border="0" alt="Twitter" src="http://i913.photobucket.com/albums/ac339/Loriimagination/southern/sbbtwitter.jpg" /></a>
You’re going to repeat that for every icon that you want to add (all in the same gadget). You will just add in your links for all the different sites you want, like Facebook, Goodreads etc.
The last thing you want to do is center them. It makes the look better most of the time. So at the very beginning of your codes put this <center> and at the very end put this </center>.
Save and you will will have some icons on your site!
Great post Lori. I think it’s wonderful to do these posts for people like me who have no clue how to do much design type stuff.
Amy @ Book Loving Mom recently posted..Blog Tour: Valkyrie Rising by Ingrid Paulson Review & Giveaway
Hi Lori! This was a really helpful post – I’d wanted those social media icons for a really long time! However, I’m having a problem with the icons: they appear as text instead. I tried both direct links and image links for this, but I can’t seem to fix the problem.
Like, this is the code I entered for Twitter (image link) :
Instead of the Twitter icon, there’s only “twitter” seen on the sidebar. Am I doing something wrong? Can you help me out, please?
Erfa recently posted..Review – A Raucous Time by Julia Hughes
Hi Erfa,
It should look like this:
< a href=”https://twitter.com/bringontheink” target=”_blank”>
Just take the spaces out between the beginning < and ending > (It probably wouldn’t have posted the code if I hadn’t added spaces)
I hope that helps!
Lori mine isn’t working either. I followed your instructions but rather than giving me the correct icons it’s giving me the icon that’s showing in this post of yours above. The one after _blank”>
You need to replace: http://i913.photobucket.com/albums/ac339/Loriimagination/southern/sbbtwitter.jpg <
That’s supposed to say, you need to replace that url with the url for your image.
Well, it looks like it still cut off some of the code. =/ If it doesn’t show up in the comment reply email then let me know and I’ll email you directly.
Hi Lori,
No, the complete code isn’t shown.
Erfa recently posted..A Case Of Exploding Mangos by Mohammed Hanif
Hi Lori!
I finally got it to work! Thanks for the code you sent me!
I’m having trouble getting them uploaded to Photobucket because it says it’s invalid. Is anybody else having this problem?
Did you unzip the folder the images are in?
Hi there, and thanks so much for this great post. It’s really straight forward and easy to follow. I’ve added the buttons to my blog but they’re not linking properly to the social media sites. Any idea why? Would so appreciate your suggestions!
You can see them here: http://www.hello-flower.net/
Thanks,
Siobhan
Hi Siobhan!
I’ll email you so I can show you the codes. It cuts them off in the comments.
can you email me the code?! thanks
trishrcrandall@gmail.com
I tried the Social Media icons and they show up fine, but when I click on them the link is messed up. It keeps trying to find the link through my blog first instead of going straight to twitter. Can you help?
Andy recently posted..Read Along: Incarnate by: Jodi Meadows
You need to make sure there is nothing between the first set of quotes besides your URL. No spaces or anything. If you need more help, email me.
Hello! your tutorial was SUPER helpful but i only have a simple problem, it wont work for the email address social media icon, I put in my email address and then the photobucket link but it still won’t work! help?
Hi Sara! For an email address you have to do the ‘link’ like this: mailto: youremailaddress (with no spaces). That will go between the quotations in the YOUR LINK part.