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!
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!
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!
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)!