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.
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.
You can also type /social and hit Enter or select the block when it appears in the list.
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.
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.
Next, click on the network’s icon to open the URL address field. Enter the URL into the field.
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.
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.
Clicking anywhere in the Social Icons Block opens its toolbar.
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.
Logos Only removes the circle around the icon.
Pill Shape elongates the circles, giving them a pill shape.
Dark Gray removes the circles and makes the icons gray.
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 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
This justifies the icons within the block. Justify them left, center, right, or add space between them.
This example adds space between the icons.
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
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.
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
This icon indicates which social icon you’ve selected. All options will apply to this social network.
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
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
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
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
This lets you decide if the links will open in the same tab or a new tab.
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 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.
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.
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.
This block places social media icons anywhere within your content to build your social following.
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
New Gutenberg blocks are amazing.
Thanks for sharing amazing social icons block tuturial.
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