We've had a few requests about Social Media Icons. So we thought we'd put together a few for you to use on your blogs! You install them just like a button. So copy and paste the code into an HTML/JavaScript Gadget in your sidebar. NOTE! You will need to replace the line that says "ENTER YOUR LINK HERE" with the link to your site (so that when they click the button it will go to your own Twitter account, for instance). To do this, open a new window, go to the site you would like the button to link to, then copy that URL (the www address in the field up top). Paste that into the "ENTER YOUR LINK HERE" space. Leave the quotes around the link. ** You can put many of these icons together in one widget (like we did on our site). They are small enough that they will line up side by side.
Learn how to make your icons vertical by clicking here!
Tips:
• If you ever want to center the items in your HTML gadget, enter the code <center> at the very beginning of everything in that gadget. And then </center> at the very end.
• You can add space between icon within the gadget by adding a break. The code for a break is <br>
• If you want the mail icon to open a new e-mail addressed to you, you have to add the following to the "ENTER YOUR LINK HERE" space:
mailto:YOUREMAILADDRESS (<----for example, we would put mailto:sarah@blogguidebook.com)
So the final code for the e-mail button would look like this (with your e-mail address, of course):
<a href="mailto:sarah@blogguidebook.com"><img src="http://i892.photobucket.com/albums/ac123/beautifymyblog/8d82ea64.png" /></a>
Blogger:
Twitter:
RSS:
Flickr:
Facebook:
Email:
PayPal:
You Tube:
Vimeo:
Star:
Heart:
Pinterest:
great post...lots of good info!
ReplyDeleteThanks so much for this!!!!
ReplyDeleteThanks!
ReplyDeleteThank you!! I couldn't get the email button to work for me. Is there a trick I don't know?
ReplyDeleteAnother quick question - how do you add your post to your facebook page?
We clarified how to use the code for the e-mail button. So try it again. Thanks!
ReplyDeleteThank you for all this info!
ReplyDeleteI have been wanting to add an email button to my blog-but I want a customized photo/picture as the button face. Can I use this code for that by simply replacing where the image came from?
One Heart -
ReplyDeleteDefinitely! You can use an image of your choice. The code can stay the same!
We'll write a quick post about posting to Facebook this weekend. Look for it!
Thank you guys! This is such helpful information!
ReplyDeleteThanks! This was very helpful!!
ReplyDeleteThank you so much for this tutorial and code. I was just wondering how to do that and then I found you! Praise God!
ReplyDeleteDebbie
That was AMAZING!!! Thank you...
ReplyDeleteI have been looking for these EVERYWHERE! .. so thank you! but i was curious if there was a way to make them a little bit bigger?
ReplyDeletethelifeoflinlee@hotmail.com
Thank you so much for this (and all) tutorials and help. I added a few to my blog.
ReplyDeleteI do have a question if you don't mind. How do I have these icons side by side instead of in vertical list?
Thank you.
Christy
Thank you! Adding to my blog right now... Would you be able to do one for Etsy for us?? That would be awesome if you could! Thanks!
ReplyDeletethat was so helpful! thank you! thank you!
ReplyDeletei felt like such a computer geek, in a good way :)
Thanks so much for this! So so helpful!!
ReplyDeleteJo-Anna
I came back to check to see if you had a Pinterest one for us. Could you do one?? Pretty please?
ReplyDeleteTHANK YOU THANK YOU THANK YOU THANK YOU!!
ReplyDeleteI have been looking everywhere to learn how to do this. I am ETERNALLY grateful. :)
thanks for the buttons, i would suggest adding a pinterest button as well!
ReplyDeleteThank you for the icons. Do you have one for Google+?
ReplyDeleteWe have put Google+ and Pinterest on our to do list! Thanks for the suggestions!
DeleteThank you for adding the Pinterest icon.
DeleteKarina
the email thing didn't work for me. Also i couldn;t figure out RSS thing. But thank you so much for the others!
ReplyDeleteResham, Give the email code a try again...I noticed our instructions were not super clear. You would type MAILTO:youremailaddress. Hope this helps.
DeleteThank you so much! I did exactly as you said, but it gave the usual notification of not installed correctly. If you could check my blog at the footer section I have added Mail me:
Deletehttp://glowingface.blogspot.com/
Again Thank you so much for taking time and responding.
Thanks for the icons and the hosting...html is nice too!
ReplyDeleteThank you so much, these codes and the directions are much appreciated!
ReplyDeleteThis is just what I was looking for! Thank you for your help.
ReplyDeleteThis is fantastic! Thank you!
ReplyDeleteTruly awesome. Thank you so much!
ReplyDeleteAh, thank you so much! That just made my life so much easier. :)
ReplyDeleteThanks for these!!
ReplyDeleteThank You So Much!!!
ReplyDeleteThank you! This is awesome. God Bless.
ReplyDeleteCan anyone tell me what the star and heart are for?
The heart and star could link to a page within your blog that lists a bunch of stuff you love or want to highlight...we're not really sure, but they are such cuties!
DeleteThank you. This was so awesomely easy for me to do because you did all the work. Thanks!
ReplyDeleteI have been trying to figure this out for days and happened to see this post- got the email button working and am trying the others- i dont know why more people have not posted this before= thank you thank you!
ReplyDeleteKelly, we're so glad we could help you out! Yay!!! Hope the others work just as easily for you!
Deletethank you again!!!!!
ReplyDeleteyou have no idea how much this helped me! As a new blogger all of this stuff still scares me a little but this post made it so easy, THANK YOU SO MUCH! you are an angel! x
ReplyDeletehttp://theadventuresofhann.blogspot.co.uk/
This is great..I love your blog super informative, I can be here for a very long time I realized. Great job.
ReplyDeleteI have a simple question:( How do I have these icons side by side ?
This comment has been removed by the author.
DeleteI have no idea whats going wrong for me, but the link is showing up next to the icon. Any ideas how to fix my issue? Thanks!
ReplyDeletehttp://dailyseekinghispresence.blogspot.com/
The world's best thinkers on social media, content marketing, social business, social media marketing, social customer service and blogging. buy instagram followers
ReplyDeletethank you thank you thank you!!!!!
ReplyDeleteI've recently read a million posts on adding similar buttons and this is the first one that was successful for me! I am extremely new to the blogging world. Thank youso much for your help!
ReplyDeletewww.yourteacherslounge.com
I am totally new to blogging. I want people to be able to easily share my posts on social media such as twitter or facebook. How do I make a button for this? Thanks!
ReplyDeletehello, i'm interested in adding one for my instagram as well. is that possible? please let me know.
ReplyDeleteThank you so much for this super helpful post!
ReplyDeleteThank you!! This was so helpful!! Do we need to credit you on our website/blog??
ReplyDeleteWhere do I put the code? I've tried in my header and also in the edit HTML spot in the template section on Blogger but nothing is working
ReplyDeleteThis is so helpful!! Thank you!! Do you have one for instagram??
ReplyDeleteAlso, how do you make them the same color as your blog setup instead of just the generic pictures?
DeleteThank you!
ReplyDeleteHelp! I've read both this page and the other on social media icons. I still feel like I'm missing something. You see I went to a "free" social media icon site and downloaded a set. I don't see where any html could be added s i don't think it is there. Then I found your site which sounds like you have the html for the sites I need.. MY QUESTION IS THIS; HOW DO I GET THE IMAGES AND THE HTML CODE TOGETHER? You can answer me here or via email, I'll look in both places. Thank you. carpediem5790@yahoo.com
ReplyDeleteHow do you make them horizontal and not vertical. The buttons work great, but I can't get them to be horizontal.
ReplyDeleteI removed the break symbol and that made them horizontal however now they are right up next to one another and I can't separate them without it becoming vertical. Any tips?
DeleteThis comment has been removed by the author.
ReplyDeleteGracias Bunches!!!!!!!!!!!!
ReplyDeleteThis was very helpful - Thank you.
ReplyDelete