Social Media icons
Humans are social creatures. We like interacting with each other. Back in the day it was cave men gathering around the fire to chat. Today it's Facebook, Twitter, and Pinterest.
We want people to be able to find us easily. What's one good way of doing that? Put those social media icons front and center, baby!
It's not hard. You don't need a special plugin to help you. You can do this on your own. Let's get started.
Choose and prepare you icons. In order to put social media icons on your blog or website, you need said icons, right? Right. You have a couple of choices here:
- Find free ones online. Just do a Google image search for "free social media icons". There are thousands of them out there. Pick ones you like and download them. Save them somewhere where you can find them once we get to the next step.
- Make them yourself. If you're Photoshop proficient, go ahead and design something you like. If you're not a Photoshop person, try the free image editor Pixlr. Or draw something and scan it. Whatever floats your boat.
- Have someone make them for you. If you're dead set on some totally awesome, custom graphics, and you're not the do-it-yourself type, hit up some someone who is, whether it's a friend or professional graphic designer.
Once you have the icons, make sure they are saved in a web-friendly format, most likely either .jpg, .png, or .bmp. Also, make sure the images are an appropriate size for your site. Common sizes are 32, 48, or 64 pixels square. If you found your images online somewhere, chances are good that they are a usable size.
Upload your icons. If you are comfortable using an FTP client, go ahead and upload those bad boys and put them somewhere where you can find them. If you don't know what an FTP client is, don't worry about it. You can upload them to any photo storage site (Picasa Web Albums, Flickr, Photobucket, etc). Or, if you are using WordPress (.com or self-hosted), you can upload them to your image library. This is the route I'll be taking for demonstration purposes. Here we go.
Log into your WordPress site (usually http://www.YOURSITENAME.com/wp-admin
Click on "Media", then click on "Add New"
Click "Select Files"
Navigate to where your icons are saved, select all the ones you want to upload, and click "Open"
Your files will upload. When they are done uploading, click "Save all changes"
Your social media icons will now be in your Media Library
Ta da!! Your social media icons are uploaded. And now, the fun part starts!
(Disclosure: you're going to have write a tiny bit of code in these next sections. If coding isn't your thing, it's okay. I've made it pretty darn easy for you. You can do it. I have faith in you.)
Put the icons into a Widget
The best place to put your social media icons is into a Widget. So let's head on over there, shall we?
You should still be in your Media Library. If not, go there now.
Hover over one of the social media icons, and click "Edit"
Copy the file URL to your clipboard (highlight and type Ctrl+C)
Click on "Appearance", then click on "Widgets"
Drag the Widget labeled "Text" to the Widget area you want it in. Your screen will probably look a little different than mine, but the idea is the same. Very often the Widget areas are labeled something like "Right Sidebar" or "Left Sidebar". Drop the Widget where you want it.
Click on the downward facing triangle to open up the Text Widget window.
Copy the code below (ctrl C on a PC, command C on a Mac) and paste it into your text widget:
Put your cursor between the two sets of quotations marks and paste the file URL of your image (Ctrl+V) and click save
Now go visit your site. The icon should be there, looking all pretty and perky. If it's not, or it looks weird, go through the steps again, paying particular attention to the coding part.
Woot! We have one icon uploaded to our site. Now, go through the uploading steps again for all your icons. When you're done, your Text Widget window will look something like this:
If you want to put a title on your Widget, go right on ahead. Something like "Follow Me" always works.
Posted in Transportation/Automotive Post Date 02/03/2021