How to add social media icons to blog posts!


Linking your social media accounts to your blog is not only a good way to boost your subscribers but in turn get your blog posts 'out there'. 

You may already know how to add social media buttons to your blog in which case this will be super easy but first I'll show you how to add these in case you don't already know. Firstly, you need to find or create your social media buttons - there are tonnes of free ones on the internet. Once you have some buttons, you need to add them to photobucket or a similar site. Then you need to go to the layout page on blogger - add html and add the following code:

<center> <a href="your link here"><img src="your image link here" style="padding-right:5px;padding-top:10px"/></a>
<a href="your link here"><img src="your image link here" style="padding-right:5px"/></a>
<a href="your link here"><img src="your image link here" style="padding-right:5px"/></a>
</center>

In the yellow area is where you place the link to your social media account. In the blue area is where you put the direct link to your image on photobucket (or alternative to photobucket). In this coding, I've adding some padding in order to space out the social media buttons. In orange, you can increase or decrease this number depending on how much spacing you want between your buttons.

Once you have you social media buttons, you can add them to your blog posts. Adding your buttons to your blog posts, just makes it that bit easier for readers to find/follow your accounts. To add your buttons to your posts, all you need to do is copy the above coding (the coding you have for your social media buttons on your blog) and go to settings on your blogger dashboard. Then go to posts and comments section and paste the coding into the post template area. Click save. This ensures that when you go to write a new blog post, the coding and your buttons will automatically show up in your blog post!

If you prefer to use text links rather than buttons like I have in this post then you need to use the coding below;

<a href="link to your social media account" style="font-size: small;" target="_blank">Twitter</a><span style="font-size: x-small;"> | </span><a href="link to your social media account" style="font-size: small;" target="_blank">Bloglovin</a><span style="font-size: x-small;"> | </span><a href="link to your social media account" style="font-size: small;" target="_blank">Google +</a>

In yellow just add the link to your chose social media account and in purple is the name of the account - you can change these to whichever one you want to use. Again, if you want to use this code, just paste it into the post template area in the posts and comments section in your settings on blogger dashboard. I hope this was helpful.


26 comments

  1. I have actually been wondering how to do this! Your post came at a perfect time. Thank you!

    Peace & Sunshine,
    Sammi at Sammi Sunshine- A Food Blog

    ReplyDelete
  2. Thank you for this post, it was very helpful! I've been trying to figure out how to do this since I just have my social media pages at the top of my blog. Thank you !!

    xo Mel.
    www.melissatee.com

    ReplyDelete
  3. Very helpful post- can't wait to try this out!

    -Liz
    thebronzeddoll.blogspot.com

    ReplyDelete
  4. hey just wanted to ask, where is your blog layout / design from ?

    ReplyDelete
    Replies
    1. I bought it from etsy but I tweaked it slightly :)

      Delete
  5. Hey,
    I've nominated you for the very inspiring blogger award, please find my post here!
    www.wink-beauty.blogspot.com/2014/04/very-inspiring-blogger-award.html

    Hannah xo

    Wink Beauty

    ReplyDelete
    Replies
    1. thank you so much hannah x

      Delete
  6. This is really useful! Thank you for sharing!
    Katie x
    www.missenchanting.co.uk

    ReplyDelete
  7. This was really helpful, thank you :) Alex, x
    www.alexxkate.blogspot.co.uk

    ReplyDelete
  8. Great post. I used to be so great at html... of course that was like 15 years ago. I remember jack now.

    www.chocolateandlipstick.com

    ReplyDelete
  9. Very helpful post :)

    Sophie x

    ReplyDelete
  10. I just learned how to put the little social icons in my email signature. I was a busy little bee, but I have got to tell you, I felt such a sense of accomplishment in learning how to do it.

    ReplyDelete
  11. I'm so glad that I've found your page! Thank you for such helpful information!
    Hugs!

    ReplyDelete
  12. Thank you this was very helpful! I'm such a dunce when it comes to these sort of things
    hcozens.blogspot.co.uk

    ReplyDelete
  13. This post was incredibly helpful! I was also wondering how you create separate pages to the link on your blog, for example your blogroll, I know this might be really hard to understand (I'm having difficulties explaining it to you).

    ReplyDelete
  14. Really appreciate this post. I'm pretty new to blogging and was looking for ways to grow my audience. Really think this will be a great benefit in getting more readers on my blog. Thanks xx

    ReplyDelete
  15. nice tutorial !! i've been looking for such one so thank you ! :) gonna do this right now!
    http://carollcia.blogspot.be/

    ReplyDelete
  16. Hi! thank you so much for the post, this is the best tutorial i've ever read especially for a newbee like me.. I've already tried it, the link is ok but the image didn't appear, can you help me how i can fix it thank you.

    shoescrackersandlemondrops.blogspot.com

    ReplyDelete
    Replies
    1. have you checked the image links are correct? x

      Delete

Thank you so much for reading!I read every comment and try to respond.If you have a question you can also email me or tweet me @sweetelectric xoxo