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 the 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?
Features of WPLogout Social Sharing Buttons
Steps to Create Social Sharing Buttons in GeneratePress
Step 1: Add Social Sharing Code using Elements Module
Step 2: Style Social Sharing Buttons
Step 3: Result
Wrapping Up

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 plugins 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 a plugin. The following method is only going to work with GeneratePress Premium Theme.

Try GeneratePress Theme

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

Moreover, I want to call this sharing button as WPLogout Social Sharing Button, 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 which 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

If you want to add mix and email to your social sharing button then place the below code inside the div in the above social sharing buttons code and also check below in the CSS section to find the CSS code for mix and email.

For Email

<a class="wplogout-social-sharing wplogout-social-email" href="mailto:?subject=<?php echo wp_title(''); ?>&amp;body=<?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="M12 12.713l-11.985-9.713h23.971l-11.986 9.713zm-5.425-1.822l-6.575-5.329v12.501l6.575-7.172zm10.85 0l6.575 7.172v-12.501l-6.575 5.329zm-1.557 1.261l-3.868 3.135-3.868-3.135-8.11 8.848h23.956l-8.11-8.848z"/></svg></a>

For mix.com

<a class="wplogout-social-sharing wplogout-social-mix" href="https://mix.com/add?url=<?php echo $wplogoutURL;?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32"><path d="M6.401 8.136v20.197c0 1.803-1.401 3.136-3.204 3.136-1.796 0-3.197-1.401-3.197-3.136v-28.333h32v17.803c0 1.728-1.469 3.129-3.197 3.129-1.803 0-3.272-1.401-3.272-3.129v-1.605c0-1.796-1.395-3.129-3.197-3.129-1.516 0-2.828 1.068-3.136 2.5v5.099c0 1.803-1.463 3.136-3.197 3.136-1.803 0-3.197-1.401-3.197-3.136v-12.333c0-1.735-1.469-3.136-3.204-3.136-1.667-0.004-3.063 1.272-3.197 2.939z"/></svg></a>

For Telegram

<a class="wplogout-social-sharing wplogout-social-telegram" href="https://t.me/share/url?url=<?php echo $wplogoutURL;?>&text=<?php echo $wplogoutTitle;?>" target="_blank" rel="nofollow"><svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="telegram-1" d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"/></svg></a>

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);
}

CSS for Mix

.wplogout-social-mix {    
    background-color: rgba(251,140,0 ,1);
}

.wplogout-social-mix:hover {    
    background-color: rgba(251,140,0 ,.8);
}

CSS for Email

.wplogout-social-email{    
    background-color: rgba(19,20,24 ,1);
}

.wplogout-social-email:hover {    
    background-color: rgba(19,20,24 ,.8);
}

CSS for Telegram

.wplogout-social-telegram{    
    background-color: rgba(0,136,204 ,1);
}

.wplogout-social-telegram:hover {    
    background-color: rgba(0,136,204 ,.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 the GeneratePress Theme. I have only added popular social networks like Facebook, Twitter, Pinterest, Linkedin, WhatsApp, 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:
Recommended Reading...

How to Switch your WordPress Theme to GeneratePress?

How to Make Entire Block Clickable in GeneratePress?

How to Add GenerateBlocks Pattern Library in GeneratePress?

How to Migrate WP Show Posts Plugin to GenerateBlocks?

How to Add JavaScript in GeneratePress Theme?

Best GeneratePress Templates for Affiliate Marketing

10 Reasons To Use GenerateBlocks On WordPress Site

How to Create Deal Page in WordPress?

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

129 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

  2. 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

  3. 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

  5. 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

  6. 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

  14. 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

  15. 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 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

  17. 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

  18. Thank goodness for Suraj Katwal…

    Cant believe I have found your post. Been looking for a simple social share option for months now. Been so unhappy with the plugins.

    Your code works perfectly and I am beside myself relieved!
    Thank you for your time and effort and for sharing with us!

    I was busy with a GeneratePress ticket -issue regarding their recommended social share plugin which is not working.. when I happened to stumble upon you.

    Lucky me.

    I did post your link…

    XXX

    Reply

  22. This is great! Do you know if there is a way to adapt this to display the total share counts for each of the services alongside of the buttons?

    Reply

    • Hi Sumit,
      Use media query or GeneratePress has inbuilt classes to hide/show in different devices.
      You can check my floating social sharing buttons tutorials.
      Thanks

      Reply

  24. Hi Suraj,

    Thanks for publishing this article.

    I can’t see the code in step 2. Not sure if it’s just me having this problem.

    Would you be able to send me the relevant code please?

    Cheers,

    Matt

    Reply

  27. Hi,
    am using your buttons on my site (surf-atlantic.com/blog/) in posts.
    Google search console is showing an error:” ‘noindex’ detected in ‘robots’ meta tag.”
    Looking at code, it says for all six buttons: “target=”_blank” rel=”nofollow”
    How to change that?
    thanks,
    Tibor

    Reply

      • Hi Suraj,

        Does answer what I found online apply to this case, then?
        (please, see below)
        thanks,
        Tibor

        “They don’t point to real pages, they’re just placeholders before each Social Network is loaded.
        Here is what Google has to say about nofollow links: Use rel=”nofollow” for specific links:
        Here are some cases in which you might want to consider using nofollow:
        – Untrusted content
        – Paid links
        – Crawl prioritization
        “Crawl prioritization” is relevant here: Search Engines can’t share your posts on Social Networks, so there’s no reason to invite Googlebot to follow these links. Using nofollow on these links enables Googlebot to crawl other pages you’d prefer to see in Google’s index (like other posts from your site).
        You can consequently leave the nofollow attribute here as it is actually good for those links not to be followed by search engines.

        Reply

  28. Hello dear thanks for this code 🙂 and i use RTL theme can`t fix icon curve i need your support for fixed that beside thank you

    Reply

    • Hi Ahmed,
      You can check the alternative CSS code in the comment section. Replace the previous CSS code from the comment section and let me know.
      Thanks

      Reply

    • Hi Swen,
      I have updated the code for Telegram, please check and I think Instagram doesn’t allow you to share photos/videos from a website or any url.
      Let me know after implementing it.

      Reply

      • Hi Suraj,
        the code works fine!

        Is it possible to graphically build a block / hook with the new block elements of Generatepress 2.00? I have an element as a block / hook but I don’t know how to include the php code.
        Do you have a hint for me?

        thanks!

        Reply

  31. Hi Suraj, thank your for this solution.
    But in the case of sharing to Pinterest site, it shares only a link of the page. Do you know the code for sharing images from the page? I mean I would like to share only selected images from the page, not the link of the page. I have been using Pinterest small button above the image, but I would like to use your solution. Thank you for your help. Milan

    Reply

    • Hi Soma,
      I think you have edited the code, I am using the same code.
      Please copy and paste the exact code.
      Thanks

      Reply

  34. I got the buttons to appear but they are overlapping the author name and there are spaces between them instead of being right next to each other. How do I fix that?
    Here is a link to a post for you to see.
    theunexpectedhomeschooler.com/homeschool-organization-ideas-for-small-spaces

    Reply

    • Hi Heidi,
      You have some errors in the Additional CSS section, that is why there is an error.
      Nevertheless, you can give margin-top to the main wrapper(wplogout-social-wrapper) class in the code.

      Reply

      • I am not very code savvy, but I’m trying to get better.
        Do you mean this part of the code:
        .wplogout-social-wrapper {
        margin: 30px 0;
        font-size: 0;
        }

        If so, I changed the 30 to 100 and still didn’t see a difference. Should the number be a lot larger to see a difference or is that the wrong one to change?

        Reply

  35. hi Suraj,

    great post. I’ve just implemented all the above, but would like my social share buttons on the side like you have on the website…how can that be done?

    also, how do i add a border on the right of each social sharing container?

    Reply

  39. Firstly, thanks a bunch Suraj, for making it so crystal clear even for non-techies.

    Posting something that happened with one of our sites, when we copied the Elements code above, for anyone else who might face the same problem.
    (Note: the problem does not occur on another site of ours where we have been using this)

    The Problem:
    On the front-end, the WhatsApp section in the sharing bar showed the text: ” target=”_blank” rel=”nofollow”> on the left of the WhatsApp SVG button.

    We realised, this happens because there is some extra bit of code, which we removed after some tinkering. In the line:
    —–
    <a class="wplogout-social-sharing wplogout-social-whatsapp" href="https:// API. whatsapp. com/send?text=
    —–
    please remove this part within brackets: [ echo ” “;] after $wplogoutTitle; and before echo $wplogoutURL;?>

    Thanks
    WI

    Reply

  40. Putting the line here again as it changed after we commented.

    The line where you have to remove the extra part [echo ” “; ] is:
    ?text=

    Reply

  41. In this instance, the pinterest button creates a link from the smallest image on the page. How can I alter it to force it to pin a specific image?

    Reply

  43. Thank you, Suraj. This is just what I needed!
    A quick question – how do I unhide “Share on” on mobile?
    I know the solution in on this code, but clueless…
    Share on:

    Reply

  44. Amazing tutorial! I had a question about post titles. When I am sharing an article with an apostrophe, it changes the output to ’.

    I was wondering if there’s an addition to the code that would fix that. Thanks in advance!

    Reply

  45. Suraj,

    Just wanted to say thank you for sharing this code, most plugins are bloated but this code is simple and works

    Thank you

    Reply

  46. Hey there.
    I applied your code it worked but.
    Change code of pinterest to telegram & reddit to email.
    I was not able to get the background colour for the icons.
    I checked the css code it was perfect.
    I hope you can help me.

    Reply

  47. it shows following error in whatsapp
    ” target=”_blank” rel=”nofollow”>

    and also in facebook it shows – “href should represent a valid URL” after clicking

    Reply

  49. Hello Suraj,

    Thanks for sharing a valuable tutorial. I have 2 questions:-
    1. How I can add Telegram here?
    2. Why your name is showing here? Should I remove this with my website name (e.g. my website’s name – “mysite”). So I should put “mysite” after deleting “wplogout”?

    Reply

    • Hi Jaskaran,
      1. I think I mentioned Telegram code somewhere in the tutorial.
      2. I have mentioned changing my Twitter handle to yours.
      Note: Please change your Twitter Handle in the above Twitter Sharing Link. Search for via=wplogout and replace it with via=yourtwitterusername in the above code

      Reply

  52. Thank you very much for this article.

    It is a simple and light way to integrate the share buttons on social networks.

    Is it possible to do this with the same element?

    I want to add title post on a “more info” Whatsapp Button.

    if i click button Whatsapp “MORE INFO” Open Whatsapp and directly chat me with some text like this : I Want more info About this post:

    I have thought of a code similar to this:

    <a href="https://api.whatsapp.com/send?phone=+myphonenumber&text=I%20Want%20more%20info%20About%20this%20post%20” target=” _blank”>

    But it does not work.

    how to get post title automatic?

    Reply

  53. Thank you very much for this article.

    It is a simple and light way to integrate the share buttons on social networks.

    Is it possible to do this with the same element?

    I want to add title post on a “more info” Whatsapp Button.

    if i click button Whatsapp “MORE INFO” Open Whatsapp and directly chat me with some text like this : I Want more info About this post:

    I have thought of a code similar to this:

    < a href=https://api.whatsapp.com /send?phone=+myphonenumber&text=I%20Want%20more%20info%20About%20this%20post%20 < ? p h p the_title(); ?

    But it does not work.

    how to get post title automatic?

    Reply

Leave a Comment