How to Install Social Media Buttons

how-to-install-social-media-buttons-blog-tutorial

Hey everyone, time for Part 3 of my Blog Design Series! Last week's post taught you how to create social media buttons using Canva, and today I'm teaching you how to install them on your blog! Just a heads up before we get started, this tutorial is going to be a bit more lengthy and tedious than my previous two posts (and will require just a bit of beginner HTML coding), but I promise it's super easy! 

I'm primarily going to be explaining how to upload your buttons on Blogger, but I'll include instructions for using buttons on Wordpress as well. 

Read below to learn how to install social media buttons on your blog! 

1. Host Your Images

This is probably my least favorite part about uploading images to my blog layout, but it's one of those pesky little steps that simply must be done with most platforms. I personally prefer Flickr over other image hosting websites (Photobucket, etc.), but it's totally up to you. 

Upload your images to your preferred hosting site, and go ahead and keep that tab open in your browser for future reference. We'll come back to this in just a minute! 

social-media-button-tutorial-flickr-shot

2. Prep For Installment

  • Blogger- Go to LAYOUT>>ADD A GADGET, and select "Add HTML Gadget" on your sidebar. 
  • Wordpress-  Go to APPEARANCE>>WIDGETS, and then drag and drop a text box into your sidebar. 

3. Paste this Code!

Paste this code into your HTML (for Blogger) or Widget box (for Wordpress) for however many buttons you plan on installing. Be sure to hit enter once or twice between each code to make it easier for you to tell them apart during the next step! 

social-media-button-tutorial-blogger-shot

4. Edit Your Code

For the first part of this step, replace the "WEB URL HERE" with the URL to your individual social media profile pages (Facebook, Twitter, Instagram, etc.). 

Next, you'll need to go back to your image hosting website and be ready to copy the image URLs for each button you've uploaded. For the "IMAGE URL HERE" portion of the code, replace this with the respective image URLs you've copied. (A little confusing, I know, but I'll explain it a bit more below to try and give you a better idea of what I'm talking about!)

Repeat this step for each button you want to upload, and then you're ready for Step 5!

(For example, this is my Twitter button that is already sized at 50 x 50 pixels. I'm only copying the actual image URL, not the entire link. If you're having trouble finding it, it's the part in quotations directly after <img src=""> .This is what you'll paste into the "IMAGE URL HERE" section of the code you copied in step 3.)

(For example, this is my Twitter button that is already sized at 50 x 50 pixels. I'm only copying the actual image URL, not the entire link. If you're having trouble finding it, it's the part in quotations directly after <img src=""> .This is what you'll paste into the "IMAGE URL HERE" section of the code you copied in step 3.)

Once I've copied and pasted my profile URL for Twitter and my image URL for my Twitter button, thecode for my first button now looks like this: 

<a href=”https://twitter.com/sweetsolitude__” target=”_blank”><img src="https://farm8.staticflickr.com/7611/16908300452_66d67e7b6c_o.png" width="50px" height="50px/" /></a>

Your code will obviously differ from mine, but hopefully this gives you a general idea of what it should look like when you're finished with each part. 

5. Preview/Edit Your Buttons

Once you've repeated the above steps for each button, you're ready to preview all of your hard work! Make sure to double check your buttons  to make sure that all of the links are correct and take you to the right place once you click on them, and then you're good to go! 

My finished product on my tester blog is below (click here to visit the actual page)! 

social-media-button-tutorial-finished-example

All done! Did you find this tutorial helpful? Let me know by leaving a comment down below, and share your blog to show off your work! As always, feel free to let me know if you have any questions or need more clarification with something and I'll do my best to help you!

Thanks so much for reading, and check back soon for more blog design tutorials! :)