Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
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 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 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 at 23:27

2 Answers 2

up vote 1 down vote accepted

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.

share|improve this answer

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.

share|improve this answer
    
I'll give a try to your solution –  Terix Mar 26 at 23:24

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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