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:


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?


This is the code I see on notepad++:

    <div class="entry-content">
    $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 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 class="st_twitter_hcount" displaytext="Tweet" st_processed="yes">
<span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;" class="stButton">
<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 class="stArrow">
<span class="stButton_gradient stHBubble" style="display: inline-block;">
<span class="stBubble_hcount">0
<span id="sv-read-article" class="btn btn-default">Continua a leggere <span class="meta-nav">»</span></span>

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 {

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

  • I use Sociable and it is pretty neat, but it looks like you've already tried it and it doesn't work you. If I understand correctly from the photo, it looks like a CSS problem. Why don't u give us a link to the website so it's easier to help u?
    – kat_indo
    Mar 26, 2014 at 21:59
  • Unfortunately the website is on localhost, so I have no way to show you the website. I will edit the question to add some code, hope it will help.
    – Terix
    Mar 26, 2014 at 23:05
  • @kat_indo does Sociable allow to place the buttons anywhere you want? I used ShareThis because of this feature and I didn't find it on Sociable, but maybe I have overlooked it. Do you have any clue?
    – Terix
    Mar 26, 2014 at 23:27

3 Answers 3


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'];

                '<a href="%1$s" title="%2$s" alt="%2$s">%3$s</a>',

    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(){


        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


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.


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.

  • I'll give a try to your solution
    – Terix
    Mar 26, 2014 at 23:24
  • It seems to work. Much simpler than the accepted answer. A downside with a production or shielded environment though: I can't confirm this works until the site I'm working on goes live. Working on localhost and on a live server with IP based restrictions during development. So the social media sites cannot find the articles to share.
    – rkeet
    Aug 28, 2014 at 19:09

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.