Add Social Share Buttons In Wordpress Without Plugin How To Add Social Share Buttons In Wordpress Without Plugin?
Wordpress Blog How-to 

How To Add Social Share Buttons In WordPress Without Plugin?

Pardeep 0 Views 6 min read
5/5 - (5 votes)

How To Add Social Share Buttons In WordPress Without Plugin: If you want to add social sharing button without plugin inside your WordPress. So by following some simple steps you will be able to add social sharing buttons inside your WordPress website.

The method we are going to tell you, this method can be applied only in Generatepress Theme. If you have installed premium Generatepress Theme in your WordPress website, then you have to follow some simple steps. And social sharing buttons will be added to your blog without any plugin.

How To Add Social Share Buttons In WordPress Without Plugin?

How To Add Social Share Buttons In WordPress Without Plugin?

Add Social Share Buttons to your WordPress blog in 9 steps without using any plugin:

Step 1: Install Generatepress Theme.

Install the WordPress Generatepress theme. Note that you have to use its premium version. Dashboard>Appearance>Themes>Add new Find Generatepress Theme.

Activate Generatepress Theme: You will need the Generatepress plugin to activate the Generatepress theme. You can take it from the official website of Generatepress or from us.

Step 2: Go the Appearance>Elements.

Step 3: Add New Elements.

Click on Add New Elements. and click on Create by selecting HOOK.

Step 4: Add Hook Name Like: After Post Social Sharing Icons.

Step 5: Copy social sharing button code and past php box.

<?php
$webinsightsURL = urlencode(get_the_permalink());
$webinsightsTitle = urlencode(get_the_title());
$webinsightsImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="webinsights-social-wrapper"> <span class="hide-on-mobile">Sharing Is Caring:</span> <a class="webinsights-social-sharing webinsights-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $webinsightsURL; ?>" 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="webinsights-social-sharing webinsights-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $webinsightsTitle; echo " "; echo $webinsightsURL;?>" 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="webinsights-social-sharing webinsights-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $webinsightsTitle;?>&amp;url=<?php echo $webinsightsURL;?>&amp;via=webinsights" 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="webinsights-social-sharing webinsights-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $webinsightsURL; ?>&amp;media=<?php echo $webinsightsImage;   ?>&amp;description=<?php echo $webinsightsTitle; ?>" 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="webinsights-social-sharing webinsights-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $webinsightsURL; ?>&amp;title=<?php echo $webinsightsTitle; ?>&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="webinsights-social-sharing webinsights-social-reddit" href="https://reddit.com/submit?url=<?php echo $webinsightsURL;?>&title=<?php echo $webinsightsTitle; ?>" 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>

Scroll down after entering the code. You Will SHow Same Settings.

Step 6: Go to Setting.

Select Generate after entry content by clicking on the drop menu next to Hook

Where did Hook have to show? For this you need to do some settings. Select Generate after entry content by clicking on the drop menu next to Hook. Tick Execute PHP. Make Priority 10.

Step 7: Go to Display Rules.

Display Rules How To Add Social Share Buttons In Wordpress Without Plugin?

Make the necessary settings in the display rules. Go to Location and select Post. Leave all posts. Do not tamper with other options.

Step 8: Click Publish Button.

Step 9: Go to Appearance>Customize>Additional CSS

Go to Appearance. There, by clicking on Customize, copy and paste the below code in Additional CSS and publish it. Your Social Share Buttons have been added without the plugin.

/* After Post Social Share Design by web insights*/

.webinsights-social-wrapper {
    margin: 30px 0;
    font-size: 0;
}

.webinsights-social-wrapper span {
    font-weight: bold;
    padding-right: 10px;
    font-size: 16px;
}

.webinsights-social-sharing {
    font-size: 17px;
    padding: 7px 20px;
}

@media only screen and (max-width: 600px) {
    .webinsights-social-sharing {
        font-size: 17px;
        padding: 6px 17px;
        display: inline-block;
    }
	.webinsights-social-wrapper {
    margin: 30px 0px;
    font-size: 0;
}


}

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

.webinsights-social-sharing:first-of-type {
    border-radius: 100px 0 0 100px;
}

.webinsights-social-sharing:last-of-type {
    border-radius: 0 100px 100px 0;
}

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

}

.webinsights-social-facebook:hover {
    background-color: rgba(59, 89, 152, .8);
}

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

.webinsights-social-twitter:hover {
    background-color: rgba(29, 161, 242, .8);
}

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

.webinsights-social-pinterest:hover {
    background-color: rgba(189, 8, 28, .8);
}

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

.webinsights-social-linkedin:hover {
    background-color: rgba(0, 119, 181, .8);
}

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

.webinsights-social-whatsapp:hover {
    background-color: rgba(37, 211, 102, .8);
}

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

.webinsights-social-reddit:hover {
    background-color: rgba(255, 87, 0, .8);
}

Conclusion:

We hope that by following the steps given by us, you will be able to add Social Share Buttons to your WordPress blog without using any plugin. This method will help in maintaining the speed of your blog better.

Comment for any kind of question. or message us on instagram, Keep this blog bookmarked for information related to WordPress and blogging. You can also take advantage of the notification system. Do join our Telegram group. There you are given free theme plugins.

Read More:

Pardeep

My name is Pradeep, I tell you YouTube, blogging, digital marketing and how to earn money online with my 5 years of experience.

You May Also Like

Work from home jobs no experience 2022 What is Affiliate Marketing and How Does it Work?

What is Affiliate Marketing and How Does it Work?

Pardeep
how to grow Youtube Channel Fast How to Grow Youtube Channel Fast?

How to Grow Youtube Channel Fast?

Pardeep
How to Write Content Writing

How to Write Content Writing for Beginners: A Comprehensive Guide

Pardeep