Social Media-Button einbinden


Der Artikel besteht aus 741 Wörtern. Geschätzte Lesezeit: 02:57 Minuten

Sicher kennen das einige von Euch:

Man surft durch die Blogosphäre, sieht hier etwas und da etwas, das man sich auf seinem Blog gut vorstellen könnte. Meistens sagt man sich dann aber: Irgendwann, nur heute noch nicht und surft weiter.

Und wenn man dann tatsächlich daran geht, seine Vorhaben umzusetzen, findet man die Seiten doch zum Geier nochmal nicht wieder.

Ich habe mehrere Anläufe gebraucht, um das Theme mit den Button zumindest soweit hingebogen zu bekommen, das es meiner Vorstellung sehr nahe kommt. Perfekt ist es nicht. Aber es gefällt mir durchaus.

crazygirl Tanja eine große Hilfe

Vorbild für die Gestaltung meiner Buttons in den Artikel-Seiten war Tanjas Blog. Ich finde es durch die nicht zu großen Button überaus gelungen, wie sie wikio, Facebook und twitter bei sich eingebunden hat.

Nachdem ich es Tagelang versucht hatte, das so hinzubekommen, habe ich vor drei Tagen mal bei ihr angefragt, ob sie mir erklären könnte, wie sie die Dinge bei sich eingebunden hat. Und Sie hat mir nicht nur den Code für die single.php geschickt, sondern auch ihren css-Code gezeigt.

Aber anfangen möchte ich mit den Button neben dem Logo im Header.

Für die Stelle, wo die Button jetzt stehen, hat mein Theme schon von vornherein einen vordefinierten div-container, da dort normalerweise der Willkommenstext steht. Dieser Platz war bei mir ja schon lange verwaist, aber nichts destotrotz hatte ich den Code noch in der header.php stehen.

Nun habe ich für den Twitter-Vogel und den Feed-Button innerhalb des vorgegebenen div-Containers eine eigene Class definiert, die so ausschaut:

.twittabo {float:right;margin-right:10px;margin-left:20px;}

Der Code für den Feedburner-Button sieht so aus:

.feedabo {float:right;margin-right:10px;}

In die header.php eingebunden sind die Button wie folgt:

Feedburner:

<a title="themenfreund's RSS-Feed" href="https://themenfreund.de/feed/"><img alt="RSS-Feed abonnieren" src="&lt;?php bloginfo('template_directory'); ?&gt;/images/rss.png" /></a>

twitter:

<a title="themenfreund auf twitter folgen" href="https://twitter.com/themenfreund" target="_blank">&amp;<img alt="themenfreund bei twitter folgen" src="&lt;?php bloginfo('template_directory'); ?&gt;/images/4.png" /></a><script type="text/javascript" src="http:// twittercounter.com/embed/themenfreund/ffffff/444444"></script>

Generieren könnt ihr Euch den Code für den Zähl-Button für den Zwitscher-Dienst auf twittercounter.com. Den Feedburner-Code bekommt ihr ja, wenn ihr Euren Feed beim Dienst von google anmeldet. Natürlich müsst ihr statt themenfreund Euren twitter- bzw. Facebbok-Namen in den Code einsetzen.

Fehlen nun natürlich noch die Button auf den einzelnen Artikel-Seiten.

Den Wikio-Vote-Button habe ich per Plugin von H. Peter Pfeufer eingebunden. Die weiteren Button mit Hilfe vom Crazy Girl Tanja.

Button teilweise per iframe eingebunden

Der twitter-Button wurde daher hier per iframe eingebunden:

<iframe style="width: 110px; height: 20px;" src="http://platform.twitter.com/widgets/tweet_button.html?url=&lt;?php echo rawurlencode(get_permalink()) ?&gt;&amp;text=&lt;?php echo rawurlencode(strip_tags(get_the_title())) ?&gt;&amp;lang=de&amp;count=horizontal&amp;via=themenfreund" height="240" width="320" frameborder="0" scrolling="no"></iframe>

Der passende css-Code dazu ist:

.twittern {float:left; width:115px;margin-right:10px; margin-top:-8px;}

Der Feedburner-Button ist mit normalem HTML-Code in die single.php geschrieben:

 

und mit diesem CSS-Befehlen ausgerichtet:

.fb1 { float:left; width:125px;margin-left:10px; margin-top:-8px;}

Damit ihr meine Artikel - so sie Euch zusagen - auf Facebook empfehlen könnt, brauchts natürlich auch hier einen entsprechenden Button. Der wird, wie der Genosse twitter-Button wiederum mit einem iframe eingebunden:

<iframe style="border: currentColor; width: 120px; height: 21px; overflow: hidden;" src="http://www.facebook.com/plugins/like.php?href=&lt;?php echo urlencode(get_permalink()); ?&gt;&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=recommend&amp;font=tahoma&amp;colorscheme=light&amp;height=21" height="240" width="320" frameborder="0" scrolling="no"></iframe>

Der dazugehörige CSS-Befehl sieht so aus:

.fb1 { float:left; width:125px;margin-left:10px; margin-top:-8px;}

SEO Serachterms Tagging 2 machte Ärger

Für Leser, die wie ich das Plugin 'SEO Searchterms Tagging 2' nutzen, könnte der folgende Abschnitt interessant sein.

Denn das Plugin hat mich - ohne das ich es als den Übeltäter vermutete - fast in den Wahnsinn getrieben. Wer sich das folgende Bild anschaut, wird vermutlich sehen, was ich meine:

Das searchterm-Plugin klemmte sich einfach zwischen 2 Button
Klemmte sich zwischen twitter- und wikio-Button: Searchterm

Das Plugin klemmt sich einfach zwischen die Button. In diesem Falle zwischen den von wikio und dem von twitter. Aber nicht nur das.

Es überdeckte, bevor ich die Automatische Ausgabe der Eingehenden Suchbegriffe ausgeschaltet und den hier zu findenden Code zur händischen Platzierung in der single.php eingebunden habe, die Twitter- und Facebook-Button.

Zuerst dachte ich, das wikiovote-Plugin würde einen zu breiten Platz beanspruchen. Als ich mir dessen CSS-Datei ansah, war mir klar, das konnte nicht sein. Daher kam mir dann der Verdacht, das Zemanta-Plugin, welches die Bilder hier in die Artikel einfügt, würde mit seinem Symbol die ganze Zeile in Anspruch nehmen.

Bis ich dann letztlich - wie weiß ich gar nicht mehr - auf den Trichter kam, doch mal dieses Plugin zu kontrollieren.

Tja, und so kam es, das die Ausgabe der Eingehenden Suchbegriffe jetzt erst nach den Social Media-Button erscheinen, und die Button selbst einigermaßen korrekt und fast fein säuberlich aufgereiht unter den Artikeln stehen. Auch wenn ich hier und da wohl noch etwas am CSS-Code schrauben muss.

Marcus
Über Marcus 708 Artikel
Ich freue mich über Deinen Besuch auf meinem Blog! Wenn Dir der Artikel gefallen hat, teile ihn doch mit anderen und hinterlasse Deine Meinung. Mehr über mich gibt es hier zu lesen

Hinterlasse jetzt einen Kommentar

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


*


CommentLuv - verlinke einen deiner Blog-Artikel