Leave a Reply

3 comments

  1. 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&amp;title=%2$s&amp;summary=%3$s&amp;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&amp;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&amp;title=%2$s',
            'text' => esc_attr(__('StumbleUpon.', 'pietergoosen' )),
            'icon' => '<span class="genericon genericon-stumbleupon"></span>'
        ),
        'digg' => array (
            'url'  => 'http://digg.com/submit?phase=2&amp;url=%1$s&amp;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&amp;fs=1&amp;to&amp;su=%1$s&amp;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="%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

    Social buttons

    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.

  2. As far as I know, you should be able to include the following code in your theme file somewhere. You would need to upload the appropriate icons.

    //Facebook Share
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo get_permalink() . '&p[title]=' . get_the_title(); ?>"><img src="[facebook icon url]" /></a>

//Twitter Share
<a href="https://twitter.com/intent/tweet?url=<?php echo get_permalink() . '&text=' . get_the_title(); ?>"><img src="[twitter icon url]" /></a>

//Google+ Share
<a href="https://plus.google.com/share?url=<?php echo get_permalink(); ?>"><img src="[google+ icon url]" /></a>

    I’m sure there are others that use a standard URL for sharing, but you get the point. Sorry in advance for any typos.

  3. This is the solution. I had the same problem with my Elegant Themes “Divi”, but not other themes. I asked and in support forum the answer is in CSS:

    .stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {
    height: 28px !important;
}

    Also, for the count bubble:

    .stHBubble {
    height: 22px !important;
}