Adding social media icons is a great way to enhance blog’s share-ability and accessibility. Following are two different ways of performing this task – one is through the inbuilt “Text” widget, while another is via a simple plugin named “Menu Social Icons”.
This post mainly introduces adding social media icons inside WordPress footer and navigation menus. Note that, a large number of WordPress themes support this social functionality, but you’re allowed to use a different replacement or icon to fit WordPress header.
Approach 1 > Add Social Media Icons Manually
It’s pretty simple to display sharing buttons onto your WordPress footer using a few of HTML code and a Text widget. As shown, the whole process only takes two simple steps:
Search and Upload Your Icon Images
You might have several icons to be used, but you can still search “free social icons” within Google chrome. There will be all kinds of results, but be sure that you won’t violate any copyright. If done with that selection, just save them to the local computer.
After that, log onto your WordPress dashboard and go directly to “Media” tab and click “Add New”. Drag and drop all your icon images into this browser uploader.
Create a New Text Widget and Style It
Next, navigate to “Appearance” and click “Widgets” so as to locate this “Text” widget. As usual, drag it to the right-hand “Footer” widget area. From here, give it a title and embed some HTML code as below:
<div> <a href="[Entire Link to Facebook]"><img src="[image URL of Your Facebook icon]" title="Facebook" alt="Facebook" width="48" height="48" /></a> <a href="[Entire Link to Twitter]"><img src="[image URL of Your Twitter icon]" title="Twitter" alt="Twitter" width="48" height="48" /></a> <a href="[Entire Link to LinkedIn]"><img src="[image URL of Your LinkedIn icon]" title="LinkedIn" alt="LinkedIn" width="48" height="48" /></a> <a href="[Entire Link to RSS feed]"><img src="[image URL of Your RSS icon]" title="RSS" alt="RSS" width="48" height="48" /></a> <a href="mailto:[email address]"><img src="[image URL of Your Email icon]" title="Email" alt="Email" width="48" height="48" /></a> </div>
Replace the “Image URL” with your own information, but keep the quotation marks to the defaults. As for the “Entire Link”, just use the link of your sharing button. Be sure that each link starts with https:// or http://.
Note: The mentioned “Image URL” can be found within your media library. Taking the example of Facebook icon here, you can click “Edit” button and paste its “File URL” as follows.
If you wish to display those buttons, simply edit the above code. Also, you might want to tweak the height and width variables that are 48×48 in our example. Just change that to your liking and the “Text” widget would look like this:
Approach 2 > Add Social Sharing Buttons with a Plugin
This method relies on this simple plugin – Menu Social Icons. It supports over 30 popular social networking websites and also comes free of cost through the following URL. Note that, WordPress 3.4v or a higher version is required.
Download URL: https://wordpress.org/plugins/menu-social-icons/
Select Preferred Social Media Icons
To install and activate this “Menu Social Icons” plugin, you can use three different methods documented in this plugin installation guide. Upon activation, move to “Appearance” and click “Widgets” in order to select preferred icon images. Make a hit on this “create a new menu” link and name this menu like “Social Media Menu”.
Hit the left-side “Links” tab and many different social media icons will show up beneath the “Link Text” area. Then, click an icon and add social profile URL of your own. If done, click “Add to Menu” to take effect. Just repeat this process for each social media profile.
Note: Meanwhile, you still need to select a menu location. As shown, there are several menu locations, and these icons will be displayed in sidebar if you don’t choose any menu locations.
Add Your Custom Menu to WordPress Sidebar
Go back to “Appearance” > “Widgets” to display your custom menu within WordPress sidebar or other widget-enabled area. Drag it from right to the left side and then enter a title. Be sure to select the above “Social Media Menu” before clicking “Save” button.
Use More FontAwesome Icons (Optional)
The good thing of this “Menu Social Icons” plugin is that it comes with many FontAwesome icons. That is, you can find more beautiful icons in the FontAwesome Library, but only selected ones will be loaded in WordPress menus. Assuming that you prefer to add an RSS icon, just add those code snippets suggested by this plugin developer to the functions.php file.
For other icons, this /feed should be replaced with the specific URL of your social network. Also, this rss should be changed to the icon name that you want to add.
Add Personalized Icon Images
This requires you to enable this Menu Image plugin within dashboard. After activation, go to “Appearance” > “Menus” and you will see menu image “Upload Button”, “Size” and “Position” below the menu item.