Social share buttons – GeneratePress

Posted in Tech by:

This is a post on how you can Add Social share buttons – 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 and below is the screenshot of how it looks like

custom share button for generatepress
screenshot of custom share button without javascript


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 = ‘’.$tophitsbuttonTitle.’&url=’.$tophitsbuttonURL.’&via=tophitsbutton’;
$facebookURL = ‘’.$tophitsbuttonURL;
$googleURL = ‘’.$tophitsbuttonURL;
$bufferURL = ‘’.$tophitsbuttonURL.’&text=’.$tophitsbuttonTitle;
$whatsappURL = ‘whatsapp://send?text=’.$tophitsbuttonTitle . ‘ ‘ . $tophitsbuttonURL;
$linkedInURL = ‘’.$tophitsbuttonURL.’&title=’.$tophitsbuttonTitle;
// Based on popular demand added Pinterest too
$pinterestURL = ‘’.$tophitsbuttonURL.’&media=’.$tophitsbuttonThumbnail[0].’&description=’.$tophitsbuttonTitle;
// Add sharing button at the end of page/page content
$content .= ‘‘;
$content .= ‘

$content .= ‘


$content .= ‘Facebook‘;
$content .= ‘Google+‘;
$content .= ‘Buffer‘;
$content .= ‘WhatsApp‘;
$content .= ‘LinkedIn‘;
$content .= ‘Pin It‘;
$content .= ‘

return $content;
// if not a post/page then don’t include sharing button
return $content;
add_filter( ‘the_content’, ‘tophitsbutton_social_sharing_buttons’);


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;
Need more information on Social share buttons – GeneratePress ? Click LEARN More or FIND OUT MORE on image BELOW 👇

More from Generatepress

Check post from Tech category

Leave a comment

Top music – Naija Free MP3 UPLOAD AND downLoads

TopHits is a digital music, podcast, and video streaming service that gives you access to millions of songs, Gossips and other content from artists all over the world. Basic functions such as playing music are totally free, but you can also choose to upgrade to Premium.
We are #1 Nigerian latest music streaming at the moment.  There are no premium accounts for artists, and free accounts include unlimited storage, whether you have one song or one thousand.

How to upload a track on

To upload your music on please follow below guides. 

  1. Log in or create a free account on Tophits
  2. After you have created the account on tophits message the admin on WhatsApp  for your account to be upgraded (Your account must be upgraded before you can post a song.)
  3. After your account has been upgraded log in
  4. Click on Upload located closely to your profile picture on menu bar.
  5. Enter your song details(eg. Title, song description, cover or artwork, stream or your mp3, artist name, genre, etc.)
  6. Click submit(Once you are done click on submit and wait for admin approval)

NB: To make admin approval of your song faster on tophits please send direct message notifying him of your new pending track.