Disclaimer: The PicMonkey links you’ll see are affiliate links, meaning I’ll get compensated once you purchase Picmonkey Royale. (Please do!) The views I express below are solely my own.
This is Part 2 of a three-part series on making your own custom social media buttons/widget. It will teach you to make them using PicMonkey’s FREE plan. Part 1 (which you can find here), taught you how to make them using PicMonkey’s (PAID) Royale plan. As you’ll see, each option has its pros and its cons.
~ ~ ~
Were you as bummed as I was when I realized that PicMonkey would make us pay for some of its best and most useful features? Suddenly, I though that those cute, custom, matchy-matchy professional-looking social media buttons at the top of most websites/blogs were truly going to be unattainable. Fortunately, I had made my first set before I had to pay for PM (I ended up giving in and paying for it later on, though), but I nevertheless thought that many people out there would still want to find an alternative to make their own buttons.
The great news is that if you’d STILL like to use PM for free, I’m going to show you a way that’ll let you make the buttons you want–and they’ll even be more custom than if you were to borrow them from some other place online.
So, to sum it up, making your own buttons isn’t expensive (in fact, it’s FREE! Well, to an extent depending on which web app you work with); you don’t need to hire ANYONE (other than YOURSELF!); and you don’t need to “get” them elsewhere (because I’ll be teaching you to MAKE your own widget from scratch!).
1. PicMonkey: Built by the makers of Picnik, PicMonkey makes editing images online SUCH A BREEZE! You can still do plenty of things without its Royale plan (though I’d still recommend you subscribe to it b/c it’s AWESOME), which is why we’re here today!
2. Time: Your first time going through this will probably take you a half hr. to an hr. The times after that should take you WAY less than that (depending on how crazy creative you want to get).
READY, SET, GO!
DESIGNING YOUR WIDGET
1. Search for and download an image of a white background, or a white square/rectangle/whatever. This one works.
2. Upload that image onto PicMonkey.
3. Go to the “Basic Edits” tab, then to the “Crop” option, and crop it to your desired size. Then, click “Apply.” I like keeping a width of 300px as my sidebar’s a tad wider than that BUT this part really depends on you.
|Those are the types of Overlays I used in case you want to use them as a model.|
By now you might be asking yourself, “HOW do I add the actual links to each of my icons?” Well we’re not done yet! Now you have to create the code for your beautiful new widget!
CODING YOUR WIDGET
6. Simply go to Image Maps to get started. Don’t worry, you basically need NO HTML experience whatsoever, which is so sweet! Moreover, you’ll find that site is also very intuitive and easy-to-follow, but in case you’d like instructions, just keep reading : ).
7. Upload your image onto Image Maps. Then click on “Start Mapping Your Image” and then on “Continue to next step” (which you’ll see on the next page).
8. The next screen should look like this (but with YOUR own row of icons, obviously):
|Those extra options are unnecessary.|
9. To add each link, select “Rectangle” or “Custom Shape” to highlight the shape of the image you want to link up. The Rectangle‘s definitely the easiest to work with for this purpose, so choose that one!
… And then hit “SAVE.”
11. Repeat steps 9 and 10 for all your icons/links.
12. After you’re all done adding all your links, Click on “Get Your Code.”
13. The next screen can seem overwhelming, but just remember to focus on the TOP of it. Specifically, you want to pick “HTML Code.”
14. Next, either copy the resulting code OR edit your map if necessary.
Now I bet you’re dying to install your gorgeous new widget now, right?! : ) Well, what are you waiting for?!
INSTALLING YOUR WIDGET (Blogger)
ANNNNND YOU’RE FINISHED!
FELICITACIONES! You now have a beautiful, custom, professional-looking, brand-spankin’ new social media widget made by awesome YOU!
Doesn’t it feel wonderful?! :D What did you think? As always, please feel free to ask me any questions below or by contacting me personally.
WHAT IF YOU DON’T WANT TO MAKE YOUR OWN WIDGET?
If you’re NOT in the mood to make your own widget, I’ll be MORE than happy to make it for you! We can discuss this more, obviously, but all I’d ask in return is that you let me advertise my blog on your blog : ). Contact me for more info.
MORE TUTORIALS, POR FAVOR!!!
Hahaha ok, ok! Remember to check out my other Social Media Buttons tutorials (which are here and here). What else would you like to learn about? Simply let me know and I’ll make a tutorial. Until then, feel free to check out more of my blog and even subscribe so you don’t miss these tutorials or any other of my cool posts!
GRACIAS for stopping by, my dears, and I hope you enjoyed and learned a lot from this tutorial. Hasta la vista, baby!