How to insert whatsapp, facebook,twitter,google+ sharing button bellow post without plugin in wordpress site



How to insert whatsapp, facebook,twitter,google+ sharing button bellow post without plugin.
Plugin is what make wordpress website a lively script because a beginner can design a professional wordpress site with the help of plugin but there are side effect or negative effects that comes with plugins especially when it numerous. 
Too many plugins slow the speed of website which make the user uncomfortable to access. Today am going to show you how to insert whatsapp sharing button without plugin. 

 I. Download a whatsapp icon or picture of your choice. 
2. Save it inside your wordpress theme image file Example: wp-content >> themes >> your theme name>> image file and save. 
 3. Copy the below code and insert or paste in your function.php and save.

function wa_btn_shortcode($waatts) {
    extract(shortcode_atts(array(
    "waatts" => get_option('wa_btn'),
           "title" => get_the_title(),
           "url" => get_permalink(),
    ), $waatts));
    if (!empty($waatts)) {
        foreach ($waatts as $key => $option)
            $waatts[$key] = $option;
     }
     if (!isset($waatts['tracking'])) {$tracking = "";} else {$tracking='?utm_source=WhatsApp%26utm_medium=IM%26amp;utm_campaign=share%20button';}
     $btn = '<li class="wabtn_container"><a href="whatsapp://send?text='.$title.' - '.$url.$tracking.'" class="wabtn">whatsapp</a></li>';
     return $btn;
}
add_filter('widget_text', 'do_shortcode');
add_shortcode('whatsapp', 'wa_btn_shortcode');

4. Copy below code and paste inside post-single.php below your post tag and save.
    <?php echo do_shortcode('[whatsapp]'); ?>

Note: 1 make sure you save your whatsapp icon or image with whatsapp.png. 
2. Make sure you zoom your desktop ctrl+ or view in mobile before you can see whatsapp sharing button.
How to insert facebook, twitter,google+ sharing button without plugin. 
1 download facebook,google+ twitter icon and save them at theme image file just as above (whatsapp)instruction 

2. Copy and paste the bellow code inside bellow post-singl.php page and save. 

3. Make sure the name of the image saved is corresponding with the red code bellow.

4. Make sure you check wether it is the icon is saved with png or other format. ‎

 <li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.nigeriastreet.com&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png"></a></li>
 
<li><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fwww.nigeriastreet.com&text=:%20http%3A%2F%2Fwww.nigeriastreet.com&via=ugwuekevichy" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20'  + encodeURIComponent(document.URL)); return false;"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png"></a></li>

 <li><a href="https://plus.google.com/share?url=http%3A%2F%2Fwww.nigeriastreet.com" target="_blank" title="Share on Google+" onclick="window.open('https://plus.google.com/share?url=' + encodeURIComponent(document.URL)); return false;"><img src="<?php bloginfo('template_directory'); ?>/images/gplus.png"></a></li>
  
 <?php echo do_shortcode('[whatsapp]'); ?>

 
Notice: make sure you add the style of your choice by going to style.css and locate the li design







Post a Comment

Comment Here by clicking below link

Previous Post Next Post

Comments