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 do we make 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, many social sharing plugins are 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 the 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 the 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

Step 1: Add Social Sharing Code using Elements Module

So we are going to add a social sharing code in the 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]

Print URL

<button onclick="window.print()">Print</button>

Now let’s create social sharing buttons for the 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" aria-label="Twitter" href="https://twitter.com/intent/tweet?text=<?php echo $wplogoutTitle;?>&amp;url=<?php echo $wplogoutURL;?>&amp;via=wplogout" target="_blank" rel="nofollow noreferrer noopener"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></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 the 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 generate_after_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 generate_before_title

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

Display Rules Location on All Post

5. Hit the Publish Button.

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

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-twitter {
		fill: #fff;
    background-color: rgba(15, 20, 25, 1);
}

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

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

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

.wplogout-social-reddit {
  fill: #fff;
  background-color: rgba(255, 87, 0, 1);
}
	
.wplogout-social-sharing:hover {
  opacity: 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 needs.

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

Lastly, 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 needs. Moreover, you can customize the SVG buttons I used from iconmonstr.com.

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

Share:
Recommended Reading...

How to Collapse Table of Contents in Rank Math?

How to Add Meta Description as Excerpt in GeneratePress?

How to Add ALT Text to Gravatar Images in GeneratePress?

How to Add Phone Number and Email in GeneratePress Header?

[Fix] Links Do Not Have a Discernible Name in WordPress

How to Switch your WordPress Theme to GeneratePress?

How to Add GenerateBlocks Pattern Library in GeneratePress?

How to Migrate WP Show Posts Plugin to GenerateBlocks?

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.

146 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

      • Hello Sir, facebook share code is not working, what will I do. I have paste the code exactly given on this page.

        Kya koi backend main functionality krni pdegi kya, kuch smajh nhi aarha

        Reply

        • Hi Aman,
          The code is perfectly fine, as I am using same code in my website too.
          Can you please check steps again and confirm?
          Thanks

          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

    • I am having a similar problem. I recently started using Jetpack’s embed pin block on some of my articles. When I use this block, it replaces the pinterest share button (logo on red background) with the logo + “Share” on a smaller red background – this is the same overlay that appears on the embedded pin.

      Any thoughts?

      Reply

        • This was the root of the issue. I stopped using the Jetpack block for pinterest embeds and the problem resolved.

          I now use the custom HTML block and paste the pin embed code from Pinterest itself

          Reply

  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

  54. All of the customization articles you have shared are amazing. I have a request, can you share the child theme and customization of your website? I really loved the look your website and really want to look my site like yours (with some of the my modifications off course)

    Reply

  55. Thank you, darling! That’s an awesome code. I’ve been looking for such an option for a long time and thanks to you I installed these buttons on my site. I specified the location of the “after_entry_content” hook. But I have a block of similar entries below the content, a subscription form below it, and the social buttons are placed below it. I tried to insert the buttons above the block of similar records. I tried other locations of the hook, but nothing worked. Advise me, is it possible to place the buttons above that they would be below the content and the similar records and subscription form would be below the buttons?
    And I also added a “Share on Telegram” button. The size of the Telegram icon is 24 by 24. The other icons are 18 by 18. This probably needs to be fixed? I have set the size for all icons to 20 by 20.
    Thanks again darling.

    Reply

    • Hi Stefan,
      Thanks for the heads up.
      I have updated the tutorial and the code, please have a look.
      Let me know if it’s working for you.
      Cheers!

      Reply

  58. Hey Suraj,

    This tutorial has helped me so much, I have come back to this post over and over. Do you have code for adding a button for Flipboard?

    Thanks

    Reply

  60. Hi Suraj Katwal and thanks for all the tip and help you provide with!

    A question if i wanted to use a shortcode in order to display the social share buttons. Or show them like you do on this website (on desktop) on the side is that easy to solve?

    Reply

  61. Hello Suraj,

    Thanks for all the time and effort you have put into this article and the knowledge you’ve shared. I just found implemented your code on my site (thecookandthewriter.com). Doing this has helped me learn more about css. I also had never seen svg codes, so that’s a new learning as well.

    I would like to add an icon for Mastodon, but there is not a simple sharing link because it is a decentralized network and we have to get user input for the instance they are on. I’ve found an article that describes how to do it (kylereddoch.me/2023/02/20/creating-mastodon-share-button.html) but it gets very involved in javascript, which I don’t know.

    So two quesitons:

    1. Do you have any thoughts on how to create a function (php and html) that would capture the user’s input?

    2. How would that function be called from with the code you’ve created?

    I know that’s a big ask and I’m going to continue to try to solve the problem myself, but any suggestions would be most appreciated.

    Thanks!
    Mike

    Reply

Leave a Comment