Skip to content
stepbystepwp small logo
  • WORDPRESS
  • ABOUT
  • TECH
stepbystepwp small logo
  • WORDPRESS
  • ABOUT
  • TECH
how to add social share icons
By Bill Wood / February 23, 2023 February 24, 2023

How To Add Social Icons To Your WordPress Post In Gutenberg

This post may contain partner links. This does not affect the price you pay.

In this post, we will add social share icons to our post, like the block above.

This video will illustrate how to add social share icons to your post.
Social Share Icons Can Help Spread Your Content

If your readers really like your content, and they are inspired to share it, social share icons give them a way to easily spread your content.

Table Of Contents
  1. Steps To Adding Social Share Icons To Gutenberg Post
    • 1. Edit the Post
    • 2. Add New Block, Search Social
    • 3. Add Icons and Adjust Settings
    • 4. Create Reusable Block (optional)
  2. Concluding Thoughts

Steps To Adding Social Share Icons To Gutenberg Post

You can follow the video above, or the steps below to add social sharing icons to your WordPress post. Before getting started, consider installing the spectra plugin so that you can use the social sharing block that comes with that plugin, as it is easy to use and easy to customize.

1. Edit the Post

From the Dashboard, find the post you want to add the social icons to by selecting Posts > View All

Find the post to add social icons to, and select Edit.

2. Add New Block, Search Social

After you open the post in edit mode, add a new block (either at the top of the post, or at the bottom). Search for “social” within the search bar for a new block.

search new block for social image
Adding a new block and searching for “Social” brings up the Social Share blocks

If you have the Spectra plugin installed, you will see the blue Social Share block, as well as the one that came with this Astra theme. You can use either block, but the blue Spectra block might be easier to work with.

Pick the social share you want. In this tutorial we will pick the blue icon from Spectra (you can always use the black icon like demonstrated as the second method in the video).

3. Add Icons and Adjust Settings

Select the entire block to adjust the settings of the block on the right side. You can adjust the icon shape, alignment, spacing, and more within the settings panel.

Explore the settings panel of the Social Share block. Click the Style tab for even more settings to adjust.

Click the plus button of the block to add more social icons to block. You may have to add the icon’s url, and pick the icon within the settings panel. Additionally, you may need to give that icon a color.

4. Create Reusable Block (optional)

Now that you have created the perfect social share icon block for your post, you may want to create a reusable block to save this block for other posts. Simple select the entire block, and select create reusable block, and give the reusable block a name. Now, you can add that block to any post in a snap.

You may want to create a template post for all your posts with a reusable block. Just be sure to convert it to a regular block each time you install it in a new post.

More WordPress Posts You Might Like
Install WordPress on SiteGround in 2023
Delete Astra Theme From WordPress Site
Create Transparent Header In WordPress

Concluding Thoughts

Social share icons are a great way to allow your readers to spread your content for you. With social share icons, you don’t have to do all the work yourself!

If you take this tutorial all the way to the end, taking advantage of reusable blocks means you don’t need to create the social share block multiple times.

Post navigation
← Previous Post
Next Post →

Related Posts

how to install free wordpress template

Install Free WordPress Template Video (Step by Step) for 2023

blog design improvements

Video Of Three Easy Blog Design Changes To Improve Reader UI

astra menu text color

Astra Theme Change Color Of Menu Text In Header

install astra theme to wordpress

How To Install Astra Theme For WordPress Site In 2023

siteground wordpress hosting
WordPress With SiteGround - Unlimited Sites on Google Cloud Without the Hassle
Install WordPress with SiteGround
Installing WordPress on SiteGround - Step By Step Video
Gutenberg Template Tutorial
Install Free Gutenberg Templates In 2023 - Step By Step Video
List all available rocketbooks
Compare 14 Latest Rocketbooks in 2023
capsule 2.0 folio cover opened photo
Rocketbook Accessory Cover - Capsule 2.0 Folio Review
multi colorod 14447 pilot frixion clicker
Fine Point Colored Pens For Rocketbook
Rocketbook Panda Planner Smart Notebook Review
Best Rocketbook For Business Professionals - Rocketbook Panda Planner
Rocketbook Academic Planner Review
Top Rocketbook For Teachers - Academic Planner
  • HOME
  • ALL POSTS
  • ABOUT
  • CONTACT
  • PRIVACY
  • TERMS

Copyright © 2023 Step By Step WP