webentwicklung-frage-antwort-db.com.de

Teilen Sie Schaltflächen in der Artikelfußzeile

für eine Website muss ich Facebook- und Twitter-Freigabeschaltflächen in der Fußzeile jedes Artikels auf der Blogseite platzieren (wo alle Artikel aufgelistet sind).

Ich habe viele Social Plugins getestet und konnte dieses Ergebnis nur mit ShareThis erzielen. (Ich habe ohne Glück auch Sharebar, Sociable und Social Likes getestet).

Leider hat Sharethis einen Layout-Fehler auf meiner Website, der einige Pixel von den Schaltflächen abschneidet. Sie können ihn auf diesem Screenshot sehen:

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

Ich habe keine Ahnung, wie ich das beheben kann, da ich keine Kontrolle über die verschachtelten span-Tags habe, die diese Schaltflächen erstellen.

Kennt jemand eine Möglichkeit, dieses Grenzproblem zu beheben, oder kennt ein anderes soziales Plugin, das dasselbe tut und besser funktioniert?

BEARBEITEN:

Dies ist der Code, den ich auf Notepad ++ sehe:

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

Der Code in der $ share-Variablen wird in der Laufzeit durch ShareThis-Skript ersetzt und mit vielen verschachtelten span-Tags viel größer:

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

Ich habe das verschachtelte span-Tag gefunden, das bearbeitet werden kann, um das Problem zu beheben, habe aber keine Kontrolle darüber. Ich habe mich bemüht, der Klasse stMainservices Höhe zu verleihen:

.stMainServices {
    height:24px;
}

aber von Chrome sehe ich, dass der Stil irgendwie überschrieben wird.

1
Terix

Hier ist eine Lösung, die Generika verwendet. Der ursprüngliche Code wurde von dieser Frage abgeleitet , die ich von toscho gestellt und beantwortet habe. Daher wird ihm der ursprüngliche Code zugesprochen, der zu dem Code in dieser Frage geführt hat Antworten. Probieren Sie es hier aus

Laden Sie zuerst das Genericon Pack in Ihr Theme herunter und installieren Sie es. Rufen Sie das genericon-Stylesheet auf

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

Fügen Sie Ihrer functions.php Folgendes hinzu. Diese Funktionen erledigen die ganze harte Arbeit, indem sie die Freigabe-URL und die genericons hinzufügen

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

Fügen Sie nun <?php pietergoosen_social_share_buttons(); ?> in Ihre content.php ein, wo Sie die Schaltflächen anzeigen müssen.

Um ein Popup zu öffnen, wenn auf einen Link geklickt wird, fügen Sie Folgendes in Ihre Funktion enqueue_genericon_style() ein.

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

Erstellen Sie jetzt einen js-Ordner in Ihrem Thema, wenn Sie keinen haben. Erstellen Sie eine Datei mit dem Namen socialshare.popup.js im Ordner js. Fügen Sie nun Folgendes in diese Datei ein

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;

    });

});

Dies sollte den Trick machen. Ihre Schaltflächen sehen dann so aus. Sie müssen nur die Genericons entsprechend stylen

Social buttons

EDIT

Ich verwende einen benutzerdefinierten Auszug, daher habe ich diesen zum Zweck dieser Antwort in the_excerpt() geändert. Andernfalls wird ein schwerwiegender Fehler angezeigt.

1
Pieter Goosen

Soweit ich weiß, sollten Sie in der Lage sein, den folgenden Code irgendwo in Ihre Designdatei aufzunehmen. Sie müssten die entsprechenden Symbole hochladen.

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

Ich bin mir sicher, dass es andere gibt, die eine Standard-URL für das Teilen verwenden, aber Sie verstehen, worum es geht. Entschuldigung im Voraus für Tippfehler.

2
unifiedac

Das ist die Lösung. Ich hatte das gleiche Problem mit meinen eleganten Themen "Divi", aber nicht mit anderen Themen. Ich fragte und im Support-Forum ist die Antwort in CSS:

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

Auch für die Zählblase:

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