Social Tools, Widgets & Sidebars

Widgets »Social Icons Widget

Many WordPress.com themes offer a dedicated social menu, where you can add links to your social media accounts and they will display as icons on your site.

Even if your theme does have this feature, you might want a different placement for your buttons, or you might want to use different icons that match your header. There are a few different ways to add social icons to your site!

This guide will walk you through how to add social media buttons to your sidebar or footer, using whatever icons you prefer.

If you’d like to add Social Icons elsewhere on your site, we also have a Social Links block that can be added to any page or post using these instructions.

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. Head to My Sites → Design → Customize → Widgets
  2. Select the widget area to which you’d like to add social icons and click Add a Widget.
  3. Find the Social Icons widget and click the title to add it.
    Social Icons Widget - Add WidgetNote: if you’ve installed plugins, you will see (Jetpack) at the end of the Social Icons widget title.
  4. Choose a title for your Widget.
  5. Choose a size for your social icons: Small, Medium, or Large.
    Social Icons Title and Size
  6. Add a full link (URL) to your first social network profile. For example, https://www.facebook.com/WordPresscom/
    Add Social Media URL
  7. If you’d like to add more social icons, click Add an icon and add your next social network profile URL.
  8. When you’ve finished adding your social profile links, click Publish to save your changes.
Publish Social Widget

Your shiny new Social Icons are now on your site!

Social Icons Widget

↑ 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.

Reorder Icons

↑ Table of Contents ↑

Available Icons

We support icons for a variety of networks.

Check here for a list of available icons.

500px

Amazon

Apple

Bandcamp

Behance

CodePen

DeviantArt

Digg

Dribbble

Dropbox

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

Etsy

Facebook

Flickr

Foursquare

Goodreads

Google+

Google

GitHub

Instagram

iTunes

LinkedIn

Medium

Meetup

Pinterest

Pocket

Ravelry

Reddit

RSS feeds

Skype

SlideShare

Snapchat

SoundCloud

Spotify

StumbleUpon

Tumblr

Twitch

Twitter

Vimeo

VK

WordPress

Yelp

YouTube


↑ Table of Contents ↑

Add Custom Social Icons

The color of the social icons on your site is dependent on the theme you are using. If you want to add icons with a specific color or want more control over how the icons appear, you can add custom 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 → 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 SiteSite → 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 → Design → 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 Design → 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