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 and below is the screenshot of how it looks like

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

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;
}

🎵 Want to post your Songs? Contact me HERE

Leave a comment

Top music
How to upload a track on tophits.ng

To upload your music on tophits.ng please follow below guides. 

  1. Log in or create a free account on Tophits
  2. After you have created the account message the admin on this link or live chat 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 please send direct message notifying him of your new pending track.

What is TopHits? 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.