Social Tools, Widgets & Sidebars

Widgets »Social Icons Widget

Many WordPress.com themes offer social media buttons in the header or footer area, but others do not. 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.

Table of Contents

Social Icons Widget
Add the Social Icons Widget
Reorder the Icons
Available Icons
Add Custom Social Icons
Examples & Sample Images
Frequently Asked Questions


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 (Jetpack) widget and click the title to add it.
  4. Choose a title for your Widget.
  5. Choose a size for your social icons: Small, Medium, or Large.
  6. Add a full link (URL) to your first social network profile. For example, https://www.facebook.com/WordPresscom/
  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.

Your shiny new Social Icons are now on your site!


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


↑ 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

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.

Then, go to My Site → Site → Media → Add New then upload all of the icons to your site.

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

Go to My Sites → Design → CustomizeWidgets Select the widget area to which you’d like to add social icons and click Add a Widget. Find the Text Widget and click Add.

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

<a href="[full link to your Social Media Account]">
<img src="" alt="[Social Account]" width="35" height="35"></a>
</div></pre>

Replace the bracketed bits with your specific information. Remove the brackets themselves, but leave the quotation marks and everything else. For the full links, paste the link that you want the button to point to. Make sure each link begins with http:// or https://. For example, for your Twitter page, the link would be:

https://twitter.com/mytwitterhandle

For the image URLs, find the Social Icon in your Media Library by going to My SiteSite → Media and then click on the image of your social icon and choose Edit. Then click Copy to save the URL and choose Back or Done to exit the image.

Repeat the code for links and image URLs for each social icon you want to add. If you’d like to add or remove services or display them in a different order, you can edit the code as necessary. You might need to tinker with the width and height values to make all of your icons display neatly in your sidebar. We’ve provided 35×35 above as an example, but you can replace that with any values you like.

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

wordpress-follow-social-buttons

↑ Table of Contents ↑

Examples & 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:

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

Not quite what you're looking for?

Get Help