Something every decent blog needs are custom social media icons. At least if you ask me. I dreamed about having beautiful floating social media buttons but wasn’t sure how to get them to my blog when I have no idea about techy stuff (and no budget to hire out)! Guess what? I have figured it out. Learn how you can easily add floating social sharing buttons to your WordPress blog! And best of all: It’s very easy to set up. All you need is a free plugin.
If you want it customized, no problem. Use custom social media icons that perfectly match your blog design.
Let’s go through the set-up step by step. No worries, it’s really easy! (And yet impressive when done!) Here we go!
Please mind that I no longer use the AddToAny Share buttons! This is why my sharing buttons now look different from those in this post!
Why you want Custom Social Sharing Icons
Make it easy to share your well-crafted content, on desktop and mobile. Buttons that come down when scrolling will definitely help with that. There is no searching for sharing options. The buttons will be there. Because nobody will spend a lot of time searching for those things. They want to click on them right away. Period. Else, people might just leave without sharing and you surely don’t want that. Or you have your awesome post sent to sleep in the bookmarks of somebody’s browser. No, no, sharing you want. And ideally in an eye-pleasing way with custom social media icons.
But let’s start at the beginning.
The foundation: AddtoAny Sharing Plugin
This is the plugin I use and I love it. It’s not only free but also super easy to use and customize. It has no advertisement/logo of the developer or something like that anywhere. Also, people who read my blog cannot just click and hide my beautiful floating sharing buttons away. It looks super professional to me. You can choose from 100+ sharing platforms and even use your own custom-made buttons. In addition, you can choose to show a counter for shares (which I don’t use). The plugin comes with Social Follow buttons that you can place in any widget area of your blog. And did I mention, it is free! 😉
You can read more about the plugin and how to install it on WordPress here. (It works for any website, though. For other systems check Addtoany.com)
Basic Setup in a few seconds
Choose your social media platforms
You can make this plugin work on your WordPress blog literally in seconds. After activating the plugin you just choose the platforms you want in the settings. If you want you can change the size of the buttons or add a counter by check-marking the “Show count” box. This is actually all you have to. The only additional step is to tell the plugin where to place the social media icons. (See below, “Placements”)
Use Floating Social Sharing Buttons – if you want
Click over to floating. I basically use the default settings there and just tweaked the position, offset and icon size a little bit. Those buttons are set to be mobile responsive by default so they will display vertically on a desktop screen and horizontally (and smaller) on a cell phone screen. You can make your own adjustments here but you don’t have to. If you don’t want floating social media icons you disable them in the floating section by clicking “none”.
Adjust size and positioning
Go back to the standalone section. If you want you can change the size and exact positioning of the buttons in the settings.
The default setup looks basically like this with a floating sharing bar on the left and buttons at the top of the post.
Configure the universal button and menu
Additional sharing options will be displayed if you hover over the universal button. However, you can make that open upon click or change the menu colors if you want. Also, you can use your own universal button. But you don’t have to change anything here.
Placement: Tell AddtoAny where to place social media icons
In the “placement” section you choose where to display the buttons. You can tell the plugin where to place the social media buttons of your choice: at the top of pages or posts, at the bottom of posts, etc. I use floating buttons docked left and buttons at the top of posts. (While I have the Jetpack Sharing buttons at the bottom of posts because this works better with my theme.)
However, you can not display a different selection of buttons at different places. It will always be the same selection of buttons wherever you place them. This is the downside of this plugin.
Level up with custom social media icons matching your brand
I first used it with the default buttons that come with the plugin. I didn’t think of customizing it at first because I felt like I was not tech-savvy enough. Then I just played around with the settings one day and found out that I only needed to get custom social media icons, upload them, and then check mark the box on top in the “Advanced settings” section. Say what? Of course, I would do that!
Don’t worry. This is easy to do and I will walk you through this step by step. Let’s start with getting beautiful custom social sharing buttons that match your design.
So, now, where the heck do I get those custom social media icons?!
Get beautiful custom social sharing buttons
There are two ways to get them. The first option, if you have a lot of time and some artistic skills, is to go to a graphic design application of your choice, e.g. canva.com, and create all the buttons you need and save them in PNG format.
Now, the easy way. My way. Browse Pinterest. No kidding. A lot of people create stunning design elements for bloggers and give them away for free! When I decided to get custom social sharing buttons I was overwhelmed with the choices that I found. It was really not easy to choose the right custom social media icons. I would say that you should be able to find whatever matches your branding or color scheme. Sometimes you have to opt-in before you can download the files.
Of course, you can also purchase social media icons from designers. They are not very expensive if you look at places like Etsy or Creative Market.
Make sure you pick PNG files!
If you haven’t already, decide on a beautiful color scheme that you use throughout your WordPress blog. You can easily come up with a color palette using this guide.
I decided to use these free hexagon sharing buttons by Blogtacular. They come in many different colors, four sizes, and you can directly download zipped PNG-files, no opt-in required. After the download is complete, unzip the files.
Re-Name your Custom Social Media Icons
Next, you have to change their names to match the specification of AddtoAny.
No caps! I tried to set them up with Facebook.png as a filename and this did not work! They have to match exactly.
Then, go to >Media >Library in your WordPress dashboard. Press “Add new” and upload all the files you need for your social media handles. Make sure there is no additional ending added to your file that makes you end up with file names like “facebook.png.png”. If that happens you have to upload them again as “facebook”. Check if the file names in your Media library are as indicated above.
Mind that your Media Library does has subfolders that you can’t easily see, unfortunately. To know in which directory exactly your files are, click on one and copy the URL.
It looks something like this: https://www.YOURBLOGURL.com/wp-content/uploads/2017/06/pinterest.png
Make AddToAny Your AddToAny
Now, go back to >Plugins>Addtoany>Settings. Open the section “Advanced Options“. Yes, you are an advanced user now. 😉
Enter the URL you just copied and then delete the last part, e.g. “pinterest.png” or whatever one you picked.
You will end up with something like: https://www.YOURBLOGURL.com/wp-content/uploads/2017/06/
This is telling the plugin where to look for the files to display custom buttons. All your buttons have to be in that directory. If you want to add or replace a button image later you will have to go through this all over again.
Press “Save Changes”
Here is what the AddToAny floating buttons looked on my blog when I used them:
Voilà! Well, done, blog designer! You should now have custom social sharing buttons.
Social Follow Buttons Widget
You have the option to use the AddtoAny widget to display Social Follow Buttons in widget areas of your blog. You will find the AddtoAny Follow widget in your selection of widgets after you activated the plugin. Drag the widget into a widget area, add the social media URLs you want to display, and press save.
Here is what the AddToAny follow buttons may look like. This example is from my blog’s footer. The widget will pull the same custom social media icons as Follow buttons that you chose for your social sharing buttons.
So, I hope this worked out just fine and you have added a piece of custom brand design to your awesome blog! Without knowing the details of techy stuff and without hiring out! Let me know how you made custom social media icons work for you, please, and share this one here on Pinterest! Thank you and have fun blogging!
Please, subscribe to get access to free printables, worksheets, and more in the subscriber exclusive library!