Home About Meet Contact

Tuesday, March 26, 2013

How To: Install Social Media Icons on Blogger

A while back the lovely Torrie shared how to create social media icons... today I am going to show you how to install those social media icons on Blogger. 


Once you've followed her tutorial, you'll want to upload your images to an image hosting site. I use Flickr. To grab the link for the code, click on the image >> actions >> view all sizes. Once you're on the screen where you can select different sizes, select the size that will fit in your sidebar. You're going to right click that image and then you will have the link for your code. 


This is the code you will need for your social media icons. 

<a href="URLFORICON" target="_blank"><img src="IMAGEURL" alt="TITLE" width="165" height="55" /></a>

Change the information in red. In this tutorial I am demonstrating with our 'Twitter' social media icon so in the 'URLFORICON' section of the code I am going to put the URL for our Twitter account making sure to stay within the quotations. The image URL link you'll want to copy and paste [shown in photo above] in the 'IMAGEURL' section of the code being sure to stay within the quotations. The 'TITLE' section is just where you can put either 'Twitter' or which ever social media site this icon will be connected to. Or you could just put your blog name. Where the 'width' and 'height' numbers are in red is where you will input the image size for your sidebar. This is what your code should look like after all of the information is added:

<a href="https://twitter.com/byourownblog" target="_blank"><img src="http://farm9.staticflickr.com/8472/8434386280_3d51d80d0d_m.jpg" alt="B.You" width="165" height="55" /></a>

Repeat these steps for all other social media icons, making sure to save the complete code in Notepad or Word. Once you have all the codes completed, head on over to Blogger and go to 'Layout'. In your sidebar select 'add gadget'.



Then choose 'HTNL/JavaScript'


Copy and paste all of your codes then select 'add'. Be sure to preview your blog before you save to make sure that it all looks right. If it does, and everything is in place, select 'save arrangement' and then head back to your blog to make sure that the links work. If they don't, be sure that you copied the codes over correctly and that you stayed within the quotations when entering your information. If everything is running smoothly then you're good to go. You'll have a pretty new addition to your sidebar that represents you and all things connected to you. 

If you have any questions about the installation process or need help at all, let us know. You can leave us a comment below or send us an email at b.you.blog [at] gmail [dot] com.
Pin It

17 comments:

  1. Hi, why wont my icons come up? I have done everything stated?

    It comes up with a box, the correct title, but no image, the link works though. Thanks, Emily x

    ReplyDelete
  2. Mine is doing the same exact thing... please help! What we missing here?

    ReplyDelete
  3. Dallas SEO expert
    I am also doing it same as but i didn't get it exactly. It is good but please explain it briefly...

    ReplyDelete
  4. Having a presence on all the major social networks is a business necessity these days. But what tools are the social media. more instagram followers for free

    ReplyDelete
  5. THANK YOU! It finally works!

    http://stephaniemaverick.blogspot.co.uk/

    ReplyDelete
  6. Finally a tutorial that actually works !! thank you so much !!

    ReplyDelete
  7. http://htcmobilesphones.blogspot.com/2013/04/first-social-network-phone-htc-firstat.html

    ReplyDelete
  8. Nice guide! :)

    Jan

    ReplyDelete
  9. http://samuelhollis.com/blog/

    You can head here to check out a nice free social media icon set

    Tweet me on Twitter for ANY social media icon question or for help!
    @SamHollisDesign

    ReplyDelete
  10. this was so helpful! Thanks so much for posting it!!

    annie
    acollegeconfession.blogspot.com

    ReplyDelete
  11. this helped me ALOT!! thank you! thank you so much for your tutorial!!

    ReplyDelete
  12. Very nice post,it's really helpful!!!

    ReplyDelete
  13. The real purpose of stock market investment is to make profit with a logical stoploss. Many traders want to make profit but not ready to put a logical stop loss. So market itself pulled them out of the market. We the BIGPROFITBUZZ an advisory firm believe that knowledge & experience can only makeOPTION, STOCK TIPS money for you in the market. We educate our clients about the market situation by different angels & give them opportunity to trade with their confidence. Many people say loss is certain in stock market but not profit. But we say profit is your choice & loss is by chance. You can visit our website & cross check our daily intraday calls & positional calls for your satisfaction.
    Regards
    BIGPROFITBUZZ TEAM

    ReplyDelete
  14. Thanks .. http://prasadbrao.blogspot.in/

    ReplyDelete
  15. Nowadays having social media icons and widgets on blogger and website much for promotional activities to always touch with our online audience.
    Web Design Company London | Web Design London

    ReplyDelete
  16. Yes, using html script you can add social media icons, there are other add-ons integrated in blogger for adding social media icons.

    ReplyDelete