Here is a solution that uses genericons. The original code was derived from this question I asked, and answered by toscho, so credit goes to him for the original code that lead to the code in this answer. Check it out here
First, download and intall the genericon pack in your theme. Enqueue the genericon stylesheet
function enqueue_genericon_style() {
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.2' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_genericon_style' );
Add the following to your functions.php. This functions do all the hard work by adding the share url and genericons
function pietergoosen_social_share_buttons() {
$services = array (
'facebook' => array (
'url' => 'https://www.facebook.com/sharer/sharer.php?u=%1$s',
'text' => esc_attr(__('Share on Facebook.', 'pietergoosen' )),
'icon' => '<span class="genericon genericon-facebook"></span>'
),
'twitter' => array (
'url' => 'http://twitter.com/home/?status=%1$s%%20-%%20%2$s',
'text' => esc_attr(__('Tweet this post!', 'pietergoosen' )),
'icon' => '<span class="genericon genericon-twitter"></span>'
),
'googleplus' => array (
'url' => 'https://plus.google.com/share?url=%1$s',
'text' => esc_attr(__('Google+1.', 'pietergoosen' )),
'icon' => '<span class="genericon genericon-googleplus"></span>'
),
'linkedin' => array (
'url' => 'https://www.linkedin.com/shareArticle?mini=true&url=%1$s&title=%2$s&summary=%3$s&source=%4$s',
'text' => esc_attr(__('linkedin.', 'pietergoosen' )),
'icon' => '<span class="genericon genericon-linkedin"></span>'
),
'reddit' => array (
'url' => 'http://reddit.com/submit?url=%1$s&title=%2$s',
'text' => esc_attr(__('Reddit.', 'pietergoosen' )),
'icon' => '<span class="genericon genericon-reddit"></span>'
),
'stumbleupon' => array (
'url' => 'http://www.stumbleupon.com/submit?url=%1$s&title=%2$s',
'text' => esc_attr(__('StumbleUpon.', 'pietergoosen' )),
'icon' => '<span class="genericon genericon-stumbleupon"></span>'
),
'digg' => array (
'url' => 'http://digg.com/submit?phase=2&url=%1$s&title=%2$s',
'text' => esc_attr(__('Digg this post!', 'pietergoosen' )),
'icon' => '<span class="genericon genericon-digg"></span>'
),
'gmail' => array (
'url' => 'https://mail.google.com/mail/?view=cm&fs=1&to&su=%1$s&t=%2$s',
'text' => esc_attr(__('Share with Gmail', 'pietergoosen' )),
'icon' => '<span class="genericon genericon-mail"></span>'
)
);
$title = the_title_attribute( array ( 'echo' => FALSE ) );
$url = urlencode( get_permalink() );
$summary = the_excerpt();
$source="";
print '<h4>' . __( 'Share this post with others', 'pietergoosen' ) . '</h4>';
echo '<div class="socialgenericons service">';
foreach ( $services as $name => $service )
{
$href = sprintf( $service['url'], $url, urlencode( $title ), urlencode( $summary ), urlencode( $source ) );
$genericon = $service['icon'];
printf(
'<a href="https://wordpress.stackexchange.com/questions/139330/%1$s" title="%2$s" alt="%2$s">%3$s</a>',
$href,
$service['text'],
$genericon
);
}
echo '</div>';
}
Now add <?php pietergoosen_social_share_buttons(); ?>
in your content.php where you need to display the buttons.
To open a pop-up when a link is clicked, add the following in your enqueue_genericon_style()
function.
wp_enqueue_script( 'pietergoosen-socialshare', get_template_directory_uri() . '/js/socialshare.popup.js', array( 'jquery' ), '' , true );
Now create a js folder in your theme if you don’t have one. Create a file called socialshare.popup.js
in the js folder. Now add the following in that file
jQuery(document).ready(function($) {
jQuery('.socialgenericons.service a').live('click', function(){
newwindow=window.open($(this).attr('href'),'','height=450,width=700');
if (window.focus) {newwindow.focus()}
return false;
});
});
This should do the trick. Your buttons will look like this. You just need to style the genericons accordingly
EDIT
I use a custom excerpt, so I changed that to the_excerpt()
for the purpose of this answer, otherwise you will get a fatal error.