Social media should be a critical part of your website in that you can share your website articles with your followers and interact with them through your social media channels. You should consider putting social media icons on your website so visitors can learn more about you and follow, like or friend you on these social media outlets.
It is simple to add social media icons with a plugin. But this tutorial will show you how to add social media icons the customized way. Adding these icons in this way is critical if you are creating your own icons for your website. Plus, customizing your website without using a plugin is a satisfying experience!
Step 1 Getting Social Media Sharing Icons
There are 3 options for getting social media icons. The first is to create your own. You can do this by going to sites like, Goodies to find the logos directly from the company. Read the terms of service on how you can and cannot use their logos. Now that you have the official logo, you can create your own dimensions, background and more. Get creative and match the icon to your website style. This is where you get to show off your creativity!
The second way is to find free social media icons. There are plenty of places that give away these icons for free for your website or blog, but always read the terms of service since many of these free icons giveaways are only for use on personal blogs.
The third place to find great social media icons are websites that sell premium icons. The benefit of purchasing your social media icons is that you are using a premium icon set. Premium icon sets not only look great and it will save you a lot of time from creating them yourself. If you want your website to stand apart from others, spend a little money and buy premium icons, rather than finding the free icon sets that everyone else is using.
Step 2 Determine the Size of Your Sidebar
It is important to know the size of your sidebar so you aren't adding social media sharing buttons that are too large for your needs. If your sidebar is only 300px wide, it doesn't make sense to add icons that are 512px. The best way to do this is by using a measuring extension for your browser.
Once you know the size of your sidebar, you can calculate the number of social media sharing icons and determine how large each one of them needs to be in order to fit.
Step 3 Saving as a .PNG or .JPG File
You may have to use a photo editor to save the icon for the web. It's important that if your icon has any transparency, that you export it as a .PNG file. If your icon does not have any transparency, you can use a .JPG file.
Step 4 Upload the Icons to Your Website
Create a new blog post and upload your social media sharing icons using the media uploader. Yes, it really is that simple!
Step 5 Add Links to Each Icon
Once your icons are added to your blog post, it's critical that you assign an external website link to each icon. Click the, "insert/edit link" button, to add links to each of your social media sharing buttons. This will make each icon, "clickable", and once clicked will take the visitor to your social media pages where they can learn more about you and follow you.
Step 6 Copy the HTML Code for These Icons
Many people never stray from the visual editor within WordPress, but you may quickly find that it's easy to customize your website once you know a little HTML. Select the "HTML" tab in your post editor. Copy ALL the code that is associated with these social media icons. Feel free to save it to a text editor so you don't lose the HTML code.
Step 7 Create a Sidebar Widget and Paste Your HTML Code
This is the final step to the process. Simply drag a new widget, titled, "Text or Arbitrary HTML" to the sidebar of your choice. Then, paste in the HTML code into the text widget. Lastly, click the "save" button to save your changes.
That's it! All your hard work is done. Your website will stand out from all the others now that you have your own custom social media icons on your website. Now you can promote your social media channel through your website and let the traffic from one direct traffic to the other.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post