Making unique social media follow buttons for your blog or website is easy!
Follow buttons are a must have when you’re making a blog! In fact they are necessary on any type of website. How can you get more followers? Where can your followers find you? How can they stay up to date? You need to be able to engage and continue to interact with your followers where they already hang out, so you don’t lose them.
Most people are so bombarded with email, they skim over anything that’s not urgent, and reading your blog may not be on the top of the list. Chances are they won’t get back to it, either. But, if they’re spending time on Google+, Facebook, using Instagram, or browsing Pinterest, you want them to see you’re there, too!
You can use pre-made one’s, but for a personalized, unique look it’s very easy to make your own.
Making your own unique social media buttons
If you’re good at graphic art, you can design your own. If you’re better with a pencil, as I am, you can draw on paper and snap a picture.
Whatever method you use, taking a pic or using software, make it pretty with your favorite photo editing software, then upload to a photo database.
Photoshop is still a mystery to me. I use Picasa, crop my image, press Auto-Fix, and then save if I like the results. Sometimes I play around with the other fun features or adjust the lighting and contrast myself.
|lighting enhanced in Picasa|
Then I take my edited pic, and re-size in Paint each button to 72×72 and save.
That simple, huh? What did you just say?
Lets break it down. Don’t let the steps scare you! It is easy once you know what to click.
After you’ve saved an image with the buttons you are wanting and have edited the lighting, if you desire, open the image in Paint.
How to Crop an image in Paint
On my computer, running Windows 7, I right click the image and click Edit on the drop down menu. A page like the one below should open with your image in it.
To crop your image, click the button I’ve circled in red showing a dotted square and the word “Select” under it.
Then click and hold the left mouse button anywhere on the screen (where you want to start cropping the image from), drag your mouse and you’ll see a box appear. Release the mouse button when the box is around the area you would like to crop.
If it’s not to your liking, just click anywhere else on the screen, the box will disappear and you can try it again.
Once the area in the box is what you want to keep, click “Crop” to the right of the “Select” box you previously clicked. Then click “Resize”, just below the crop button.
How to Resize an image in Paint
After clicking “Resize”, a pop-up will appear. Make sure “Maintain aspect ratio” is checked and select “Pixels”. Change to the size you desire. For this button I would change the smallest size to 72, then crop the image manually again.
You can use the dotted “Select” box again or just move the side that is large in (an arrow will appear when you’re on the edge of the image, click and move it slowly in to crop that side, however it only works on the bottom and right sides). At the very bottom of the screen you’ll see the size changing as you move in and out. See if you can get it exactly 72×72.
This is just a suggested square size. Your computer will not explode if you don’t use this size.
The final size I used for my icon buttons on this blog is 36×36 pixles which is small. 42×42 is a standard size.
You can crop in Picasa, but I find it’s easier to open the file with Paint and click resize to get the exact results I want. Always size down, never up! It’ll look grainy if you make it larger.
Save your resized image separately and label it with the size it is now. Make sure all your saves are labeled descriptively!
ex: “Facebook social media button 42×42.jpg”
I always note the size in the description so if I need to change it or use a pic again, I know exactly which one to use.
Now, go back to the edited image with all your buttons and crop the next one, and so on and so forth.
Once you have a large, square, complete, saved image of each, you can resize each again to the size you would like on your actual blog or webpage (Back in paint, press resize, select Pixels, type in your size. Remember I said 42×42 is standard, come on, you know this now!).
You may want to save all of these in a separate file so as not to confuse them.
Stop and admire your beautiful work! You did it!
Only thing left is to get them on your webpage, but admire them a moment longer… okay, moving on.
How to get buttons on your webpage and link your social media to them
Upload each image to a photo database.
I use Picasa Web Albums. Once the upload is complete, go to your image online and copy the image URL. On Picasa, my images upload right to my Drop Box and I can just right click the image I want and click “copy image location” in the drop down menu.
Save the URL for each image in word where you can get them easily. Label each one so you know which image to link it to.
ex: FB Image URL: https://lh4.googleusercontent.com/-TFrlwBXJz9E/UdKEhkVXcgI/AAAAAAAAF7Q/gODqWmkAiJg/s36/facebook%2520sm.jpg
Copy this HTML code (in red) for each button. Insert the URL of the link you want it to go to:
<a href=”http://www.YOURURL.com” target=”_blank”><img src=”http://www.IMAGEURL.jpg” />
Change YOURURL and IMAGEURL to your own links and images.
ex: this is for my facebook:
<a href=”http://www.facebook.com/sandytoescreations” target=”_blank”><img src=”https://lh4.googleusercontent.com/-TFrlwBXJz9E/UdKEhkVXcgI/AAAAAAAAF7Q/gODqWmkAiJg/s36/facebook%2520sm.jpg” />
Once you have that HTML filled in specifically for each social media site, with it’s corresponding image URL for it’s button, lined up one after the other, no spacing or code in between…
Save it and then copy and paste the entire code onto your site.
In Blogger, go to Layout, add the widget for HTML. Paste all the code there and save. Move to where you want it to go in Layout.
Completed (and very cute) crayon drawn social media buttons:
*Note: You should check with all company logo policies prior to using any image. I found out Twitter has very specific requirements now; http://twitter.com/logo. I have not looked into the others.
To center: add <center> at the begining and </center> at the end.
If there’s not enough room and you want them in two rows:
add <br/> where you want the first row to end.