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

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://wa.me/?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://wa.me/?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>

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 love things to do with WordPress, Digital Marketing. Blogging has been my Passion. In my free time, I enjoy watching Series and Movies.

14 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

Leave a Comment