Join WPLogout Community on Facebook Join Now

How to Create Social Sharing Buttons in GeneratePress without Plugin?

In this tutorial, we are going to Create Social Sharing Buttons in GeneratePress without Plugin using the super basic method.

Here we are using pure HTML, CSS, and PHP code with SVG Inline code to create a sharing button for GeneratePress Premium Theme. That means there is no JavaScript or third party integration like FontAwesome.

Also, in this guide you will learn more about

  1. Why Create Custom Social Sharing Buttons?
  2. About SVG Inline Code
  3. How to integrate social sharing button on the top and bottom of the content?
  4. Why WPLogout Social Sharing buttons are Scriptless?
  5. How we made Social Sharing Superfast?
Create Social Sharing Buttons in GeneratePress Without Plugin

Why Create Social Sharing Buttons for GeneratePress without Plugin?

We all know speed is one factor that Google looks after and we all love to speed up our website. In addition, there are lots of social sharing plugin available in the WordPress Repository with many awesome features.

But most of the plugins add extra requests and use bloated code which makes your website slow. Also, if you are searching for fancy social sharing buttons then it is not what you are looking for. It is a super basic sharing button that we add after the content in a single post.

Here, I am going to create social sharing buttons in GeneratePress without plugin. The following method is only going to work with GeneratePress Premium Theme.

If you are using the free version of GeneratePress then you may need to use social sharing plugin.

Moreover, I want to call this sharing button as WPLogout Social Sharing Buttons, and here are certain features that help to make it Scriptless, fast, and lightweight.

Also Read: Create Social Media Follow Buttons in GeneratePress without Plugin

Features of WPLogout Social Sharing Buttons

  1. Only use PHP, HTML, and CSS code.
  2. No JavaScript Code.
  3. No FontAwesome or any third-party Integration.
  4. Uses SVG Inline Code.
  5. No Extra Request.
  6. Lightweight and Responsive.
  7. No Tracking.
  8. Only made for GeneratePress Premium Theme.
  9. Super Fast Social Sharing Buttons (Speed Matters).
  10. Clean Code and Awesome UI Design.

Steps to Create Social Sharing Buttons in GeneratePress

We are using Element Module in GeneratePress that is only available in Premium Module. So If you haven’t activated Elements Module then first go to activate it. Go to Appearance > GeneratePress > Elements > Activate

How to Create Social Sharing Buttons in GeneratePress without Plugin? - GeneratePress Tutorial

Step 1: Add Social Sharing Code using Elements Module

So we are going to add a social sharing code in GeneratePress Theme.

Here, we are using $wplogoutURL to fetch the URL, $wplogoutTitle to fetch the article title, and $wplogoutImage to fetch the featured image of the post.

Moreover, we are using Social site URLs to share the post. List of social sharing buttons URLs

Facebook Social Sharing URL

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

Twitter Social Sharing URL

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

Pinterest Social Sharing URL

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

Linkedin Social Sharing URL

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

WhatsApp Social Sharing URL

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

Reddit Social Sharing URL

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

Now let’s create social sharing buttons for GeneratePress Theme.

1. First Go to Appearance > Elements > Add New > Choose Element Type as Hook > Add Title

Social Sharing Buttons in GeneratePress Theme

2. Copy and paste the following code.

<?php
$wplogoutURL = urlencode(get_the_permalink());
$wplogoutTitle = urlencode(get_the_title());
$wplogoutImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="wplogout-social-wrapper">
	<span class="hide-on-mobile">Share on:</span>
	<a class="wplogout-social-sharing wplogout-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $wplogoutURL; ?>" 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="wplogout-social-sharing wplogout-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $wplogoutTitle;?>&amp;url=<?php echo $wplogoutURL;?>&amp;via=wplogout" 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="wplogout-social-sharing wplogout-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $wplogoutURL; ?>&amp;media=<?php echo $wplogoutImage;   ?>&amp;description=<?php echo $wplogoutTitle; ?>" 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="wplogout-social-sharing wplogout-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $wplogoutURL; ?>&amp;title=<?php echo $wplogoutTitle; ?>&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="wplogout-social-sharing wplogout-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $wplogoutTitle; echo " "; echo $wplogoutURL;?>" 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="wplogout-social-sharing wplogout-social-reddit" href="https://reddit.com/submit?url=<?php echo $wplogoutURL;?>&title=<?php echo $wplogoutTitle; ?>" 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: Please change your Twitter Handle in above Twitter Sharing Link. Search for via=wplogout and replace it with via=yourtwitterusername in the above code

3. Now go to the Hook Settings and Choose Hook Location as after_entry_content. Click on Execute PHP

Hook after entry content

If you want your social sharing buttons to display after your post title then choose Hook Location as after_entry_title

4. Furthermore, Go to Display Rules and Choose Location as Post, All Posts

Display Rules Location on All Post

5. Hit Publish Button.

Here I am using SVG Inline code from iconmonstr. If want to customize the icons then you can choose from Icon Monstr.

Step 2: Style Social Sharing Buttons

Let’s style our Social Sharing Buttons using CSS code.

  • Go to Appearance > Customize
  • Go to Additional CSS
  • Copy and Paste the following code to style social sharing buttons
.wplogout-social-wrapper {
    margin: 30px 0;
    font-size: 0;
}

.wplogout-social-wrapper span {
    font-weight: bold;
    padding-right: 10px;
    font-size: 16px;
}

.wplogout-social-sharing {
    font-size: 17px;
    padding: 7px 20px;
}

@media only screen and (max-width: 600px) {
    .wplogout-social-sharing {
        font-size: 17px;
        padding: 7px 12px;
        display: inline-block;
    }
}

.wplogout-social-sharing svg {
    position: relative;
    top: 0.15em;
    display: inline-block;
}

.wplogout-social-sharing:first-of-type {
    border-radius: 100px 0 0 100px;
}

.wplogout-social-sharing:last-of-type {
    border-radius: 0 100px 100px 0;
}

.wplogout-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);

}

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

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

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

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

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

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

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

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

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

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

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

You can also change/modify the CSS code according to your need.

Step 3: Result

WPLogout Social Sharing Buttons in GeneratePress Theme

Here is the result of WPLogout Social Sharing Buttons for GeneratePress Theme. I have only added popular social networks like Facebook, Twitter, Pinterest, Linkedin, WhatsApp, and Reddit, etc.

Wrapping Up

At last, by following the above steps, you can create Social Sharing Buttons in GeneratePress without plugin. In the above tutorial, you can customize CSS and PHP code as per your need. Moreover, you can customize the SVG buttons that I have used from iconmonstr.com.

If you get any difficulty then please feel free to comment below.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

49 thoughts on “How to Create Social Sharing Buttons in GeneratePress without Plugin?”

    • Hi Subodh, you can customize the CSS code. Feel free to change/modify it.

      .wplogout-social-wrapper {
          margin: 30px 0;
      }
      
      .wplogout-social-wrapper span {
          font-weight: bold;
          padding-right: 10px;
          font-size: 16px;
      }
      
      .wplogout-social-sharing {
          font-size: 17px;
          padding: 7px 40px;
      }
      
      @media only screen and (max-width: 600px) {
          .wplogout-social-sharing {
              font-size: 17px;
              padding: 7px 12px;
              display: inline-block;
          }
      }
      
      .wplogout-social-sharing svg {
          position: relative;
          top: 0.15em;
          display: inline-block;
      }
      
      .wplogout-social-facebook {
          fill: #fff;
          background-color: rgba(59, 89, 152, 1);
      
      }
      
      .wplogout-social-facebook:hover {
          background-color: rgba(59, 89, 152, .8);
      }
      
      .wplogout-social-twitter {
          fill: #fff;
          background-color: rgba(29, 161, 242, 1);
      }
      
      .wplogout-social-twitter:hover {
          background-color: rgba(29, 161, 242, .8);
      }
      
      .wplogout-social-pinterest {
          fill: #fff;
          background-color: rgba(189, 8, 28, 1);
      }
      
      .wplogout-social-pinterest:hover {
          background-color: rgba(189, 8, 28, .8);
      }
      
      .wplogout-social-linkedin {
          fill: #fff;
          background-color: rgba(0, 119, 181, 1);
      }
      
      .wplogout-social-linkedin:hover {
          background-color: rgba(0, 119, 181, .8);
      }
      
      .wplogout-social-whatsapp {
          fill: #fff;
          background-color: rgba(37, 211, 102, 1);
      }
      
      .wplogout-social-whatsapp:hover {
          background-color: rgba(37, 211, 102, .8);
      }
      
      .wplogout-social-reddit {
          fill: #fff;
          background-color: rgba(255, 87, 0, 1);
      }
      
      .wplogout-social-reddit:hover {
          background-color: rgba(255, 87, 0, .8);
      }
      
      Reply
  1. Awesome work!!

    Si there a way to get these social sharing buttons fixed to the bottom of the browser on mobile?

    Reply
    • Hi Yhonatan, Thank You for the comment.
      Right now there isn’t any fixed social sharing buttons for Mobile Version.

      Reply
      • Hi, my friend.
        I just found an easy way to have your buttons fixed to the bottom of the phone while scrolling.

        Two steps:

        1) Hook position: Footer.
        2) Add this CSS code:

        @media (max-width: 767px) {
        .wplogout-social-wrapper {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        }
        }

        Reply
  2. He Sir Apne Generate Press Me Bahut Details Me Work Kiya He. Mene Apki Site Follow Karke Customise Kiya He Apni Site. but Ek Questions He. Apke Site bar Or Post Me Sab Box Ya Shadow Me Show Hote He Usko Kese Customise Kar Sakte He. Please Give Details.

    Reply
    • Hi AK, Thank you for visiting my site. You can use this code in your Class or ID.

      box-shadow: rgba(23,43,99,.14) 0 7px 28px;
      

      Thank You.

      Reply
        • You can place the above code in your sidebar’s text ID or Class. For Example: If you have class .abc-xyz then add the code like this

          .abc-xyz {
          box-shadow: rgba(23,43,99,.14) 0 7px 28px;
          }
          

          Thank You

          Reply
  3. Hi again, for some reason, sharing from facebook not include de featured image or any image?
    What would be teh cause?
    And also, is there a way (from mobile) to open the facebook app instead teh web version?

    Reply
    • Hi Gabriel,

      1. Sharing the link to Facebook is perfectly working at my end with a featured image. I have tried again.

        • Go to Facebook Share Debugger Tool, add your URL, and check your URL. If there is any problem fix it.
      2. I think there isn’t a way since Facebook only provides a sharing URL that supports the web.
      Reply
  4. Looks really good, thank you. How can I align-center the icons so it sits in the middle of the screen instead of the left?

    Reply
    • Hi Manpreet, I have tried again on the localhost and it’s perfectly working at my end. Please check the tutorial again step by step again.
      Thanks

      Reply
  5. Thanks for the tutorial. It works well for me.
    Nevertheless, I’m unable to identify your twitter handle to replace it with mine. Could you highlight the handle?

    Reply
  6. Hi Suraj,

    This is excellent. I used GP socials icons, but that had an issues opening pages to edit. So this is an excellent and nice solution. I managed to change to bar to my own colors so that made me happy.

    I want to add a email-social-share but I am afraid I need some help on the code of the Elements to fix this (css, svg is done).

    Thanks, Peter

    Reply
    • Hi Peter, I have tested the email code but I am not sure it will work or not. I have mailed it to your email.
      Please test it and let me know.
      Thanks

      Reply
    • Hi Caitriona, Did you delete the CSS part for Pinterest? Check it
      Please feel free to comment back if you feel something is wrong.
      Moreover, the above code for social sharing is perfectly working at my end.
      Thanks

      Reply
      • Hi,

        Thank you for your reply. The CSS is still the same, I checked. It’s broken in the floating social sharing bar and the social sharing buttons too. Just the Pinterest one.

        Maybe I should delete all and do it again.

        Reply
        • Hi Caitriona, I think you are using other Pinterest buttons or plugin and that is causing a problem. Please deactivate the plugin or manual CSS code and check again.
          Thanks

          Reply
          • That’s right!! I recently downloaded the plugin for pinning images. But I since deleted it because I felt that it slowed down the site. Manual CSS code seems to be okay. Maybe that’s where the problem stemmed from

  7. Hi,
    facebook button is giving me an error: “Parameter ‘href’ should represent a valid URL”.
    Could you help, please.

    Reply
    • Hi Tibor,
      I am using the same code at my blog and it’s working fine.
      Can you please recheck the above code and paste it into your site?
      Furthermore, you can post the screenshot

      Thanks

      Reply

Leave a Comment