How to install social media icons
I’ve been getting a couple of questions about installing/using the social media icons I made, so today, let’s talk about how to get those up and on your site. This will also work for any social media icons you have (they don’t have to be mine) or any photo you want to use on your sidebar, like a blog button.
If you’ve never used HTML code before, don’t let this post scare you – this process is very, very simple. What you’re going to do is upload the photos to an image hosting service, and then use a little bit of code link to them on your site.
Step 1: Upload the icons
To start, you need to upload your photos to a site that will host them for you.
If you’re on WordPress, you can upload the icons to your Media Library. Once it’s uploaded, expand/show/click on the photo to find the link, and it should end in the file extension (like .jpg for JPEGS, .png for PNG files, etc).
If you’re on Blogger, you have to use a third party photo sharing site like Photobucket. Why can’t you use Blogger? Because as of right now, Blogger will host any photo you upload, but doesn’t allow you to link to them the way we need them to; so, go ahead and use Photobucket instead (it’s free).
Once the photos are uploaded to Photobucket, you want to view your album then hover your mouse over the photo. A pop-up with several different URLs will appear; the one you want to click on is the “Direct Link” URL. When you’re ready to copy it, simply clicking on it will copy it for you in Photobucket.
Once the icon photos are uploaded, we need to make note of the photo/file URLs for Step 2. At this point, you may want to open up in a new browser tab/window to work in for the next steps. I find it easier to flip back and forth between tabs to grab the photo URLs, rather than writing them down.
Step 2: Insert the image links
Next, you need to insert the image URL links in the spots where you want the icons to appear on your sidebar.
For both, you want to copy and paste this code into the new widget you just added. You can select the code, then copy and paste it right from here:
<a href="http://www.WebsiteToLinkTo.com"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" /></a>
This bit of code is the basic requirement for using a photo/social media icon on your sidebar. The first part, the a href part, is the link; change the a href URL in the example to whatever website you’d like to link to, like Facebook or Twitter.
The second part, the img src section, is where the photo/icon is housed, so change the img URL example to the photo/file URL for your own icon. Make sure you keep both the website URL and the photo URL within the quotes.
Then, you’ll need to repeat this step for every icon you use.
Step 3: Customize the code
The basic code will get those icons onto your blog. If you need it done simply and quickly, just copy and paste and save. But there is more you can do here that you might be interested in.
For example, let’s say you don’t want the link to open in the same window; it will do that the way the code is now. If you want the link to open in a new window, you need to direct it to do so by adding a target. The _blank portion tells your blog to open up a new window for that link:
<a href="http://www.WebsiteToLinkTo.com" target="_blank"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" /></a>
Or maybe you want the icons to be a different size. Mine are 52px wide, which may be too big for your tastes or blog layout. You can open up a photo editor, like Photoshop, Photoshop Elements, Picasa, or GIMP, and manually resize them, but maybe you don’t know what the final size will be; maybe you want to see what they look like up on your site first.
Rather than manually resizing them and uploading them over and over, you can set the width or the height for your icons with code. This is great if you need to tweak them to fit on your sidebar because all you would need to change is the number (versus uploading your icons over and over). I can insert both a width and a height setting, but doing just one will take care of the sizing adjustment for me; the photo should maintain it’s proportions.
In the example below, I’ve set the width to 25 pixels wide, so change the 25 to whichever number you like:
<a href="http://www.WebsiteToLinkTo.com"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" width="25" /></a>
You can also set some alternate text, should the photo not load for whatever reason. To do that, add the alt section like below:
<a href="http://www.WebsiteToLinkTo.com"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" alt="Alt Text or Photo Title Goes Here" /></a>
What if you want your button to link to an email address? A simple email link looks like this:
<a href="mailto:email@example.com"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" /></a>
And finally, let’s say you want it centered. You can add code to do that, like this:
<span style="text-align:center"><a href="http://www.WebsiteToLinkTo.com"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" /></a></span>
Here’s what everything looks like all together:
<span style="text-align:center"><a href="http://www.WebsiteToLinkTo.com" target="_blank"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" width="25" alt="Alt Text or Photo Title Goes Here" /></a></span>
Step 4: Save and finish
That’s it! Make sure to save your widgets once you’re done!
A couple things to remember:
Don’t forget change the website and photo URLs for your own widgets!
You only need to copy one of these code boxes for your icons, not all. I included individual codes to explain what each part did and to make it easier on you if you have a specific preference. You don’t need all of them on your sidebar, just one.
If you’re using several icons and want them to sit next to each other, run all of the codes together. Don’t hit Enter to create a new line for the next icon; just paste that icon’s code right next to the first one and repeat till all of your icons’ codes are in place.
For more quick reference HTML codes, check out the W3 Schools website. Enjoy!