How to Add Social Media Icons in WordPress Using a Widget, Gutenberg Block, and Plugin

Social media is important to market your business and increase brand awareness. It also provides opportunities to engage with your customers and build a social network.

Showing social media links on your website drives traffic to your social media profiles. You can add social icons anywhere on your WordPress website to catch visitors’ attention. Fortunately, these icons don’t occupy much of the site’s space.

There are various methods to add social media icons in WordPress. This article will discuss how to add social media icons to WordPress using a widget, a Gutenberg block, and a plugin.

Why You Should Have Social Icons in WordPress

Social media platforms let you connect with your audience and spread brand awareness.

From the customer’s perspective, a business’s social media accounts are convenient channels for product news and updates.

Therefore, inviting visitors to your social media profiles through social icons on your WordPress site is important. Social media icons are better than plain links because they use recognizable images to catch visitors’ attention.

You can also add call-to-action text around the social media icons like follow us, or find us at to encourage visitors to click the buttons and increase their engagement.

3 Methods to Add Social Media Icons to WordPress

There are three methods to add social media icons to your WordPress website – using a widget, a Gutenberg block, and a plugin.

The Gutenberg block and WordPress plugin methods are more beginner-friendly as they require no coding skills. Meanwhile, the WordPress widget method involves more steps, but it gives you more flexibility and freedom to choose the icons.

The following is the step-by-step guide for adding WordPress social media icons.

How to Add Social Media Icons Using a WordPress Widget

Adding social media icons to WordPress using a widget is the more advanced method that requires code editing. However, this method gives you more flexibility. You can use the icons as you see fit and place them in the sidebar or footer widgets.

Note that this method works best with classic WordPress themes. If you use a block theme, skip to the next method to add icons using the WordPress social icons block.

This method requires you to find icons to upload to your WordPress site and set them as social media buttons. Follow these steps to do so:

1. Find and download a social media icon. Use websites like Iconfinder or Font Awesome Icons to find free-to-use icons to download.

If you use Google image search to find an icon, filter it by navigating to Tools → Usage rights → Creative Commons licenses to avoid copyright issues.

2. Download the icons you want to use to your local computer.
3. Open your WordPress dashboard.
4. Go to Media → Add New and upload the social icons to the WordPress media library. Feel free to upload multiple images at once.
5. Open the widget editor by navigating to Appearance → Widgets.
6. Open the widget area where you want to add the social icons.
7. Add the Custom HTML block by clicking the Add block (+) button where you want to place them.

8. To add Instagram, Facebook, and YouTube social icons, copy and paste the following HTML code:

<div><a href="http://instagram.com/username"><img style="margin:5px" src="[path to your icon]" width="30" height="30" alt="Instagram"></a><a href="http://facebook.com/username"><img style="margin:5px" src="[path to your icon]" width="30" height="30" alt="Facebook"></a><a href="http://youtube.com/user/username" ><img style="margin:5px" src="[path to your icon]" width="30" height="30" alt="YouTube"></a></div>

Replace [username] with the link to your social media profile.

Replace [path to your icon] in the code snippet with the image URL. To find it, go to Media -> Library and open the icon. You should see the File URL field and Copy URL to clipboard to fetch the URL easily. Be sure to place the correct URL for each social media button in the code snippet.

9. Click Update to save the changes.

To add more social accounts, enter <a href=”[social media profile URL]”><img style=”margin:5px” src=”[path to your icon]” width=”30″ height=”30″ alt=”[Name of the social media platform]”></a> to the code snippet after the last </a> tag.

Now, visit your website. You should see the social icons in the widget area. Test them to see if they direct to the correct social media pages.

Another benefit of using the social icons widget is that it will remain on your site when switching to a different theme. If you use the alternative methods, you may have to reconfigure the social icons after switching themes.

How to Add Social Media Icons Using the Social Icons Block

WordPress has a social icons block that lets you add social media icons to WordPress with just a few clicks, especially if you’re using a WordPress block theme. Here is how to add social media icons in the WordPress footer using the Gutenberg editor and social icons block.

1. Navigate to Appearance → Editor.
2. Click the arrow at the top-center of the editor to open the template details drop-down menu. Select Footer.

3. Click the Add block icon in the footer area to open the block inserter. Search for the social icons block and select it.

4. Click the plus icon to add a social icon. Search for the social platform you want to add, and it will add the correct icon automatically.

5. Click the social icon to open the URL field. Copy and paste your social media page URL to the field and press Enter.

Repeat steps 4 and 5 to add new icons for other social platforms.

You can add the social icons block anywhere on your website, such as on the sidebar, header, or in the content body. Using the social icons block also lets you set the social links to open in a new tab.

How to Add Social Media Icons Using a WordPress Plugin

There are plenty of WordPress social media plugins that let you add various social icons to your site.

Every plugin has a different way of adding icons to a WordPress site. In this article, we’ll use the Social Media Share Buttons and Social Sharing Icons free plugin. It’s one of the best and most popular social icons plugins.

The first step is to install the plugin. You can do this from your WordPress dashboard by navigating to Plugins → Add New, then searching for the Social Media Share Buttons and Social Sharing Icons plugin. Once you’ve found it, click Install and then Activate.

To configure the social icons, head to the plugin’s settings page from the WordPress sidebar. Next, follow these steps:

1. Open the Which icons do you want to show on your site? menu to see all the available icons.
2. Select the social media icons that you want to add. Click Save to apply the changes.

3. Open the What do you want the icons to do? menu and configure what each button does.
4. If you want the buttons to direct users to your social media accounts, check the Visit me option and paste your account URL. Click Save to apply the changes.

5. Open the Where shall they be displayed? menu and select the placement options. Click Save to save changes.

The Social Media Share Buttons & Social Sharing Icons plugin also lets you customize the appearance of the icons from the settings page.

For example, you can choose the icon design in the What design & animation do you want to give your icons? accordion menu. You can also change image size and icon spacing in the Any other wishes for your main icons? menu.

How to Remove Social Media Icons

Having social icons in WordPress is great, but there may be cases when you need to remove them.

For example, you want to redesign the website layout, which may involve removing the existing social media icons. Or, there may be an issue with your social media account, and you want to stop linking it to your website until it’s fixed.

If you added the social icons in a widget area, follow these steps to remove them:

1. Open the widget editor by navigating to Appearance → Widgets.
2. Find and select the Custom HTML block containing the social icons’ code.
3. Click the three dots icon on the block toolbar, and choose Remove Custom HTML.

A similar method applies if you want to remove the icons you added using the Gutenberg editor:

1. Go to Appearance → Editor to open the block editor.
2. Find the social icon block you wish to remove.
3. Click the three dots icon on the block toolbar, then click Remove Social Icons.

If you use a plugin for your social media icons, deactivating the plugin will remove them. Alternatively, disable the icons from the plugin settings.

For example, for the Social Media Share Buttons and Social Sharing Icons plugin, uncheck the options in the Where shall they be displayed? section.

Conclusion

Adding social media icons to your WordPress site is a great way to invite visitors to your social media profiles and increase brand visibility. Social icons can easily catch visitors’ attention thanks to the recognizable images and placement on your site.

Choose one of three available methods to add social media icons to WordPress:

• Use a WordPress widget and a custom HTML code. This method provides the most flexibility. You can choose whatever icons you want and configure their appearances. However, it requires a basic understanding of HTML.
• Use a Gutenberg block. The easiest way to display social media icons without coding or a plugin. This method is best for block-based WordPress themes.
• Use a WordPress social media plugin. A robust social media plugin lets you add social links easily and provides many configuration options.

When adding social media icons, remember to represent all social media profiles that you have. This way, visitors will have more options to choose the channel they use the most.

If you have any questions or tips regarding social media icons for WordPress, feel free to leave them in the comments section.