How To Create Social Sharing Buttons In GeneratePress?

In this tutorial, we will look at How To Create Social Sharing Buttons In GeneratePress?

This would undoubtedly help you in enhancing your blog post’s cross-channel promotion. That in turn will increase your web presence.

I am going to show you how to construct sticky social sharing buttons that float on the front end of your blog entries. Meaning, they will always be visible to your audience.

We can achieve this via a plugin, but the best part is to construct them manually. That way you know you’re avoiding adding JavaScript (kills website performance) on your site.

This lesson requires you to have GeneratePress premium, as we are going to use the Elements module.

Create Social Sharing Buttons In GeneratePress Without Plugin

Creating social sharing buttons in GeneratePress theme without plugins demands you to know about SVG icons.

SVGs are Scalable Vector Graphics. They are open standard visuals (mainly used as icons) developed by W3C (World Wide Web Consortium) (World Wide Web Consortium).

Benefits of Using SVGs

• They have a tiny file size that never affects site speed.
• You may easily add hyperlinks to SVG icons.
• They are easily modifiable with any vector graphics software.
• SVG icons are resolution independent, making them excellent for desktop, tablet and mobile view.
• SVG pictures are more SEO-friendly compared to conventional images.

We will use the SVGs from Iconmonstr. Meaning, not only the icon but the icon with its XML code as well.

Step 1: Add Social Sharing Buttons Code To GeneratePress Elements Hook

For accomplishing this, you will first need to create a New Element in GeneratePress. Go to your WordPress Dashboard, under Appearance, Click on Elements. This will open the Elements page, click on Add New Element.

As soon as you’ve clicked on Add New Element, GeneratePress will show a dialog window. Click on Hook. That’s accurate, you need a GeneratePress custom hook for this action.

Give a name to the new Element and add the code.

Select the hook as generate after header, execute PHP, and set the display rules to Posts – All Posts.

Since we need the social sharing icons to float on our screen viewport. It is best advised to select Generate After Header Hook.

The reason we have chosen display settings as All Posts is because you would like your users to share your content on their social sites.

Do not forget to hit the Publish button.

Copy the following code to implement the same on your website.

Step 2: Perform CSS Styling To Social Sharing Icons

To do so, go to WordPress dashboard, under Appearance, click on Customize.

This will open the GeneratePress theme customizer. Here go all the way down and click on Additional CSS.

Paste the following CSS code for comparable styling. You are allowed to adjust CSS as per your requirements.

Step 3: Final outcome of Social Sharing Buttons In GeneratePress

Finally, here is how the social sharing icons should look like on your website. Remember that we have made them floating from the top at 70% of the screen viewport.

Benefits of Social Sharing Buttons In GeneratePress (Without Plugin) (Without Plugin)

Use of SVGs from Iconmonstr makes your icons very lightweight
There isn’t any kind of JavaScript code involved.

By using this strategy, you do not install any 3rd party plugin
It is responsive.

All the buttons will work incredibly fast for sharing purpose.

Conclusion: How To Create Social Sharing Buttons In GeneratePress?

Now you have discovered how to construct social sharing buttons in GeneratePress utilizing code and plugins.

Use the option which is easy for you and that which meets your requirement. Please feel free to edit the PHP and/or CSS code from the article.