Support

Blocks

Blocks »Social Links Block

The Social links block allows you to add social media icons to any page or post to direct people to your social media profiles.

Here’s an example:

  1. Insert the Social Links Block
  2. Add Your Social Profiles
  3. Add New Icons
  4. List of Supported Icons
  5. Remove an icon
  6. Block Settings
  7. Advanced

Detailed instructions on adding blocks can be found here.

You can add the Social links block by selecting it from the Add Block button. Alternatively, you can type /social on a new line and press enter:

Gif: On a new line in the WordPress editor, type /social and press enter to insert a Social Links block.

↑ Table of Contents ↑

Add Your Social Profiles

The block comes with a few pre-added social icons that you can keep or remove as you prefer.

To link an existing icon to your social media account, click that icon. The address field will appear, allowing you to insert the link to your social profile. Click the arrow button to save:

Gif: Click on an icon to edit it.
Editing a social icon to turn it into a link.

↑ Table of Contents ↑

Add New Icons

Click the + Add Icon button to the right of the current icons. This will open a list of all the available icons for you to select the one you want.

Gif: Click the Add Icon button to open the list of available social icons.
Adding a new icon.

You can also use the search bar to find an icon:

Image: Highlighting the search bar at the top of the available social media icons list.
The search bar to find social media icons

If the icon you want isn’t there, there’s a generic link button that can be used instead:

Image: Highlighting the generic Link option.
The generic Link icon

↑ Table of Contents ↑

List of Supported Icons

The following icons are available to use:

  • 500px
  • Apple
  • Bandcamp
  • Behance
  • CodePen
  • DeviantArt
  • Dribbble
  • Dropbox
  • Etsy
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Goodreads
  • Google
  • Instagram
  • Last.fm
  • LinkedIn
  • Email (mailto: links)
  • Mastodon
  • Meetup
  • Medium
  • Pinterest
  • Pocket
  • Reddit
  • RSS Feed (URLs with /feed/)
  • Skype
  • Snapchat
  • Soundcloud
  • Spotify
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • VK
  • WordPress
  • Yelp
  • YouTube

↑ Table of Contents ↑

Remove an icon

To remove an icon, click on it to bring up its individual toolbar. Click the ellipsis (three-dots) button for that icon and select Remove Block:

Gif: Click the ellipsis (three-dot) button above an individual icon to reach the Delete Block option for that icon.
Removing a social media icon

↑ Table of Contents ↑

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click the ‘cog’ icon next to the Publish button.

In the block settings, you can choose from three different styles for your icons:

  • Default
  • Logos Only
  • Pill Shape
Image: Block Settings for Social Links block.
Block settings

↑ Table of Contents ↑

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Each social media icon can also have its own individual class. Add a class to an icon by selecting it, and modifying the Additional CSS Class field for that icon:

Image: Additional CSS Class field for individual icon
CSS class field for an individual icon

Versatile plans and pricing

  • Free

    Best for students

  • Personal

    Best for hobbyists

  • Premium

    Best for freelancers

  • Business

    Best for small businesses

Choose a plan

Not quite what you're looking for?

Get Help