Skip to content

Instantly share code, notes, and snippets.

@nfsarmento
Last active December 6, 2021 18:24
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfsarmento/44f89ec6ef51c352adb0e721fa0b45d8 to your computer and use it in GitHub Desktop.
Save nfsarmento/44f89ec6ef51c352adb0e721fa0b45d8 to your computer and use it in GitHub Desktop.
WordPress- Custom social icons for sharing posts or pages
<?php
/**
*
* Custom social icons for sharing posts or pages
*/
if ( ! function_exists( 'ns_social_sharing_buttons' ) ) :
function ns_social_sharing_buttons() {
global $post;
// Get current page URL
$nsurl = urlencode( get_permalink() );
// Get current page title
$nstitle = htmlspecialchars( urlencode( html_entity_decode( get_the_title(), ENT_COMPAT, 'UTF-8') ), ENT_COMPAT, 'UTF-8' );
// Get Post Thumbnail for pinterest
$nsthumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
$nssitename = esc_html( get_bloginfo( 'name' ) );
// Construct sharing URL without using any script
$twitterurl = 'https://twitter.com/intent/tweet?text='.$nstitle.'&amp;url='.$nsurl.'&amp;via='.$nssitename.'';
$facebookurl = 'https://www.facebook.com/sharer/sharer.php?u='.$nsurl;
$linkedinurl = 'https://www.linkedin.com/shareArticle?mini=true&url='.$nsurl.'&amp;title='.$nstitle;
// Based on popular demand added Pinterest too
$pinteresturl = 'https://pinterest.com/pin/create/button/?url='.$nsurl.'&amp;media='.$nsthumbnail[0].'&amp;description='.$nstitle;
// Add sharing button at the end of page/page content
$content .= '<div class="ns-social-icons">';
$content .= '<h5>SHARE ON</h5>';
$content .= '<a class="ns-social-link ns-social-twitter" href="'. $twitterurl .'" target="_blank">Twitter</a>';
$content .= '<a class="ns-social-link ns-social-facebook" href="'.$facebookurl.'" target="_blank">Facebook</a>';
$content .= '<a class="ns-social-link ns-social-linkedin" href="'.$linkedinurl.'" target="_blank">LinkedIn</a>';
$content .= '<a class="ns-social-link ns-social-pinterest" href="'.$pinteresturl.'" data-pin-custom="true" target="_blank">Pin It</a>';
$content .= '</div>';
echo $content;
}
endif;
.ns-social-link {
padding: 2px 8px 4px 8px !important;
color: white !important;
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 !important;
font-weight: bolder;
}
.ns-social-link:hover,.ns-social-link:active {
color: white;
}
.ns-social-twitter {
background: #00aced;
}
.ns-social-twitter:hover,.ns-social-twitter:active {
background: #0084b4;
}
.ns-social-facebook {
background: #3B5997;
}
.ns-social-facebook:hover,.ns-social-facebook:active {
background: #2d4372;
}
.ns-social-googleplus {
background: #D64937;
}
.ns-social-googleplus:hover,.ns-socialy-googleplus:active {
background: #b53525;
}
.ns-social-pinterest {
background: #bd081c;
}
.ns-social-pinterest:hover,.ns-social-pinterest:active {
background: #bd081c;
}
.ns-social-linkedin {
background: #0074A1;
}
.ns-social-linkedin:hover,.ns-social-linkedin:active {
background: #006288;
}
.ns-social-icons {
margin: 40px 0px 0px 0px;
-webkit-font-smoothing: antialiased;
font-size: 12px;
display: block;
padding-top: 30px;
padding-bottom: 0px;
border-top: 1px dashed rgba(28,28,28,.07);
overflow: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment