Announcement

Collapse
No announcement yet.

How to add your own Social Sharing Buttons to your wordpress theme without plugins

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to add your own Social Sharing Buttons to your wordpress theme without plugins

    I have added to my wordpress blogs, this way you can add facebook share, twitter, pinterest, reddit, and even mail...and here's how:

    First you open your theme's functions file and add this code:
    PHP Code:
    /**
    * Prints HTML with social share
    */
    function viral_social_share(){
    global 
    $post;

    // Get current page URL
    $post_url urlencode(get_permalink());

    // Get current page title
    $post_title htmlspecialchars(urlencode(html_entity_decode(get_ the_title(), ENT_COMPAT'UTF-8')), ENT_COMPAT'UTF-8');
    // $post_title = str_replace( ' ', '%25', get_the_title());

    // Get Post Thumbnail for pinterest
    $post_thumbnail wp_get_attachment_image_srcget_post_thumbnail_id$post->ID ), 'full' );


    // Construct sharing URL
    $twitterURL 'https://twitter.com/intent/tweet?text='.$post_title.'&url='.$post_url;
    $facebookURL 'https://www.facebook.com/sharer/sharer.php?u='.$post_url;
    $pinterestURL 'https://pinterest.com/pin/create/button/?url='.$post_url.'&media='.$post_thumbnail[0].'&description='.$post_title;
    $mailURL 'mailto:?Subject='.$post_title.'&Body='.$post_ url;
    $redditURL 'https://reddit.com/submit?url='.$post_url.'&media='.$post_thumbna il[0].'&description='.$post_title;

    $content '<div class="vl-share-buttons">';
    $content .= '<span>'__'SHARE''viral' ) .'</span>';
    $content .= '<a title="'.__('Share on Facebook''viral').'" href="'.$facebookURL.'" target="_blank" rel="nofollow"><img src="https://www.navoditkumar.com/facebook-in.gif" width="18px" height="18px" alt="Facebook share"></a>';
    $content .= '<a title="'.__('Share on Twitter''viral').'" href="'$twitterURL .'" target="_blank" rel="nofollow"><img src="https://www.navoditkumar.com/twitter-in.jpeg" width="18px" height="18px" alt="Twitter share"></a>';
    $content .= '<a title="'.__('Share on Pinterest''viral').'" href="'.$pinterestURL.'" target="_blank" rel="nofollow"><img src="https://www.navoditkumar.com/pinterest-in.png" width="18px" height="18px" alt="Pinterest share"></a>';
    $content .= '<a title="'.__('Email''viral').'" href="'.$mailURL.'" rel="nofollow"><img src="https://www.navoditkumar.com/mail-in.png" width="22px" height="22px" alt="Email"></a>';
    $content .= '<a title="'.__('Share on Reddit''viral').'" href="'.$redditURL.'" target="_blank" rel="nofollow"><img src="https://www.navoditkumar.com/reddit-in.png" width="20px" height="20px" alt="Reddit share"></a>';
    $content .= '</div>';

    echo 
    $content;
    }

    Now you need to add the css and the image icons:
    here's the css
    Code:
    .vl-share-buttons span{
    margin-right: 10px;
    }
    
    .vl-share-buttons a{
    padding: 0 5px;
    font-size: 18px;
    display: inline-block;
    }
    
    .vl-share-buttons .fa{
    line-height: 40px;
    display: block;
    }a
    Now upload images according to the location in the code you put in functions file:
    Click image for larger version  Name:	facebook-in.gif Views:	0 Size:	496 Bytes ID:	262 Click image for larger version  Name:	mail-in.png Views:	0 Size:	892 Bytes ID:	263 Click image for larger version  Name:	pinterest-in.png Views:	0 Size:	2.2 KB ID:	264 Click image for larger version  Name:	twitter-in.jpg Views:	0 Size:	1.7 KB ID:	265


    Now all you have to do is use this code whereever you want the sharing buttons to appear.
    PHP Code:
    <?php viral_social_share(); ?>

    It will look like this:
    Click image for larger version  Name:	social_share.png Views:	0 Size:	18.1 KB ID:	266
    Similar Threads
Working...
X