• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Wordpress » How To Create The Fastest Social Share Button WordPress Without Plugin

How To Create The Fastest Social Share Button WordPress Without Plugin

By Sigit Prasetya Nugroho ∙ May 24, 2020 ∙ Wordpress ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

The share button is an essential component in a blog, and the share button makes it easy for visitors to share essential articles from your site to everyone in the world. But using too many plugins reduce your web dan WordPress hosting performance. If you can make it simpler, why not. Creating your media social button without plugin is the best solution.

Lots of WordPress social media button plugins can be downloaded for free. These plugins have various advantages. But the more features in a plugin, the lower the performance and speed of our WordPress websites. That is due to the increasing number of Javascript files used.

In this WordPress tutorials, we create the share button WordPress without plugin and Javascript code in it. So the results are more satisfying in improving the performance of your WordPress site.

Share Social Media Button Without Plugin

The WordPress Share Button that we create include:

  1. Create a WordPress share button for a standard theme.
  2. Create a WordPress share button for the genesis framework.
  3. Wrap your share button in the form of a plugin (Important.)

Let’s get started: create your share button

In this article, we create share buttons for 4 types of social media sharing buttons (Twitter, Facebook, Telegram, and WhatsApp). The fourth social media is the most commonly used.

1. Create a WordPress share button for a standard theme

Add the following code in functions.php in the WordPress site theme folder you are using.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
function sp_social_sharing_buttons($content) {
global $post;
if(is_single() or is_page()){ // will show share button in post or page article
$spURL = urlencode(get_permalink());
$spTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
$spThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
$twitterURL = 'https://twitter.com/intent/tweet?text='.$spTitle.'&amp;url='.$spURL.'&amp;via=sp';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$spURL;
        $whatsappUrl = 'whatsapp://send?text='.$spTitle.' '.$spURL;
        $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$spURL.'&amp;media='.$spThumbnail[0].'&amp;description='.$spTitle;
        $telegramUrl = 'https://t.me/share?url='.$spURL;
   $sosbutton = '<div class="sp-social">';
            $sosbutton .= '<p> Share :  <a class="sp-link sp-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
            $sosbutton .= '<a class="sp-link sp-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
            $sosbutton .= '<a class="sp-link sp-telegram" href="'.$telegramUrl.'" target="_blank">Telegram</a>';
            $sosbutton .= '<a class="sp-link sp-whatsapp" href="'.$whatsappUrl.'" target="_blank">Whatsapp</a>';
        $sosbutton .= '</div>';      
        
        //showing share button before content
        return $sosbutton.$content;
        // to showing share button bottom of content use the following code :
        // echo $content.$sosbutton;
}else{
return '';
    }
 
};
add_filter( 'the_content', 'sp_social_sharing_buttons');

Add the following CSS code to the style.css file in your theme folder.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.sp-social a{
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    margin-right: 5px;
    border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
 
.sp-twitter{
    background-color: #1C9CEA;
}
.sp-facebook{
    background-color: #1774EA  ;
}
.sp-whatsapp{
    background-color: #4FCE5D;
}
.sp-telegram{
    background-color: #34A7D9;
}

2. Create a WordPress share button for the Genesis framework

Like this website, I use the Genesis framework to create themes. The use of the genesis framework is different from the standard theme. Use the following code.

Add the following code in functions.php in the genesis child theme folder you are using.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function sp_social_sharing_buttons($content) {
global $post;
if(is_single() or is_page()){ // will show share button in post or page article
$spURL = urlencode(get_permalink());
$spTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
$spThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
$twitterURL = 'https://twitter.com/intent/tweet?text='.$spTitle.'&amp;url='.$spURL.'&amp;via=sp';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$spURL;
        $whatsappUrl = 'whatsapp://send?text='.$spTitle.' '.$spURL;
        $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$spURL.'&amp;media='.$spThumbnail[0].'&amp;description='.$spTitle;
        $telegramUrl = 'https://t.me/share?url='.$spURL;
   $sosbutton = '<div class="sp-social">';
            $sosbutton .= '<p> Share :  <a class="sp-link sp-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
            $sosbutton .= '<a class="sp-link sp-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
            $sosbutton .= '<a class="sp-link sp-telegram" href="'.$telegramUrl.'" target="_blank">Telegram</a>';
            $sosbutton .= '<a class="sp-link sp-whatsapp" href="'.$whatsappUrl.'" target="_blank">Whatsapp</a>';
        $sosbutton .= '</div>';      
        
        echo $sosbutton;
        
}else{
echo '';
    }
    
    wp_enqueue_style( 'sp_social_sharing_buttons_css', plugin_dir_url( __FILE__ ) .'sp_social_sharing_buttons.css',array(),'1.0' );
};
 
add_action('genesis_entry_header', 'sp_social_sharing_buttons', 13 );

Add CSS to the previous code to enhance the sharing button.

In this example, I place the sharing button after the Entry Titles and Entry Meta. For other placement locations, please replace genesis_entry_header with the other genesis hook. You can see the reference hooks here.

3. Wrap your share button as a plugin.

I consider this important because the title of this article makes a WordPress share button without a plugin, but I teach you to make a share button plugin. My point is that the plugins you create are to represent your desires and don’t need a JS file that makes your website’s speed slow down. Also, this plugin can be used on all your websites without edit the file function in the theme folder.

1. Create a folder with name sp_social_sharing_buttons

2. Create a PHP file in the sp_social_sharing_buttons folder with the name sp_social_sharing_buttons.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function sp_social_sharing_buttons($content) {
global $post;
if(is_single() or is_page()){ // will show share button in post or page article
$spURL = urlencode(get_permalink());
$spTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
$spThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
$twitterURL = 'https://twitter.com/intent/tweet?text='.$spTitle.'&amp;url='.$spURL.'&amp;via=sp';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$spURL;
        $whatsappUrl = 'whatsapp://send?text='.$spTitle.' '.$spURL;
        $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$spURL.'&amp;media='.$spThumbnail[0].'&amp;description='.$spTitle;
        $telegramUrl = 'https://t.me/share?url='.$spURL;
   $sosbutton = '<div class="sp-social">';
            $sosbutton .= '<p> Share :  <a class="sp-link sp-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
            $sosbutton .= '<a class="sp-link sp-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
            $sosbutton .= '<a class="sp-link sp-telegram" href="'.$telegramUrl.'" target="_blank">Telegram</a>';
            $sosbutton .= '<a class="sp-link sp-whatsapp" href="'.$whatsappUrl.'" target="_blank">Whatsapp</a>';
        $sosbutton .= '</div>';      
        
       //showing share button before content
       return $sosbutton.$content;
       // to showing share button bottom of content use the following code :
       // echo $content.$sosbutton;
    }else{
          return '';
    }
wp_enqueue_style( 'sp_social_sharing_buttons_css', plugin_dir_url( __FILE__ ) .'sp_social_sharing_buttons.css',array(),'1.0' );
};
add_filter( 'the_content', 'sp_social_sharing_buttons');

3. Create a CSS file in the sp_social_sharing_buttons folder with the name sp_social_sharing_buttons.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.sp-social a{
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    margin-right: 5px;
    border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
 
.sp-twitter{
    background-color: #1C9CEA;
}
.sp-facebook{
    background-color: #1774EA  ;
}
.sp-whatsapp{
    background-color: #4FCE5D;
}
.sp-telegram{
    background-color: #34A7D9;
}

4. Compress the folder with ZIP format.

5. Upload and install the plugin on your all WordPress site

Note : you can adding social sharing icons to beautify your button in your CSS file.

Conclusion :

  1. Adding social button is important to increase your SEO rank.
  2. Not all the best-share button plugins and have a high review can adjust to your site’s needs.
  3. Too many Javascript files interfere with your WordPress hosting performance and websites speed. Check your website’s performance at pagespeed google.
  4. Please don’t use the official social media sharing buttons, because it contains Javascript code for every social media.
  5. Website performance determines your position in the Google search engine.

Another WordPress Related Post :

  • Create WordPress Slider Without Javascript
  • The Point Responsive WordPress Theme For Blogging
  • The Doctors Free WordPress Responsive Theme For Medical
  • Develop Your Site With Start Blogging The Responsive WordPress Theme
  • Zerius Theme The Free WordPress Responsive Theme
  • The Site Look Elegant With Modern Free Responsive WordPress Theme

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com