Share buttons on article footer

Question

for a website I need to place facebook and twitter share buttons on the footer section of each article on the blog page (where are listed all the articles).

I tested many social plugin and was able to have this result only using ShareThis. (I've tested without luck also Sharebar, Sociable and Social likes).

Unfortunately Sharethis has a layout bug on my website that cuts off few pixels from the buttons, you can see it on this screenshot:

http://postimg.org/image/gdog4h8nz/

I have no clue on how to fix this since I have no control on the nested span tags that build those buttons.

Does anyone know a way to fix that border issue, or knows another social plugin that does the same and works better?

EDIT:

This is the code I see on notepad++:

    <div class="entry-content">
    <?php 
    $share = "<span class='st_facebook_hcount' displayText='Facebook'></span><span class='st_twitter_hcount' displayText='Tweet'></span>";
    //the_content( __( $articlefooter, 'twentythirteen' ) );
    the_content( __( '<footer id="sv-align-right" class="entry-meta">'.$share.'<span id="sv-read-article" class="btn btn-default">Continua a leggere <span class="meta-nav">&raquo;</span></span></footer>', 'twentythirteen' ) );
    ?>
    </div><!-- .entry-content -->

The code inside the $share variable gets replaced in runtime by ShareThis script, and becomes much bigger with a lot of nested span tags:

<footer id="sv-align-right" class="entry-meta">
<span class="st_facebook_hcount" displaytext="Facebook" st_processed="yes">
<span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;"     class="stButton">
<span>
<span class="stMainServices st-facebook-counter" style="background-image: url(http://w.sharethis.com/images/facebook_counter.png);">&nbsp;
<img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;"></span><span class="stArrow">
<span class="stButton_gradient stHBubble" style="display: inline-block;">
<span class="stBubble_hcount">0
</span></span></span></span></span></span>
<span class="st_twitter_hcount" displaytext="Tweet" st_processed="yes">
<span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;" class="stButton">
<span>
<span class="stMainServices st-twitter-counter" style="background-image: url(http://w.sharethis.com/images/twitter_counter.png);">&nbsp;
<img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;">
</span>
<span class="stArrow">
<span class="stButton_gradient stHBubble" style="display: inline-block;">
<span class="stBubble_hcount">0
</span></span></span></span></span></span>
<span id="sv-read-article" class="btn btn-default">Continua a leggere <span class="meta-nav">»</span></span>
</footer>

I have found the nested span tag that can be edited to fix the issue, but I have no control over it. I treied to add height to the class stMainservices, like this:

.stMainServices {
    height:24px;
}

but from Chrome I see that the style gets overwritten somehow.

Answer 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

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.

Answer 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.

Answer 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;
}