How To Create Social Sharing Buttons In GeneratePress?

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 additional 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 both the versions, in my GeneratePress free vs premium article.

bluehost hosting banner

Create Social Sharing Buttons In GeneratePress Without Plugin

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

SVGs are Scalable Vector Graphics. They are open standard graphics (mostly used as icons) developed by W3C (World Wide Web 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 standard images.

We will use the SVGs from Iconmonstr. Meaning, not only the icon but 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. Pinterest
  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]

Pinterest Social Sharing Link

https://pinterest.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.

Note: You need to have GeneratePress Premium theme

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 GeneratePress custom hook for this activity.

generatepress custom hook to create social sharing icons

Give a name to the new Element and add the code as shown in the image below.

code for social sharing icons in generatepress

Select the hook as generate_after_header, execute PHP, and set the display rules to PostsAll 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 readers to share your articles on their social profiles.

Do not forget to hit the Publish button.

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

<?php
$bloggingidolURL = urlencode(get_the_permalink());
$bloggingidolTitle = urlencode(get_the_title());
$bloggingidolImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="bloggingidol-social-wrapper hide-on-mobile hide-on-tablet">
	<a class="bloggingidol-social-sharing bloggingidol-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $bloggingidolURL; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg></a>
	<a class="bloggingidol-social-sharing bloggingidol-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $bloggingidolTitle;?>&amp;url=<?php echo $bloggingidolURL;?>&amp;via=blogging_idol" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a>
	<a class="bloggingidol-social-sharing bloggingidol-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $bloggingidolURL; ?>&amp;media=<?php echo $bloggingidolImage;   ?>&amp;description=<?php echo $bloggingidolTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg></a>
	<a class="bloggingidol-social-sharing bloggingidol-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $bloggingidolURL; ?>&amp;title=<?php echo $bloggingidolTitle; ?>&amp;mini=true" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg></a>
	<a class="bloggingidol-social-sharing bloggingidol-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $bloggingidolTitle; echo " "; echo $bloggingidolURL;?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg></a>
	<a class="bloggingidol-social-sharing bloggingidol-social-reddit" href="https://reddit.com/submit?url=<?php echo $bloggingidolURL;?>&title=<?php echo $bloggingidolTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a>
</div>

Note: Search for via=blogging_idol and replace it with your twitter username. Example via=yourtwitterusername

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 similar styling. You are free to change CSS as per your requirements.

.bloggingidol-social-wrapper {
    position: fixed;
    top: 70%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9999;
}

.bloggingidol-social-sharing {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
    min-height: 30px;
    font-size: 12px;
    padding: 5px 10px;
}

.bloggingidol-social-sharing svg {
    position: relative;
    top: 0.5em;
}

.bloggingidol-social-sharing:first-of-type {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.bloggingidol-social-sharing:last-of-type {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
	
}

.bloggingidol-social-facebook {
    fill: #ffffff;
    background-color: rgba(59, 89, 152, 1);
}

.bloggingidol-social-facebook:hover {
    background-color: rgba(59, 89, 152, .8);
}

.bloggingidol-social-twitter {
    fill: #ffffff;
    background-color: rgba(29, 161, 242, 1);
}

.bloggingidol-social-twitter:hover {
    background-color: rgba(29, 161, 242, .8);
}

.bloggingidol-social-pinterest {
    fill: #ffffff;
    background-color: rgba(189, 8, 28, 1);
}

.bloggingidol-social-pinterest:hover {
    background-color: rgba(189, 8, 28, .8);
}

.bloggingidol-social-linkedin {
    fill: #ffffff;
    background-color: rgba(0, 119, 181, 1);
}

.bloggingidol-social-linkedin:hover {
    background-color: rgba(0, 119, 181, .8);
}

.bloggingidol-social-whatsapp {
    fill: #ffffff;
    background-color: rgba(37, 211, 102, 1);
}

.bloggingidol-social-whatsapp:hover {
    background-color: rgba(37, 211, 102, .8);
}

.bloggingidol-social-reddit {
    fill: #ffffff;
    background-color: rgba(255, 87, 0, 1);
}

.bloggingidol-social-reddit:hover {
    background-color: rgba(255, 87, 0, .8);
}

Note: Make sure the you type in same class names, or else the code won’t work.

Step 3: Final result of Social Sharing Buttons In GeneratePress

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

Benefits of Social Sharing Buttons In GeneratePress (Without Plugin)

  1. Use of SVGs from Iconmonstr makes your icons super lightweight
  2. There isn’t any kind of JavaScript code involved
  3. By using this method, you do not install any 3rd party plugin
  4. It is responsive
  5. All the buttons will work super fast for sharing purpose

Create Social Sharing Buttons In GeneratePress With Plugin

I personally prefer to create floating social sharing buttons without plugin. But, that doesn’t stop you from knowing how to perform this activity by using a plugin.

All you need to know is the right type of plugin. That won’t kill your website’s speed and also offer you the flexibility of placing it anywhere on your blog posts.

The good news is that if you want to create social sharing buttons in GeneratePress by plugins, you need not have GeneratePress premium theme. That’s right, by using a plugin you can still achieve this in GeneratePress free theme.

Note: That won’t stop other GeneratePress premium users from downloading the below mentioned free plugin.

Sassy Social Share

This plugin is lesser than 1 MB in size, making it one of the lightest plugin with smooth sharing functionalities. It enables you to share content on popular social networks like Facebook, Twitter, Pinterest, Tumblr, WhatsApp, and a hundred more.

sassy social share icon illustrations

It has a paid version as well. But first let me share all the features available with its free version Followed by creating sharing buttons using this plugin.

Later in this article, I will mention what are the other benefits available if you buy the premium version.

Features I like the most about Sassy Social Share Plugin

  1. Lets you share on almost all social media platforms
  2. Customize the icon as per your brand requirements
  3. Shorten URLs with one single click
  4. Rearrange icons and place them anywhere on your website
  5. Truly Mobile responsive
  6. You can enable/disable sharing for any page or post
  7. Even lets you share WooCommerce single products on different social media channels

Now let us start creating social sharing buttons using sassy social share plugin.

Step1: Download Sassy Social Share From WordPress Repository

Go to your WordPress dashboard, look for Plugins and then click on Add New.

Type Sassy Social Share in the search bar, Install & Activate the plugin.

sassy social share in WordPress repository

This is how the dashboard will look like once you install the plugin.

social sharing icons in GeneratePress using sassy social share - customizing settings

Step 2: Sassy Social Share Settings

Here you can change the shape, size and color of the social icons. You can also rearrange the order of the icons and deselect the ones which you do not prefer your audience to share your content.

I have made certain changes in Theme Selection, Standard Interface, and Floating Interface.

Step 3: Check the Result in Desktop and Mobile View

This is how it looks on my Generatepress blog.

social share buttons in generatepress using sassy social share
Sassy Social Share on BloggingIdol – Desktop View

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 which 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 following 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. Pinterest “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 information.

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 completely, 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 plugin.

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 importantly, let me know if you face any difficulties doing so. Thank You.

Ankur Purecha

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol

Leave a Comment