Skip to content Skip to main navigation Skip to footer

How to Add Social Media Icons to WordPress

Social media is an integral part of your digital strategy. You must align social media strategy and your website content together to create a comprehensive online presence for your brand. In this article, we will explain how to add social media icons to WordPress.

If your WordPress theme has an option to add social media profiles you could use that. However, not all themes have this feature built-in. For example, the theme that we are using for this guide, the default Twenty Twenty theme does not offer built-in social media widgets. We will use a plugin to do this for us.

We will be using the Jetpack plugin to add social media icons to WordPress. You will get both social media profile icons and social share icons from the same plugin. Let us start with social media profile icons.

Add Social Media Icons to WordPress

We add social media icons to WordPress sites to encourage users to visit and engage with our social media accounts. For example, we would want visitors to look at our Instagram profile and follow us. We add social media profile icons to our website to facilitate this.

Where Should You Add Social Media Profile Icons?

This is a design decision and depends on your current theme. You can add social media icons to WordPress using any widget area available with your theme. For example, if your theme has a widget area next to the header, you can place your social media icons there.

Other locations you can use include, but not limited to:

  • Sidebar widgets
  • Footer widgets
  • After article contents.

Add Social Media Profile Icons Without a Plugin

You can manually add social media icons to your website using HTML code. To do this, find the official icons for the service that you want to use and upload it to your Media Library. For example, you can download the Facebook icon here.

  1. Download official social media icons.
  2. Upload it to from your WordPress admin dashboard Media > Add New.
  3. Open the image in the Media Library and copy the direct link.
  4. Go to Appearance > Widgets.
  5. Add a Custom HTML widget to the widget area where you want to add social media icons.


  6. Use the sample HTML code below to customize and create your own HTML.
  7. Insert the HTML code to use an image as a link.
  8. Save the widget.
  9. Refresh the site and check new social media icons
<a href="web address like address of facebook page ,twitter etc">
<img border="0" alt="alternet text" src="[Paste SM Icon Direct Link here]" width="100" height="100">
</a>

Add Social Media Icons Using Jetpack Plugin

To set this up using the Jetpack plugin, first install and activate the Jetpack plugin. You can go to your WordPress admin dashboard > Plugins > Add new plugin and search for Jetpack.

Jetpack plugin

Click Jetpack > Dashboard and you’ll be asked to log into wordpress.com to create an account.

Enable extra widgets

Jetpack comes with a bunch of widgets by default. However, there are a few more widgets that you can enable. Social media icons are among them.

  1. Goto WordPress Admin Dashboard > Jetpack > Settings.
  2. Click the Writing tab.jetpack-settings-writting
  3. Scroll down to the Widgets section. Slide and enable “Make extra widgets available for use on your site including subscription forms and Twitter streams”

Add the widget to the sidebar

The next step is to add the social media icons widget to a sidebar. Go to Appearance > Widgets. Add the Social Icons widget to your sidebar.‌

Social Icons widget

Click the Dropdown icon.

add social media icons to WordPress
Configure Social Icons widget
  1. In the Title field, enter a title for your widget. For example: Follow Us on Social Media.
  2. From the Size dropdown, select the size of the icon. You can choose from Small, Medium, and Large.
  3. Click Add an icon button to add a new social media profile. You will just need to add the URL and the widget will take care of the rest. Here is an example of the Twitter profile.‌
  4. Continue adding more profiles using the Add an icon button.
  5. Click Remove to remove a profile that you added.
  6. Click Save to apply the changes. Your social media profile icons should be available on the website now

As an example, here is what we added on the widget:‌

Adding new profiles to the widget

Here is the widget appearing on the site:‌

Preview social widget

This completes adding social media profiles to your site. Let us now look at adding sharing buttons to your posts and pages.

Social media sharing icons

Social media sharing icons are usually added to individual posts and pages. These icons allow your visitors to easily share the content on their social media profiles.

You can use the Jetpack plugin to add social media sharing icons as well. To do this:

  1. From your WordPress admin dashboard, click Jetpack > Settings.
  2. Click the Sharing tab.‌

Regarding the activity, Image should cover all the aspects or related area.

Select the Sharing tab

3. Under Sharing buttons, enable Add sharing buttons to your posts and pages.‌

Enable sharing buttons to posts and pages

4. Click Configure your sharing buttons.‌

Click Configure your sharing buttons

5. Click Edit sharing buttons to add or remove social media icons.‌

Edit to add or remove sharing buttons

6. Click any disabled icons to enable them, and any active icons to disable them.‌

Click to enable or disable services

7. You can drag and drop icons to change their order.

8. Choose a button style from the available options.‌

Select the button style

9. Click Save changes.‌

Click Save changes

10. Under Options, choose pages that you want sharing buttons to appear. ‌

Where do you want sharing buttons to display?

11. Enter your Twitter handle Twitter username  field. This will be included in tweets when people share using the Twitter button.‌

Enter your Twitter username here

12. Click Save changes.

You now have social media sharing icons on your posts, pages and any other selected sections.

Was This Article Helpful?

0
0 Comments

There are no comments yet

Leave a comment

Your email address will not be published. Required fields are marked *