Social share buttons – GeneratePress

This is a post on how you can Add Social share buttons – GeneratePress below post without Javascript. If you check tophits you will see how I Created Social Sharing Buttons without JavaScript with simple CSS. If you like the look then continue read the process involved below.

If you have any of below questions, then you are at right place:

• How to Implement Social Sharing
• Simple FontAwesome Social Sharing Buttons Without JavaScript
• Social Media Sharing Buttons. No JavaScript. No tracking. Super fast.
• The Simplest way to Offer Sharing Links for Social Media
• Adding Social Share Buttons to any WordPress Page, No Plugin.
• Easy social sharing buttons without JavaScript and tracking
• DIY Social Sharing Links: Add Social Sharing Buttons without Plugin WP

Note: This tutorial is in two steps

Step-1:


function tophitsbutton_social_sharing_buttons($content) {
global $post;
if(is_singular() || is_home()){// Get current page URL
$tophitsbuttonURL = urlencode(get_permalink());
// Get current page title
$tophitsbuttonTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
// $tophitsbuttonTitle = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$tophitsbuttonThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
// Construct sharing URL without using any script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$tophitsbuttonTitle.'&url='.$tophitsbuttonURL.'&via=tophitsbutton';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$tophitsbuttonURL;
$googleURL = 'https://plus.google.com/share?url='.$tophitsbuttonURL;
$bufferURL = 'https://bufferapp.com/add?url='.$tophitsbuttonURL.'&text='.$tophitsbuttonTitle;
$whatsappURL = 'whatsapp://send?text='.$tophitsbuttonTitle . ' ' . $tophitsbuttonURL;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$tophitsbuttonURL.'&title='.$tophitsbuttonTitle;
// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$tophitsbuttonURL.'&media='.$tophitsbuttonThumbnail[0].'&description='.$tophitsbuttonTitle;
// Add sharing button at the end of page/page content
$content .= '';
$content .= '
';
$content .= '
SHARE ON

Twitter’;
$content .= ‘Facebook’;
$content .= ‘Google+’;
$content .= ‘Buffer’;
$content .= ‘WhatsApp’;
$content .= ‘LinkedIn’;
$content .= ‘Pin It’;
$content .= ‘
‘;
return $content;
}else{
// if not a post/page then don’t include sharing button
return $content;
}
};
add_filter( ‘the_content’, ‘tophitsbutton_social_sharing_buttons’);

 

Step-2:

Add below code to your style.css file of your WordPress theme


.tophitsbutton-link {
padding: 2px 8px 4px 8px !important;
color: white;
font-size: 12px;
border-radius: 2px;
margin-right: 2px;
cursor: pointer;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
margin-top: 2px;
display: inline-block;
text-decoration: none;
}.tophitsbutton-link:hover,.tophitsbutton-link:active {
color: white;
}
.tophitsbutton-twitter {
background: #00aced;
}
.tophitsbutton-twitter:hover,.tophitsbutton-twitter:active {
background: #0084b4;
}
.tophitsbutton-facebook {
background: #3B5997;
}
.tophitsbutton-facebook:hover,.tophitsbutton-facebook:active {
background: #2d4372;
}
.tophitsbutton-googleplus {
background: #D64937;
}
.tophitsbutton-googleplus:hover,.tophitsbutton-googleplus:active {
background: #b53525;
}
.tophitsbutton-buffer {
background: #444;
}
.tophitsbutton-buffer:hover,.tophitsbutton-buffer:active {
background: #222;
}
.tophitsbutton-pinterest {
background: #bd081c;
}
.tophitsbutton-pinterest:hover,.tophitsbutton-pinterest:active {
background: #bd081c;
}
.tophitsbutton-linkedin {
background: #0074A1;
}
.tophitsbutton-linkedin:hover,.tophitsbutton-linkedin:active {
background: #006288;
}
.tophitsbutton-social {
margin: 20px 0px 25px 0px;
-webkit-font-smoothing: antialiased;
font-size: 12px;
}
.tophitsbutton-whatsapp {
background: #43d854;
}
.tophitsbutton-whatsapp:hover,.tophitsbutton-whatsapp:active {
background: #009688;
}
.tophitsbutton-social h5 { color: #333; font-weight: 900;
margin-bottom: 0px;
}