Bloggy Help:

 photo socialmedia_zps413c1040.png  photo helpdeskbutton_zpsb16b6c42.png  photo instagram_zps73b3c07a.png  photo header_zps97df3d3e.png  photo needamakeover_zps6d19d8a9.png

Social Media Icons for you!

Easy tutorial on social media buttons + free hosting



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:


60 comments:

  1. Thank you!! I couldn't get the email button to work for me. Is there a trick I don't know?

    Another quick question - how do you add your post to your facebook page?

    ReplyDelete
  2. We clarified how to use the code for the e-mail button. So try it again. Thanks!

    ReplyDelete
  3. Thank you for all this info!

    I 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?

    ReplyDelete
  4. One Heart -
    Definitely! 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!

    ReplyDelete
  5. Thank you guys! This is such helpful information!

    ReplyDelete
  6. Thank you so much for this tutorial and code. I was just wondering how to do that and then I found you! Praise God!
    Debbie

    ReplyDelete
  7. That was AMAZING!!! Thank you...

    ReplyDelete
  8. I 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?

    thelifeoflinlee@hotmail.com

    ReplyDelete
  9. Thank you so much for this (and all) tutorials and help. I added a few to my blog.

    I 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

    ReplyDelete
  10. 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!

    ReplyDelete
  11. that was so helpful! thank you! thank you!

    i felt like such a computer geek, in a good way :)

    ReplyDelete
  12. Thanks so much for this! So so helpful!!
    Jo-Anna

    ReplyDelete
  13. I came back to check to see if you had a Pinterest one for us. Could you do one?? Pretty please?

    ReplyDelete
  14. THANK YOU THANK YOU THANK YOU THANK YOU!!

    I have been looking everywhere to learn how to do this. I am ETERNALLY grateful. :)

    ReplyDelete
  15. thanks for the buttons, i would suggest adding a pinterest button as well!

    ReplyDelete
  16. Thank you for the icons. Do you have one for Google+?

    ReplyDelete
    Replies
    1. We have put Google+ and Pinterest on our to do list! Thanks for the suggestions!

      Delete
    2. Thank you for adding the Pinterest icon.

      Karina

      Delete
  17. the email thing didn't work for me. Also i couldn;t figure out RSS thing. But thank you so much for the others!

    ReplyDelete
    Replies
    1. Resham, Give the email code a try again...I noticed our instructions were not super clear. You would type MAILTO:youremailaddress. Hope this helps.

      Delete
    2. Thank 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:

      http://glowingface.blogspot.com/

      Again Thank you so much for taking time and responding.

      Delete
  18. Thanks for the icons and the hosting...html is nice too!

    ReplyDelete
  19. Thank you so much, these codes and the directions are much appreciated!

    ReplyDelete
  20. This is just what I was looking for! Thank you for your help.

    ReplyDelete
  21. Truly awesome. Thank you so much!

    ReplyDelete
  22. Ah, thank you so much! That just made my life so much easier. :)

    ReplyDelete
  23. Thank you! This is awesome. God Bless.

    Can anyone tell me what the star and heart are for?

    ReplyDelete
    Replies
    1. 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!

      Delete
  24. Thank you. This was so awesomely easy for me to do because you did all the work. Thanks!

    ReplyDelete
  25. I 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!

    ReplyDelete
    Replies
    1. Kelly, we're so glad we could help you out! Yay!!! Hope the others work just as easily for you!

      Delete
  26. you 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
    http://theadventuresofhann.blogspot.co.uk/

    ReplyDelete
  27. This is great..I love your blog super informative, I can be here for a very long time I realized. Great job.
    I have a simple question:( How do I have these icons side by side ?

    ReplyDelete
  28. I 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!

    http://dailyseekinghispresence.blogspot.com/

    ReplyDelete
  29. The world's best thinkers on social media, content marketing, social business, social media marketing, social customer service and blogging. buy instagram followers

    ReplyDelete
  30. thank you thank you thank you!!!!!

    ReplyDelete
  31. I'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!
    www.yourteacherslounge.com

    ReplyDelete
  32. 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!

    ReplyDelete
  33. hello, i'm interested in adding one for my instagram as well. is that possible? please let me know.

    ReplyDelete
  34. Thank you so much for this super helpful post!

    ReplyDelete
  35. Thank you!! This was so helpful!! Do we need to credit you on our website/blog??

    ReplyDelete
  36. Where 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

    ReplyDelete
  37. This is so helpful!! Thank you!! Do you have one for instagram??

    ReplyDelete
    Replies
    1. Also, how do you make them the same color as your blog setup instead of just the generic pictures?

      Delete
  38. Help! 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

    ReplyDelete
  39. How do you make them horizontal and not vertical. The buttons work great, but I can't get them to be horizontal.

    ReplyDelete
    Replies
    1. I 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?

      Delete
  40. This comment has been removed by the author.

    ReplyDelete
  41. This was very helpful - Thank you.

    ReplyDelete

Comments are how we stay connected as bloggers. Let us know how you feel and we'll return the favor...stay calm and blog on!!! And guess what? You'll never find Word Verification on our blog...it gets kind of annoying when you can't read what WV wants you to verify right?

Note: Only a member of this blog may post a comment.

Outbrain