Skip to content

Instantly share code, notes, and snippets.

@DougBeney
Created June 7, 2016 18:58
Show Gist options
  • Save DougBeney/f760798a2bf4a5e8dde2c1023de8fda8 to your computer and use it in GitHub Desktop.
Save DougBeney/f760798a2bf4a5e8dde2c1023de8fda8 to your computer and use it in GitHub Desktop.
Add social sharing buttons to the top of all your Wordpress posts. (Add this code inside of functions.php)
function crunchify_social_sharing_buttons($content) {
if(is_singular() || is_home()){
// Get current page URL
$crunchifyURL = get_permalink();
// Get current page title
$crunchifyTitle = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$crunchifyThumbnail = 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='.$crunchifyTitle.'&url='.$crunchifyURL.'&via=1DesignLife';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL;
$googleURL = 'https://plus.google.com/share?url='.$crunchifyURL;
$bufferURL = 'https://bufferapp.com/add?url='.$crunchifyURL.'&text='.$crunchifyTitle;
// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&media='.$crunchifyThumbnail[0].'&description='.$crunchifyTitle;
// Add sharing button at the end of page/page content
$variable .= '<!-- Crunchify.com social sharing. Get your copy here: http://crunfy.me/1EFBLtA -->';
$variable .= '<div class="crunchify-social">';
$variable .= '<a class="crunchify-link crunchify-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
$variable .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
$variable .= '<a class="crunchify-link crunchify-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>';
$variable .= '<a class="crunchify-link crunchify-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>';
$variable .= '<a class="crunchify-link crunchify-pinterest" href="'.$pinterestURL.'" target="_blank">Pin It</a>';
$variable .= '</div>';
return $variable.$content;
}else{
// if not a post/page then don't include sharing button
return $variable.$content;
}
};
add_filter( 'the_content', 'crunchify_social_sharing_buttons');
Style.css
.crunchify-link {
padding: 4px 8px 6px 8px;
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);
}
.crunchify-link:hover,.crunchify-link:active {
color: white;
}
.crunchify-twitter {
background: #00aced;
}
.crunchify-twitter:hover,.crunchify-twitter:active {
background: #0084b4;
}
.crunchify-facebook {
background: #3B5997;
}
.crunchify-facebook:hover,.crunchify-facebook:active {
background: #2d4372;
}
.crunchify-googleplus {
background: #D64937;
}
.crunchify-googleplus:hover,.crunchify-googleplus:active {
background: #b53525;
}
.crunchify-buffer {
background: #444;
}
.crunchify-buffer:hover,.crunchify-buffer:active {
background: #222;
}
.crunchify-pinterest {
background: #bd081c;
}
.crunchify-pinterest:hover,.crunchify-pinterest:active {
background: #bd081c;
}
.crunchify-social {
margin: 0px 0px 25px 0px;
-webkit-font-smoothing: antialiased;
font-size: 12px;
}
a.crunchify-link {
color: white !Important;
}
a.crunchify-link:hover {
text-decoration: none;
}
@Crunchify
Copy link

Thanks for sharing Crunchify Code Doug. Can you please make below corrections?

  1. Change Short link in above code snippet from http://crunfy.me/1EFBLtA to http://crunchify.me/2aAAlvK
  2. Twitter via=1DesignLife to via=Crunchify
  3. Provide proper credit in the top of the code snippet with URL: https://crunchify.com/how-to-create-social-sharing-button-without-any-plugin-and-script-loading-wordpress-speed-optimization-goal/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment