Teilen Button und Twitter Button sauber einbinden HTML Code?

    Hallo Leute,

    habe nun sehr zur Freude herausgefunden, wie ich die Buttons von Facebook und Twitter jeweils unter meine Artikel einbinden kann.

    Nun habe ich aber das Problem, dass wenn ich die Codes für die Buttons in der php. Datei eingefügt habe, mir diese jeweils untereinander im Browser angezeigt werden.

    Ich hätte aber gerne, dass die Buttons nebeneinander sind, und wenn es geht auf der rechten Seite unter den Artikeln.

    Kann mir den jemand sagen, wie ich das hinbekomme?

    Vielen lieben Dank für die Hilfe!

    Grüße

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Mit ein wenig CSS-Kenntnissen und Arbeiten in style.css

    Finde heraus, wie die umgebenden div-Elemente genannt sind ([FONT=Courier New]<div id="irgendwas1">[/FONT] oder [FONT=Courier New]<div class="irgendwas2">[/FONT], und setze die auf rechts-floatend in der style.css:

    Code
    #irgendwas1 { float: right; }
.irgendwas2 { float: right; }

    Je nachdem, was passt. Ich hoffe, Du kannst ein bissel was mit HTML und CSS anfangen, sonst wird's ein Abenteuer :-)

    Hallo hedu,

    erst einmal danke für die Antwort.

    Ja das ist das kleine Problem, ich kenne mich leider in CSS/HTML nicht wirklich gut aus. Deswegen bin ich um so mehr auf "deine" Hilfe angewiesen.

    Meinst du jetzt, dass ich das float:right direkt im Code vom Button ändern muss oder im CSS.style?

    Z.B. habe ich jetzt hier mal den code für den "teilen-button":

    [COLOR=Red]<div class="fb-like" data-href="http://www.safety-for-you.de" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true" data-action="recommend" data-font="tahoma"></div>[/COLOR]

    Muss ich es dort ändern, also nach "fb-like"?
    Wenn in der Css.stlye Datei, woher weiß ich in welcher Zeile das ganze steht?

    Und nochmal eine ganz andere Frage, die Buttons sollen ja unter jeden Artikel. Sobald man diesen dann in diesem Fall teilt, soll ich nicht meine Hauptseite erscheinen (safety-for-you), sonder der link zu den jeweiligen Artikeln?

    Danke für deine/eure Hilfe.

    Grüße

    Klar, Du kannst das auch direkt in den Code setzen:

    Code
    <div class="fb-like" [COLOR=Red]style="float: right;"[/COLOR] ...

    Oder eben etwas neu in style.css eintragen:

    Code
    div.fb-like { float: right; }

    was ich persönlich vorziehe.

    Dass der jeweilig verlinkte Artikel geteilt werden soll, ist eine andere Baustelle. Entweder Du machst es Dir einfach, und nimmst einfach den Code von addthis.com. Da musst Du dann über nix nachdenken. Ich empfehle dabei gleich das Ganze mit Registrierung, weil Du dann auch Infos bekommst über's Teilen.

    Oder Du kannst bei [COLOR=Red]data-href[/COLOR] was anderes eintragen als [COLOR=Red]http://www.safety-for-you.de[/COLOR]. Z.B. mit einem PHP-Code:

    PHP
    echo $_SERVER['SERVER_NAME'] . $_SERVER['PHP_SELF'];

    Also:

    PHP
    <div class="fb-like" 
data-href="<?php echo $_SERVER['SERVER_NAME'] . $_SERVER['PHP_SELF']; ?>" 
data-send="true"  data-layout="box_count" data-width="450" 
data-show-faces="true"  data-action="recommend" data-font="tahoma"></div>

    Bitte gleich im Quellcode der Seite nachschauen wenn Du das einbaust, ob da eh was Gescheites steht. Meine Angaben sind ohne Gewähr, weil ich sie grad gebe, ohne gleichzeitig zu testen.

    Aber vielleicht findest Du bei Facebook für das Social Plugin schon was, das Dir das erspart, oder Du suchst Dir dafür ein Wordpress-Plugin. Gibt eh sehr viele zu dem Thema.

    Hallo hedu,

    das AddThis kannte ich gar nicht, ist für mich aber so das einfachste.
    Das mit dem einfügen hat ganz gut geklappt, nur habe ich ein Problem.

    Wenn du mal auf meine Seite gehst, habe ich dort einen Testartikel, unten sind nun die Buttons. Wie du aber sehn kannst ist der Google "Gefällt mir" Button nicht sauber auf seiner Position. So dass er halb verschwindet.

    Hier der Code, den ich eingefügt habe:
    [COLOR=Red]
    <div class="addthis_toolbox addthis_default_style ">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    <a class="addthis_button_tweet"></a>
    <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
    <a class="addthis_counter addthis_pill_style"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis…e9fd13c66ecbd9d"></script>[/COLOR]

    Was muss ich ändern, damit der Facebook Button richtig angezeigt wird?
    Muss noch ergänze, die Anzeige ist nur nicht richtig, sobald du auf Gefällt mir klickst.

    Des weiteren würde ich die Buttons gerne näher an den Text ran holen und ich würde gerne über die Buttons schreiben "Hat der Atikel dir gefallen".

    Was mich noch stört habe ich gesehn, wenn ich auf Gefällt mir klicke und dann in Facebook schaue, kommt als Anzeigebild "Feedburner". Warum? Ich hätte gerne mein Artikelbild als Bild?


    Danke für deine Hilfe!

    Liebe Grüße

    Einmal editiert, zuletzt von Sven89 (20. Oktober 2011 um 10:12)

    Sorry, aber zu viele Fragen mit zuviel Arbeit, da fehlt mir die Zeit dazu. Du musst Dir einfach CSS-Wissen aneigenen, wenn Du Dich mit solchen Details beschäftigen willst.

    Schnapp Dir einen anderen Code von addthis, wenn der hier halb verschluckt wird. Da kannst Du eh nicht eingreifen, weil das in Wirklichkeit bei addthis liegt ("iframe"). Mann kann aber ein bissel eingreifen, wie das aussehen soll. Siehe dazu https://www.addthis.com/help/custom-buttons#.TqB74HJglvA

    Näher an Text ranholen: mit CSS

    Suche in style.css nach

    Code
    .post{
 width:100%;
 margin:0 0 40px 0;
}

    und mach daraus:

    Code
    .post{
 width:100%;
 margin:0;
 }

    Was drüber schreiben: hängt davon ab, wie Du den Code eingebaut hast bzw. was das Thema bietet. In single.php? Dann einfach davor was schreiben. addthis bietet auch ein WP-Plugin, vielleicht kannst Du da was konfigurieren.

    Feedburner: kein Wunder, Du benutzt ja auch einen Feedburner für Deinen RSS Feed. Das wirst Du also nicht so schnell los, aber vielleicht ....:

    Artikelbild im RSS-Feed: ein bissel basteln. Siehe dazu auch


    Alles Gute.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden