How To Add Social Share Buttons In GeneratePress

By Suman Ghorui

Updated on:

In this tutorial, we are going to Create Social Sharing Buttons in GeneratePress Premium Theme without any Plugin. Here we are using HTML, CSS, and PHP code to create a sharing button for GeneratePress Premium Theme.

In this video, I will show you how to add Social Share Button to GeneratePress Theme without any plugin.

After watching the video, you can easily add such a beautiful Social Share Button to your website.

HTML & PHP Code

<?php
$wpjankariURL = urlencode(get_the_permalink());
$wpjankariTitle = urlencode(get_the_title());
$wpjankariImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="wpjankari-social-wrapper">
	<a class="wpjankari-social-sharing wpjankari-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $wpjankariURL; ?>" 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="wpjankari-social-sharing wpjankari-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $wpjankariTitle;?>&url=<?php echo $wpjankariURL;?>&via=wpjankari" 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="wpjankari-social-sharing wpjankari-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $wpjankariTitle; echo " "; echo $wpjankariURL;?>" 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="wpjankari-social-sharing wpjankari-social-telegram" href="https://t.me/share/url?url=<?php echo $wpjankariURL;?>&text=<?php echo $wpjankariTitle;?>" 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>
	<a class="wpjankari-social-sharing wpjankari-social-reddit" href="https://reddit.com/submit?url=<?php echo $wpjankariURL;?>&title=<?php echo $wpjankariTitle; ?>" 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>


CSS Code

/*social-sharing-buttons*/
.wpjankari-social-wrapper {
    margin: 20px auto;
    font-size: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}

.wpjankari-social-sharing {
    padding: 12px;
    flex: 1;
}

@media only screen and (max-width: 600px) {
    .wpjankari-social-sharing {
        display: inline-block;
    }
}

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

.wpjankari-social-sharing:first-of-type {
    border-radius: 6px 0 0 6px;
}

.wpjankari-social-sharing:last-of-type {
    border-radius: 0 6px 6px 0;
}

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

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

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

.wpjankari-social-telegram {
    fill: #fff;
    background-color: rgb(2, 126, 189);
}

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

Suman Ghorui

Hello, I have been doing WordPress website development for more than 7 years. Currently I am sharing this experience with you on this website.

Related Post

How to Create a Table of Contents in WordPress

GeneratePress Marketer Theme Customization

How to Create Custom Footer in GeneratePress

GeneratePress Theme Home Page Customisation

5 thoughts on “How To Add Social Share Buttons In GeneratePress”

  1. Hme kaise pata chlega ki aap jo html aur css codes share krte ho, usme koi virus hai ki nhi, aur hmra website hack wgera hoga ya nahi?

    Reply

Leave a Comment