Social Tools, Widgets & Sidebars

Widgets » Social Icons Widget

This guide will walk you through how to add social media buttons to your sidebar or footer so people can connect with you through your preferred social networks.

💡

Along with this option to add a Social Icons Widget, you can also select a theme that has a dedicated social menu, where you can add links to your social media accounts, and they will display as icons on your site. Or, you can use the Social Links block to add links to your social media networks anywhere on your site using these instructions.

Table of Contents


Available Icons

We support icons for a variety of networks.

Click here to expand a list of available icons.

500px

Amazon

Apple

Bandcamp

Behance

CodePen

DeviantArt

Digg

Dribbble

Dropbox

Email addresses (if your email is me@yourgroovydomain.com, type mailto:me@yourgroovydomain.com on the Account URL field)

Etsy

Facebook

Flickr

Foursquare

Goodreads

Google+

Google

GitHub

Instagram

iTunes

LinkedIn

Medium

Meetup

Patreon

Pinterest

Pocket

Ravelry

Reddit

RSS feeds

Skype

SlideShare

Snapchat

SoundCloud

Spotify

StumbleUpon

TikTok

Tumblr

Twitch

Twitter

Vimeo

VK

WordPress

Yelp

YouTube

💡

Don’t see your social network listed in the available icons above?

You can add any other social networks or external platforms using the steps in Add Custom Social Icons below.


↑ Table of Contents ↑

Social Icons Widget

The Social Icons Widget displays small graphics linked to your social media accounts, in any widget area of your theme. After adding links to your social profiles, icons are automatically displayed on your site, letting your visitors connect with you through your preferred networks.

 

↑ Table of Contents ↑

Add the Social Icons Widget

  1. Go to My Site(s) → Appearance → Customize
  2. Click on Widgets and you’ll see the different widget areas your theme supports. Almost all themes will have a Footer widget area at the very least. Some also have sidebar widgets or other widget areas.
  3. Click on an available Widget area; in this example, we’re clicking on the Footer widget area.
  4. Click Add a Widget and search for Social or browse the available widgets to find the Social Icons widget.
the Widget customizer open to the Footer widget area with a box drawn around the Add a Widget button and an arrow pointing to the Social Icons widget.
Note: if you’ve installed plugins, you will see (Jetpack) at the end of the Social Icons widget title.
  1. Click on the widget to add it to your Widget area.
  2. Customize the different display options, including the title of the widget and the size of the icons.
the Social Icons widget with "Follow Us" in the Title field, and the Size set to Medium in the dropdown.
  1. Add the link to your first social network profile. For example, https://www.facebook.com/WordPresscom

📌

Make sure to add the entire link, including the https:// portion of the site address.

a box drawn around the field to add the social network you want to link to.
  1. Click the Add an icon option to add more social icons to your widget.
a Social Icons widget with the title of "Follow Us" and a icon size of medium, with different examples of social network links you can add.
Click the Add an Icon button to add another social icon

⚠️

Each link you add to the Social Icons widget will automatically display as that social network’s icon in the preview in the Customizer.

If you do not see the appropriate social network icon, check to make sure you’ve entered the correct link to your social network, including the https:// portion of the address.

When you’re finished adding your social profile links, click Publish, or Save Changes, to add the Social Icons widget to your site.

a box drawn around the Publish icon in the Widget Customizer.

Your shiny new Social Icons are now on your site!

Follow Us header with social icons below it.

↑ Table of Contents ↑

Reorder the Icons

You can change the order of your icons anytime by dragging and dropping them into your desired sequence. Your new order will be reflected live in the Customizer’s preview pane.

an animation displaying the ability to drag different social icons to a different order in the widget customizer.

↑ Table of Contents ↑

Customize the Social Icons

If you want to make changes to how the icons appear, such as the position, alignment, or size, you can use Custom CSS available on the WordPress.com Premium plan or higher. The color of the social icons on your site is dependent on the theme you are using, but this can also be changed with CSS.

Add Custom Social Icons

If you want to add icons with a specific color or want more control over how the icons appear, you can add your own icons using the Text Widget or a Custom HTML Widget and a bit of HTML. This is also helpful if you want to add icons for less popular social networks.

Step 1. Find some social media icons that you like, and upload them to your Media Library.

You might already have some icons you would like to use, but if not you can Google “free social media icons.” When choosing images, be careful to not violate any copyright. Once you’ve found some that you like, download them to your computer.

Upload the Icon to your Media Gallery

  1. Go to My Site → MediaAdd New
  2. Navigate to the location on your computer where you saved the images you want to use as icons
  3. Upload the icons to your Media Gallery

Get the Link to your Social Media Icon

  1. Go to My Site Media.
  2. Click on the image of your uploaded social icon and click Edit.
  3. Under the URL option, click Copy to save the link to your computer’s clipboard.
  4. Click Done to exit the media editor.
Social Icons - Finding URL of Image for custom icons

Step 2. Add a Text widget or Custom HTML widget and format your buttons using HTML.

Add the Custom Social Icon Widget

Make sure you have the link to the social media icon you uploaded using the steps above under Get the Link to your Social Media Icon.

  1. Go to My Sites → Appearance → CustomizeWidgets.
  2. Select the widget area where you’d like your icons to appear.
  3. Click Add a Widget and locate the Text Widget or Custom HTML Widget
  4. Click the Widget name to add the widget.

Add the Custom Social Icon Widget HTML

Add a title to your widget if you like, and then add HTML to your widget following the structure below:

<div>
<a href="https://facebook.com/WordPresscom">
<img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook1.png" width="35" height="35">
</a>
</div>

Repeat the HTML code in the existing Text or HTML widget for each icon that you want to appear on your site.

Step 3. Once you are finished, click Publish and check out your pretty new social media buttons!

Example of Social Icons Widget

↑ Table of Contents ↑

Examples and Sample Images

If you are having trouble finding social media icons on the web and would like some examples to use, you can find more on this site.

To use these icons in your widget first, create a blank Text Widget from Appearance → Customize → Widgets.

Next, copy the block of code from the Social Media Widgets page for the icon style that you prefer:

Social Icons Source Code Example

↑ Table of Contents ↑

Frequently Asked Questions

Why doesn’t the social media icon display?

If you are using a localized version of your social media page’s address, the social media icons may not appear. Instead, try replacing the local section of your social media link with the global version.

Example: https://www.pinterest.fr/yourpinterest/ should be replaced with https://www.pinterest.com/yourpinterest/

Was this guide helpful?

Not quite what you're looking for?

Get Help