How to Use the WordPress Social Icons Block

Posted on September 26, 2021 by in WordPress | 3 comments

How to Use the WordPress Social Icons Block

The WordPress Social Icons Block lets you place links to your social networks anywhere within your content. The links are simple icons with the standard social network logos that look great within any content setting. Knowing how to use the Social Icons Block will raise awareness of your social presence and grow your social following.

In this article, we’ll look at what the Social Icons Block does and see its settings and options. We’ll also see some best practices of how to use it and see the frequently asked questions.

How to Add the Social Icons Block to your Post or Page

How to Add the Social Icons Block to your Post or Page

To add the Social Icons Block to your pages and posts, open the Block Inserter tool by select the block icon either within your content or in the top left corner of the page, enter the name of the block, or scroll until you find it, and then select it.

How to Add the Social Icons Block to your Post or Page

You can also type /social and hit Enter or select the block when it appears in the list.

How to Add the Social Icons Block to your Post or Page

You’ll then have a Social Icons Block within your content. It will show a graphic to indicate what type of block it is. You can now add the social networks you want to display.

How to Add the Social Icons Block to your Post or Page

Next, you’ll need to add social network icons. First, select the Plus icon to add the social networks. This opens a search field where you can enter the name of the social media network. You can also select from those the are showing or click Browse all to see all your options. It has 42 networks to choose from.

How to Add the Social Icons Block to your Post or Page

Next, click on the network’s icon to open the URL address field. Enter the URL into the field.

How to Add the Social Icons Block to your Post or Page

Continue this process until you’ve added all your networks. Those with links will appear in their regular colors. Those without links will be faded. In this example, Facebook has a link while the others do not.

Social Icons Block Settings and Options

Social Icons Block Settings and Options

The Social Icons Block has three areas with settings and options. The first is the Social Icons Toolbar. The second is the toolbar for the icons themselves. The third is the Social Icons Block options in the right sidebar. The sidebar has two sets of settings. One for the block and one for the icons.

Social Icons Block Toolbar

Social Icons Block Toolbar

Clicking anywhere in the Social Icons Block opens its toolbar.

Change Social Icons Block Type or Style

Change Social Icons Block Type or Style

The first setting selects group, changes the number of columns, and selects styles. Styles include Logos Only, Pill Shape, and Dark Gray. I’m hovering over Default.

Change Social Icons Block Type or Style

Logos Only removes the circle around the icon.

Change Social Icons Block Type or Style

Pill Shape elongates the circles, giving them a pill shape.

Change Social Icons Block Type or Style

Dark Gray removes the circles and makes the icons gray.

Drag or Move

Drag or Move

The Drag and Move tools make it easy to move the block anywhere within your content. Grab the drag tool (6 dots) to drag and drop it. Select the Move tool’s arrows to move the block up or text within the content.

Alignment

Alignment

Alignment options include left, center, and right. The left and right options wrap the block with the paragraph under it, as I’ve done in this example.

Justify Items

Justify Items

This justifies the icons within the block. Justify them left, center, right, or add space between them.

Justify Items

This example adds space between the icons.

Size

Size

This provides size options for the icons. Choose between small, normal, large, and huge. These sizes will fit well with most types of content. I’ve set them to Huge in this example.

Options

Options

More Setting opens a list of options for the block. Options include:

Hide More Settings – closes the right sidebar.

Copy – copies the block so you can paste it.

Duplicate – creates a duplicate under the original.

Insert Before – adds space above the block.

Insert After – adds space below the block.

Move To – moves the block by moving a blue line up or down with the arrow keys and hitting Enter.

Edit as HTML – changes the block to the HTML view so you can adjust the code. All other blocks show as normal.

Add to Reusable Blocks – adds the Social Icons Block to your list of reusable blocks.

Group – adds the block to a group so you can adjust them as one block.

Remove Block – deletes the block.

Social Icons Block Icons Toolbar

Social Icons Block Icons Toolbar

Selecting the icons opens another toolbar that applies just to the icons. To the left is a social share icon that closes this toolbar and opens the main toolbar for the block.

Icons Toolbar Social Icon

Icons Toolbar Social Icon

This icon indicates which social icon you’ve selected. All options will apply to this social network.

Icons Toolbar Drag and Move

Icons Toolbar Drag and Move

The drag and move options let you change the position of the icon within the block. Drag and drop the icon by grabbing the six dots or click the left or right arrows to move the icon left or right by one position.

Icons Toolbar Options

Icons Toolbar Options

The options work the same as the main toolbar options, but they apply to the icon you’ve selected. They include:

  • Hide more Settings
  • Copy
  • Duplicate
  • Move To
  • Remove Block

Social Icons Block Settings

Social Icons Block Settings

The block settings are placed in the right sidebar. Click the block or the gear to show the sidebar. If you select the block within the content of the Social Icons Block, then its sidebar settings will display. Click the gear in the upper right if the sidebar is closed.

Block Styles

Block Styles

Styles are the same as those in the Transform settings for the block. Choose from Default, Logos Only, Pill Shape, and Dark Gray. You can also set the default style in the dropdown box. I’ve set this one to Pill Shape.

Link Settings

Link Settings

This lets you decide if the links will open in the same tab or a new tab.

Color

Color

This lets you customize the colors for the icon and the circle used for the icon’s background. Choose from premade colors or select a custom color from the color picker, enter the hex code, RBG code, or HSL code.

Advanced

Advanced

Advanced includes two fields. HTML anchor is a special web address just for the Social Icons Block. Additional CSS classes let you add custom CSS to style your block. The style you’ve selected will appear in this field.

Social Icons Block Icon Settings

Social Icons Block Icon Settings

Clicking on an icon in the Social Icons Block opens sidebar settings just for that icon. The settings include a label field where you can enter the text that will describe the link to readers. Advanced adds a field for CSS classes just for that icon.

Tips and Best Practices for Using the Social Icons Block Effectively

Once you’ve added your links, save the block to your reusable blocks so you don’t have to add them every time. Use them in your content and sidebars.

Use only a few of the social networks where you’re the most active. Adding too many can look cluttered and confuse the audience because they won’t know where to follow you for the best content.

If you use the link icon, add a paragraph block with it to create a title and description.

Use their color options to match the icons with your website but make them stand out from the rest of the content.

Add a CSS class to each icon individually for the greatest level of customization.

Transform the block to a group to customize the background color or add a border.

Frequently Asked Questions about the Social Icons Block

What is the Social Icons Block?

This block places social media icons anywhere within your content to build your social following.

Who many social networks can it display?

There are 42 social networks included. One of those is a link icon that can be linked to anywhere website or social network, so you can link to an unlimited number of networks.

Can it be transformed into other blocks?

It can be transformed into a group or columns. Group works great for customizing the backgrounds. Columns lets you place them next to other types of content.

What can it be used for?

It can link to your social networks, to the networks of team members, to networks of people or companies you’re discussing in your articles, etc. It can also be used to provide any number of links to services, products, pages, etc., using the link icon.

Conclusion

That’s our look at the WordPress Social Icons Block. Social media icons are a great way to build your social following and this block makes it easy to add them to your content. Add over 40 different networks or add links to any website. It’s easy to customize. You have several options including size and color, so you can make it match your website.

We want to hear from you. Do you use the Social Icons Block? Let us know about your experience in the comments.

Featured Image via Irina Strelnikova / shutterstock.com

Premade Layouts

Check Out These Related Posts

How to Use the WordPress Slideshare Embed Block

How to Use the WordPress Slideshare Embed Block

Posted on October 16, 2021 by in WordPress

Within WordPress’s Block Editor, there are a variety of tools that make it simple to share embedded media from external websites on your page or blog post. The SlideShare embed block allows users to embed their SlideShare presentation decks directly into a WordPress site. Want to learn how to...

View Full Post
How to Use the WordPress SmugMug Embed Block

How to Use the WordPress SmugMug Embed Block

Posted on October 15, 2021 by in WordPress

The WordPress Block Editor features multiple embed tools that make it easy to incorporate external media into your WordPress page or blog post. For users who want to share their photography (or feature other photographers’ work, with permission of course) on their WordPress site, the SmugMug...

View Full Post

3 Comments

  1. thanks for giving Gutenberg tutorials 👍

    • WordPress Social icons block is a must for any and every social media-using business. This icon set can be used in all types of websites, while the stylish designs make them stand out from other companies’ branding efforts too.
      Thanks for this

  2. New Gutenberg blocks are amazing.

    Thanks for sharing amazing social icons block tuturial.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest