After reading this tutorial, you’ll learn how to add social media icons linking to a specific profile/page or sharing your posts. This tutorial explains how to add icons via widgets or blocks using the same plugin.
All instructions described in this tutorial include screenshots, making it easy for WordPress beginners to follow them. The first section describes adding social icons using widgets, while the second section explains how to add icons using blocks.
How to add social media icons in WordPress using widgets:
Adding social media icons in WordPress is simple as installing and configuring a plugin. I will use a plugin named Social Icons Widget & Block for this tutorial by Wpzoom.
To begin, let’s install the plugin by pressing Plugins on the left menu bar and then Add New (Plugins>Add New) as shown in the screenshot below.
The Add Plugins screen shown in the image below type “social icons” or “Social Icons Widget & Block by Wpzoom.” When available plugins are listed, press the Install Now button for the Social Icons Widget & Block plugin by Wpzoom.
Once installed, enable the plugin by pressing the Activate button.
After the plugin is installed and enabled, you can start configuring it. For this example, we will add social media icons in the footer through a widget provided by the plugin you just installed.
To configure your plugin, press Appearance in the left menu and Customize to configure the widget with a preview (Appearance>Customize).
Find the Widget option in the left menu and press it to display available options on the customization screen, as shown below.
Select the section in which you want to add the Widget containing social media icons. In my case, the only available location to place Widgets is the footer, but you may have other places available. I want to add the icons in the footer in my particular case, as shown below.
Once you choose the section where you want to add the Widget, press the + (plus) button to show available widgets.
To find the widget containing social icons, type “social” and select Social Icons Block.
Once selected, you will see the widget settings for each social media network icon. By default Facebook, Twitter and Instagram are displayed, yet you can press the circled + button to add other social networks.
To define a profile or page URL for each network, press its icon and type it as shown below.
To remove a social network icon, press it and press the Delete Icon button.
Once you added your URLs, removed the unused icons, or added the necessary, press the Publish button to save and apply changes as shown below.
Now you will see your social media icons on the defined location on your website for the widget (In my case, I see them in the footer).
Adding social media icons in WordPress using blocks:
The previous section of this tutorial explains how to add widgets containing your social media icons on WordPress. The current section describes how to add social media icons to WordPress using blocks within the content. You can use this method to add social media icons within pages or post content.
To begin, press Pages or Posts in the left menu, depending on where you want to add the icons. The example below describes adding social media icons to Pages, but the process is the same for posts; press Pages (as shown below) or Posts to show all your pages/posts.
When the list of pages/posts show up, place the mouse pointer over the page/post you want social icons to be added and press the Edit option.
Place the mouse pointer over the post/page body to display the + (plus) symbol to add blocks, as shown in the screenshot below.
Type “social” and press Social Icons Block in the search box.
This step is the same as when configuring social widgets. Press the icon of the social network whose URL you want to edit.
You can press the + (plus) symbol to add other social network icons. Also, you can press a social network icon and the Delete Icon button to remove it.
Once you make all changes, press the Publish button.
There are some settings you can configure for this plugin. To access them, press Settings and then Social Icons Widget (Settings>Social Icons Widget).
You will see 4 top tabs:
- Social Sets: Here, you can disable social icon fonts.
- Optimization: Use rel=”preload” to prevent any flash of unstyled text and improve the PageSpeed score.
- Misc.: Here, you can globally disable and enable social icon blocks or widgets.
- Upload Icons (PRO version): This option, available on the PRO version only, allows you to upload custom social icons.
Other options to add social media icons to WordPress:
There are a lot of available plugins to display social media icons on your website. Among the alternatives, you can find the following:
- Social icons: Social Icons allows you to display various popular social icons through widgets and shortcode easily
- Easy Social Icons: Upload your custom social media icons or select font-awesome. Use a widget or shortcode to place icons on your WordPress site.
- AccessPress Social Icons: Add social media icons on your website, select pre-designed or upload your own.
Conclusion:
As you can see, adding social media icons to a WordPress site is pretty easy. Any WordPress-level user can do it by following the simple steps described above. This tutorial only covered one plugin, but as said at the end, there are many other alternatives, some of which were briefly described previously. If you need to upload custom icons and don’t want to upgrade to PRO, you can check some alternatives like AccessPress Social Icons. I hope all instructions previously explained were helpful.
Thank you for reading this WordPress tutorial. Keep following us for more WordPress tips and tutorials.
