Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save ccurtin/1808031122a7f7c23bdb to your computer and use it in GitHub Desktop.
Save ccurtin/1808031122a7f7c23bdb to your computer and use it in GitHub Desktop.
Custom Social Sharing Buttons for Wordpress
<?php
/*
http://stackoverflow.com/questions/12448134/social-share-links-with-custom-icons
http://petragregorova.com/articles/social-share-buttons-with-custom-icons
wp_enqueue_style('fontAwesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css', array(), '4.3.0', 'all');
use in template files:: <?php echo do_shortcode('[social_sharing]') ; ?>
*/
function social_sharing()
{
extract(shortcode_atts(array(), $atts));
return'
<label class="social-sharing-label" for="social-open-link">Share This Article</label>
<input type="checkbox" id="social-open-link">
<div id="social-sharing-container">
<a class="social-sharing-icon social-sharing-icon-facebook" target="_new" href="http://www.facebook.com/share.php?u=' . urlencode(get_the_permalink()) . '&title=' . urlencode(get_the_title()). '"><i class="fa fa-facebook-square"></i></a>
<a class="social-sharing-icon social-sharing-icon-twitter" target="_new" href="http://twitter.com/home?status='. urlencode(get_the_title()). '+'. urlencode(get_the_permalink()) . '"><i class="fa fa-twitter-square"></i></a>
<a class="social-sharing-icon social-sharing-icon-pinterest" target="_new" href="https://pinterest.com/pin/create/button/?url=' . urlencode(get_the_permalink()) . '&media=' . urlencode(get_template_directory_uri()."/img/logo.png") . '&description=' . urlencode(get_the_title()). '"><i class="fa fa-pinterest-square"></i></a>
<a class="social-sharing-icon social-sharing-icon-google-plus" target="_new" href="https://plus.google.com/share?url=' . urlencode(get_the_permalink()) . '"><i class="fa fa-google-plus-square"></i></a>
<a class="social-sharing-icon social-sharing-icon-linkedin" target="_new" href="http://www.linkedin.com/shareArticle?mini=true&url=' . urlencode(get_the_permalink()) . '&title=' . urlencode(get_the_title()) . '&source=' . get_bloginfo("url") . '"><i class="fa fa-linkedin-square"></i></a>
<a class="social-sharing-icon social-sharing-icon-tumblr" target="_new" href="http://www.tumblr.com/share?v=3&u=' . urlencode(get_the_permalink()) . '&t=' . urlencode(get_the_title()). '"><i class="fa fa-tumblr-square"></i></a>
<a class="social-sharing-icon social-sharing-icon-email" target="_new" href="mailto:?subject=' . urlencode(get_the_permalink()) . '&body=Check out this article I came across '. get_the_permalink() .'"><i class="fa fa-share"></i></a>
</div>
';
}
add_shortcode("social_sharing", "social_sharing");
?>
.social-sharing-container {
float: right;
display: inline;
clear: none;
text-align: right;
height: 1em;
line-height: 1;
font-size: 1.5em;
margin-top: -.1em;
margin-right: 30px;
a{
color:$accent_color_3;
&:hover{
color:$accent_color_1;
}
}
}
#social-open-link {
position: absolute;
top: -9999px;
left: -9999px;
}
.social-sharing-label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
margin: 0;
cursor: pointer;
@include btn-ghost();
}
#social-sharing-container{
@include transition(all .5s ease);
opacity:0;
}
/* Toggled State */
#social-open-link:checked ~ #social-sharing-container {
@include transition(all .5s ease);
opacity:1;
}
@zakirsajib
Copy link

does not work anymore!

@GauravSparx
Copy link

Not Working!!!

@kshor
Copy link

kshor commented Jun 13, 2018

you can use like this

<a class="instagram" target="_new" href="
https://pinterest.com/pin/create/button/?url=&media=

/images/logo.png&description=">

@khizerabbas23
Copy link

Not Working Bro

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