How to Create Social Sharing Buttons in GeneratePress without Plugin?

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

1. I want social sharing buttons, design, effects everything like your site has.

   Reply

   • 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

       • Hi, Thank you for the input. I will update this tutorial soon.

         Reply

         • Hi Suraj,

           Sidebar & Social Share, Whatsapp Link is not working.

         • Hi Sachin, Thank you for letting me know. Recently there is a problem with WhatsApp, I am looking for the fix and I will post the update soon.

         • I have updated the link for WhatsApp. Please check it.
           Thank You

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

     • where is Class Or ID I am Not Understand, give A Full Details

       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

4. Great design, I have also added the shadows and it looks great

   Reply

   • Thank you for using it.

     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 Joey, Please use this code

     .wplogout-social-wrapper {
          text-align:center;
     }
     

     Reply

     • That works, thank you Suraj.

       Reply

       • Glad, its working for you, Joey 🙂

         Reply

7. Amazing, I did it, thank you Suraj Katwal

   Reply

   • Cheers Alex ✅

     Reply

8. where to change the twitter link , can you highlight that portion

   Reply

   • Hi Abhishek, there is a via=wplogout in a Twitter link change that wplogout to your Twitter handle.
     Thanks

     Reply

     • Sir I can’t Understand j Kaise Change Krna Hai, Please is That Possible Aggr aap Koe Screen Short Share kr de jeh via=wplogout Twitter Link issue ka. ki j kehsey krna hai shi.

       Reply

       • Hi Sahil,
         Search using Ctrl+F and replace it.
         Thanks

         Reply

9. Unable to execute PHP as DISALLOW_FILE_EDIT is defined.

   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

10. Your post is a lifesaver. Thank you so much!

    Reply

    • Thank you for implementing it into your site 🙂

      Reply

11. Your post was very helpful and it worked on my site. Thanks!

    Reply

    • Thank you for using it, Tiina 🙂

      Reply

12. Hello, that you for this amazing piece of code. Can you please tell me how do I increase the spacing between the icons?

    Reply

    • Hello, You can see I have pasted CSS code in the first replied comment. Remove the existing Social Sharing Buttons CSS code and paste that CSS code from the comment section.
      Thanks

      Reply

      • thanks i will be waiting

        Reply

13. Suraj, your a life saver.
    I hope your doing well?

    I’m wondering how could i add another social platform like messenger?

    Reply

    • Hi Huseyin, Thank you for your comment and happy to help.
      Soon I will figure it out and update the tutorial

      Thanks

      Reply

      • Hi Suraj,

        Thanks a lot for this code. I’m interesting too for the messenger link if it’s possible 🙂

        Thank you

        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

    • Hi Olarewaju,
      Please Search for via=wplogout and replace it with via=yourtwitterusername in the above code
      Thanks

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

      • Hello.
        Can I have the email code too?

        Thanks

        Reply

        • Hi Anibal, I will update the tutorial soon.
          Thanks

          Reply

        • Hi Anibal,
          I have updated the tutorial with mix and email code please check it (also check CSS code)
          Thanks

          Reply

16. Hi, the pinterest button I created broke recently. Just left with the black unstyled Pinterest icon instead. How to fix?

    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

          • Yes, fixed! It was caused by the Pinterest widget… Thanks for your feedback!

          • Glad, it’s working. 🙂

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

    • Thank you Wendy for using my solution to create Social Sharing buttons.

      Reply

19. Hi Suraj,

    Great, how do you add Instagram?

    Thank you 🙂

    Reply

    • Instagram is a simple photo-sharing platform through your mobile devices so there isn’t any way for Instagram.
      Thanks

      Reply

20. Hi,

    I’m dropping by to say thank you. Appreciate very much on this tutorial.

    Thumbs up and have a good day.

    Reply

    • Thank You Melvin for your comment.
      It means a lot to me. 🙂
      Cheers

      Reply

21. thanks. I have learned a lot from you

    Reply

    • Welcome mate 🙂

      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 Ian,
      There are many ways but I prefer not to use them as they require JS.
      Thanks

      Reply

23. How can I show these buttons in mobile and tablet only?

    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

    • Hi Matt,
      Step 2 is all about CSS code. Please copy it and paste it into your site’s Additional CSS.
      It’s clearly over the site.
      Thanks

      Reply

      • Hi Suraj,

        Sorry, I mean list item 2 in step 1.

        I’m not at step 2 yet.

        Cheers,

        Matt

        Reply

        • Hi,
          Copy the code from list 2 and follow list 1 to paste the code.
          Thanks

          Reply

25. It’s not showing on pages. any solution?

    Reply

    • You can select Pages > All Pages in Display Rules.
      Thanks

      Reply

26. Hi suraj,
    How i use webp images in WordPress.
    Like yours blog.🙏🙏

    Reply

    • Hi Rintu,
      I am using Bunny Optimizer for webp
      Thanks

      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 Tibor, I have set my social sharing to nofollow.
      Please leave it as it is.
      Thanks

      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

        • Hi Tibor,
          By using nofollow, our pages doesn’t pass the link juice to other external websites. so, it’s an actually a good idea to enable nofollow in social sharing buttons.
          Thanks

          Reply

          • thanks!
            T

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

29. Hello Suraj,

    How we can use rounded icons and separated from each other?
    I tried but couldn’t manage

    Reply

    • Hi Nedim,
      You can use the border-radius CSS property.
      Thanks

      Reply

30. Hi Suraj,
    thanks for your great work!

    What must I write for Telegram and Instagram?

    Thanks!
    Swen

    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

        • I haven’t tried using block element. I will let you know when I find something interesting.
          Thanks

          Reply

          • Thanks!

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 Milan,
      I currently don’t have code. Will update later if I get to work on it.
      Thanks

      Reply

32. Fantastic post – this worked like a charm. Thank you!!

    Reply

33. Hi there. Something’s wrong with my share button. Here’s a screenshot of it prnt.sc/171wf2y

    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

        • Hi Heidi,
          You have CSS errors just about these codes.
          Please contact us.
          Thanks

          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

    • Hi Tony,
      Please check this tutorial to Create Floating Social Sharing Buttons in GeneratePress
      Thanks

      Reply

      • thank you Suraj,

        once i place the floating share buttons, how to i create a border bottom, because i have all my icons in black and when hover they show their default colour…so i need the white border bottom to create a gap in between each.

        Reply

        • Hi Tony,
          Without looking into the site I can’t recommend the CSS.
          In the meantime, you can try some CSS code to implement in the existing class.
          Thanks

          Reply

36. Definitely This Sharing Buttons are Cool, I want to Use it on my site.

    Reply