How To Create Social Sharing Buttons in wordpress?

create social sharing buttons in GeneratePress theme

In this article, we will look at how to create Social Sharing Buttons in GeneratePress with and without a Plugin.

This will definitely help you in increasing your blog post’s cross-channel promotion. That in turn will improve your online presence.

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

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

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

GP premium has an amazing module called Elements. The pro version has lots of other cool features as well.

Understand all the differences between generatepress premium vs free versions.

Create Social Sharing Buttons In GeneratePress Without Plugin

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

SVGs are Scalable Vector Graphics. They are open criterion graphics (mostly used as icons) developed by W3C (WWW Consortium).

Benefits of Using SVGs

  1. They have a compact file size that never affects site performance.
  2. You can easily add hyperlinks to SVG icons.
  3. They are easily editable via any vector graphics software.
  4. SVG icons are resolution independent, making them perfect for desktop, tablet and mobile view.
  5. SVG images are more SEO-friendly compared to criterion images.

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

One of the most used social media networks throughout the Internet are;

  1. Facebook
  2. Twitter
  3. LinkedIn
  4. Pinvolvement
  5. WhatsApp
  6. Reddit

Therefore, we will need the sharing links of these networks before diving into our activity.

Facebook Social Sharing Link

https://www.facebook.com/sharer.php?u=[post-url]

Twitter Social Sharing Link

https://twitter.com/share?text=[post-title]&url=[post-url]&via=[via]

LinkedIn Social Sharing Link

https://www.linkedin.com/shareArticle?url=[post-url]&title=[post-title]

Pinvolvement Social Sharing Link

https://pinvolvement.com/pin/create/button/?url=[post-url]&media=[post-image]&description=[post-title]

WhatsApp Social Sharing Link

https://api.whatsapp.com/send?text=[post-title] [post-url]

Reddit Social Sharing Link

https://reddit.com/submit?url=[post-url]&title=[post-title]

Now let us start creating social sharing icons in GeneratePress theme without the use of plugins.

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

For doing 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 present a dialog box. Click on Hook. That’s right, you need a for this activity.

generatepress custom hook to create social sharing icons

Plus, the mobile view gives you a floating (sticky) footer of social icons. Making it easy for your readers to share your content on their social profiles.

sassy social share - sticky footer social icons in GeneratePress mobile view

See how easy it is when you use a plugin.

There are multiple other plugins that do the same job. But, this is one of my favorite as it offers more than just social sharing.

If you opt for Sassy Social Share Premium version plugin you get the next features;

  1. myCRED Integration available that offers credit points to your users for sharing
  2. Social Sharing Analytics included in the dashboard
  3. Recover all your social share counts even if you switch between HTTP to HTTPS
  4. Pinvolvement “Pin it” button on hover of images included
  5. Hide floating social share icons before they reach the footer area
  6. Create multiple instances of social share bars each with different set of icons
  7. Customize your own set of image and body text for email sharing

Feel free to check out their page for more info.

Read More: Methods to Add Sticky Sidebar in GeneratePress Theme

FAQs

How do I create social sharing buttons in GeneratePress without plugins?

If you want to create social sharing buttons in GeneratePress without plugins, then you need GeneratePress premium. GP Premium offers a module called as Elements. An Element will let you create a Hook. Therefore, create a GeneratePress custom hook for social sharing icons and then style it with your own CSS. That’s it.

What are social sharing buttons?

Social sharing buttons or icons are those tiny social media icons on a website, that let users share your content on their social media profiles. We often see them on the sides of a web page or in header and footer area.

How do social share buttons work?

Once the webpage loads finishly, the user can then simply click on any social media icon. This results in a pop up of an auto-sharing page of that social network on his/her screen.

What is social share button used for?

It is used for letting your readers share your content on their social media channels or applications.

Conclusion

Now you have learnt how to create social sharing buttons in GeneratePress using code and plugins.

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

Most of importly, let me know if you face any hardies doing so. Thank You.

Share on: