Social media is a great way to stay connected with clients and colleagues. Adding social media icons to your website makes it easier for people to follow you on Twitter, Facebook, Pinterest and Instagram
WordPress Social Media Plugins
WordPress makes it super easy to add social media icons to your website without having to upload images or add code. Here are my favorite social media plugins.
This is made by the same people who make the Genesis framework*. The plugin loads lightning fast and has options to set the color and shape of the social media icons. Social media icons can be displayed in any widget area on your website.
The one drawback is that you can’t add new icons or change the order in which they appear. Well, you can, but it requires some custom coding.
This works similarly to the Simple Social Icons plugin, except that it has more built-in customization options. In addition to changing the icon colors, you can also change their order in the widget settings. No code required.
Manually Adding Social Media Icon Images
With the availability of font icons and plugins, there’s hardly any need to use images for social media icons these days. But here are instructions just in case you want to go the old-fashioned route.
The general process goes a little something like this:
- Upload the social media icon images to your server.
- Add the social media icon images to your website pages with HTML.
- Turn those images into links with HTML.
Note: This blog is solely about self-hosted WordPress websites, so these instructions are specifically for WordPress. While the basic instructions apply to any website, I’m not going to provide detailed instructions for Blogger or other types of websites.
1. Upload the social media icon images to your server.
- Go to Media > Add New in your WordPress Dashboard.
- Upload the images to your media library.
2. Add the social media icon images to your website pages.
- Go to Appearance > Widgets in your WordPress Dashboard.
- Add a text widget to a widget area.
- Add the following HTML code to the text widget to place an image in the text widget.
Note: Replace the image URL with the actual URL to the social media icon image you uploaded to your media library. You can find it by going to Media, clicking on the image and copying it from the URL field.
3. Turn the image into a link with HTML.
Now you need to add a bit more HTML to turn the image in into a link.
Add the following before the image, replacing the URL with the actual URL to your social media profile.
Add the following after the image:
Your final code should look something like this:
<a href="http://www.twitter.com/"><img src="http://www.yourwebsite.com/wp-content/uploads/2015/12/image-name.png"></a>
Social Media Icon Sets
If you want to manually create social media icons, you’re going to need images to upload. Here are some social media icon sets that you can manually upload to your website: