You’ve seen them around. They are those cute customized social media buttons that those fancy schmancy designers make. Now, you will make them!
You can pay someone (like me) to make them for you, but if you are feeling ambitious, why not try it out yourself? I’ll give you step by step instructions. There is only one catch. You need some sort of photo editing software. You can use PicMonkey (which is free) but my instructions include using the features that require a subscription. Ultimately, Photoshop or Illustrator is the best program to work in because you can save everything as a transparent PNG, but I realize not everyone has access to a program like Photoshop. PicMonkey can get the job done and pretty nicely too!
So here we go…
1. Download some white transparent PNGs of the most up-to-date icon symbols (I’ve provided some here).
2. Now open up PicMonkey and click “design.” Click on Canvas Color and choose Transparent.
3. Time to be fancy! Do you want squares, circles, or some custom image? Here I am using a simple flower design to customize my social buttons.
- I chose the Overlay button and picked the flowers.
- Then I enlarged it and changed the color.
- Using the overlay menu option, I clicked on the YOUR OWN button and uploaded one of the transparent symbols from above.
- I added a circle shape behind the symbol to make the white stand out.
- Once you have it as you like it, save it (at the big 2000×2000 resolution).
- Keep swapping out the logos until you have exact replicas of each symbol.
4. At this point, use PicMonkey and reopen each image. Simply resize it to the resolution you’d like (typical sizes are 28×28, 32×32, 48×48, or 64×64) and re-save it.
Now you have two choices…
You can either upload them individually and write the html code to link them in a widget, or you can put them all on one canvas and image map them. Either way will work!
Upload your social buttons in a horizontal line in a widget area
I outline specific instructions for anyone looking to upload their own buttons even if you don’t understand how to write HTML. It’s in the post called Trick Out Your Sidebar When You Don’t Know Code.
In some cases, you may need to image map your buttons to get them just right. A case for this would be if you don’t want them in a line, but in a funky design. If that is your predicament, here’s a basic tutorial on how to image map.
How to image map social buttons
- Open up PicMonkey and choose the design option.
- Set the canvas to transparent.
- Upload each icon you made above and place them on your canvas.
- Resize the image to the right dimensions and hit save.
- Now upload your photo to your media library by going into your WordPress dashboard and clicking on Media > Add New. If you are on Blogger, you can upload the photo to your G+ account (or use a site like Photobucket). You’ll need to copy the direct URL of the image once it’s uploaded.
- Go to http://www.image-maps.com/. This is a free image mapping software.
- Paste the image of the URL you just uploaded and hit the button that says, “Start mapping.”
- Follow the keystroke instructions to draw a rectangle or circle over each icon. Move and resize it so it covers exactly one social media button.
- Type in the link you want the button to take someone. Click save.
- Keep clicking the rectangle button until all the buttons are covered and URL addresses are entered. Make sure you hit save each time.
- Click on the menu option that says, “Get your code.”
- You’ll see a tab that says HTML code. Click on it. Highlight all the code and copy it.
- That code can go anywhere that html is accepted. So it can go in a sidebar widget, a foot widget, etc.
Just one word to the wise — creating social media buttons can get addictive. 🙂
Here’s the YouTube tutorial that goes along with this post!
