web-dev-qa-db-fra.com

Boutons de partage au bas de l'article

pour un site Web, je dois placer des boutons de partage Facebook et Twitter dans la section de pied de page de chaque article de la page du blog (où sont répertoriés tous les articles).

J'ai testé de nombreux plugins sociaux et n'ai pu obtenir ce résultat qu'en utilisant ShareThis. (J'ai testé sans chance aussi les goûts Sharebar, Sociable et Social).

Malheureusement, Sharethis a un bug de mise en page sur mon site Web qui coupe quelques pixels des boutons, vous pouvez le voir sur cette capture d'écran:

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

Je ne sais pas comment résoudre ce problème car je n'ai aucun contrôle sur les balises span imbriquées qui construisent ces boutons.

Est-ce que quelqu'un connaît un moyen de résoudre ce problème de frontière ou connaît un autre plugin social qui fait la même chose et qui fonctionne mieux?

MODIFIER:

Voici le code que je vois sur le bloc-notes ++:

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

Le code à l'intérieur de la variable $ share est remplacé au runtime par le script ShareThis et devient beaucoup plus gros avec de nombreuses balises span imbriquées:

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

J'ai trouvé la balise span imbriquée pouvant être modifiée pour résoudre le problème, mais je n'ai aucun contrôle sur celle-ci. J'ai essayé d'ajouter de la hauteur à la classe stMainservices, comme ceci:

.stMainServices {
    height:24px;
}

mais de Chrome, je vois que le style est écrasé.

pluginspostsfootersocial-sharing
1
Terix

Voici une solution qui utilise des génériques. Le code original a été dérivé de cette question que j’ai posée et à laquelle toscho a répondu. Le crédit lui revient donc pour le code original qui a conduit au code de cette réponse. Vérifiez-le ici

Tout d’abord, téléchargez et installez le pack de Genericon dans votre thème. Mettre la feuille de style genericon en file d'attente

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

Ajoutez ce qui suit à votre functions.php. Cette fonction fait tout le travail en ajoutant l'URL de partage et les génériques

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

Ajoutez maintenant <?php pietergoosen_social_share_buttons(); ?> dans votre content.php où vous devez afficher les boutons.

Pour ouvrir une fenêtre contextuelle lorsque vous cliquez sur un lien, ajoutez ce qui suit dans votre fonction enqueue_genericon_style().

wp_enqueue_script( 'pietergoosen-socialshare', get_template_directory_uri() . '/js/socialshare.popup.js', array( 'jquery' ), '' , true );

Créez maintenant un dossier js dans votre thème si vous n'en avez pas. Créez un fichier appelé socialshare.popup.js dans le dossier js. Maintenant, ajoutez ce qui suit dans ce fichier

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;

    });

});

Cela devrait faire l'affaire. Vos boutons ressembleront à ceci. Il vous suffit de styler les génériques en conséquence

Social buttons

MODIFIER

J'utilise un extrait personnalisé, je l'ai donc changé en the_excerpt() pour les besoins de cette réponse, sinon vous obtiendrez une erreur fatale.

1
Pieter Goosen

Autant que je sache, vous devriez pouvoir inclure le code suivant quelque part dans votre fichier de thème. Vous devez télécharger les icônes appropriées.

//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>

Je suis sûr que d’autres utilisent une URL standard pour le partage, mais vous comprenez. Désolé d'avance pour toutes les fautes de frappe.

2
unifiedac

C'est la solution. J'ai eu le même problème avec mes thèmes élégants "Divi", mais pas d'autres thèmes. J'ai demandé et dans le forum d'assistance la réponse est en CSS:

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

Aussi, pour la bulle de comptage:

.stHBubble {
    height: 22px !important;
}
1
ConnectSheep