Jetzt gefällt mir auch der valide “gefällt-mir”-Button
Auf meinem Blog möchte ich einige Buttons nicht missen: das ist einmal der Tweet-Button, dann der Teilen-Button und noch der “gefällt-mir”-Button von Facebook. Diverse Plugins hatte ich bereits ausprobiert, aber meist waren diese nicht valide.
Ich war verblüfft, denn ich verwende das Plugin WP Tweet-Button und dieser Button wirft im W3C Validation Service keinen Fehler aus. Daher habe ich es auch vorerst behalten und nicht selber Hand angelegt. Den Facebook-“Teilen-Button” habe ich nach Crazy Girls Anleitung eingebaut. Hierfür hatte ich auch noch kein Plugin gefunden, das eine valide Anzeige ermöglicht.
Aber irgendwie fehlte mir mein “gefällt-mir”-Button. Bei dem Bestreben meinen Blog von sämtlichen validen Fehlern zu befreien, hatte ich das Plugin entfernt. Aber da ja bereits einige Klicks gemacht wurden und ich diese auch anzeigen lassen wollte, begab ich mich wieder auf die Suche. Jetzt könnte man fragen, warum ist ihr der Button denn so wichtig?
Also ich selber mache schon einen Unterschied. Mir gefallen immer wieder Beiträge, möchte das auch durch einen Klick auf den “gefällt-mir”-Button zeigen, aber sie nicht unbedingt teilen. Jetzt löchert mich bitte nicht warum und weswegen, es ist eben so.
Das Grundscript war vorhanden
Ich entdeckte auch einen Code für einen validen Button – dachte ich. Allerdings gab dieser lediglich die URL meines Blogs aber nicht die des jeweiligen Beitrages auf Facebook aus. Und dann fing ich an, den Code umzuschreiben und herumzuprobieren. Immer wieder wurden Fehlermeldungen angezeigt, mal fehlte die API, dann wieder die Beitrags-Url.
Letztendlich klappte es dann doch und tatsächlich, ein erneuter Durchlauf eines Beitrages gab auch keinen validen Fehler mehr aus.
Hier ist mein valider “gefällt-mir”-Button
Ich möchte Euch diesen Code nicht vorenthalten. Vielleicht gibt es ja auch noch Verbesserungsvorschläge, schließlich bin ich kein php-Experte. Probiert ihn einfach mal aus und teilt mir mit, ob es bei Euch auch funktioniert hat. Nun aber mein Code:
<iframe width="320" height="240" style="overflow: hidden; width: 380px; height: 80px;" src="http://www.facebook.com/widgets/like.php?href=<?php the_permalink();?>&t=<?php the_title();?>&send=false" frameborder="0" scrolling="no"></iframe>
Noch eine kleine Anmerkung: sollte ausgerechnet dieser Beitrag einige valide Fehler auswerfen, dann liegt es u. a. an dem Plugin Syntax HighlighterPro, mit dem ich hier den Code anzeigen lasse.
Edit 10.01.2011:
auch dieser Fehler konnte behoben werden.
Edit 07.06.2011:
der Code wurde ergänzt; nun besteht die Möglichkeit das “gefällt mir” wieder zu entfernen
Vielen Dank für die Erwähnung :-) Wenn dieser Gefällt mir Button nicht genauso wie die Fanbox alle möglichen Daten sammeln und durch die Gegend schicken würde, könnte er mir auch gefallen…
Hallo Tanja,
gerne geschehen :-D. Naja, vielleicht findet er ja außer mir noch seinen Abnehmer – würde mich schon interessieren, ob ihn noch jemand einbaut. Letztendlich reicht ja auch der “Teilen”-Button. Aber mir hat es einfach keine Ruhe gelassen, dass der “gefällt-mir”-Button nicht valide war.
Lieben Gruß
Sylvi
Soweit ich gesehen habe ist dieser Button wesentlich beliebter als der andere. Ich denke da gibt es genug Abnehmer dafür ;-)
Da magst Du recht haben, ich meine auch ihn öfter als den Teilen-Button gesehen zu haben, was ich aber nicht so wirklich nachvollziehen kann :-)
Hallo Sylvi,
eine Frage habe ich: Wie passt man den Code auf eine bestimmte Facebookseite an?
Da steige ich grad nicht dahinter.
Vielen Dank,
Sebastian
Hallo Sebastian,
wenn ich Dich richtig verstanden habe, möchtest Du, dass der Link, der Dir gefällt, auf Deiner Fanseite erscheint.
Ich habe prompt die Option “Facebook als Seite verwenden” ausgewählt und dann den gefällt-mir Button angeklickt, aber da kam die Meldung, dass ich wieder auf den persönlichen Account umschalten müsse.
Okay, somit funktioniert das also nicht, aber netterweise wurde ich wenigstens darauf hingewiesen, dass ich umschalten müsse.
Ich habe es mit dem aktivierten Fanseiten-Account noch einmal auf anderen Blogs versucht, dort wurde sogar ungefragt der Link über mein persönliches FB-Profil gepostet.
Also denke ich, dass es keine Sache des Buttons an sich sondern grundsätzlich so von Facebook vorgegeben ist, dass “gefällt-mir”-Angaben grundsätzlich auf dem persönlichen Profil erscheinen.
Anders sieht das wiederum mit dem “Teilen”-Button aus. Mit ihm kann ich Links auch auf meiner Fanseite posten.
Schöne Grüße
Sylvi
Hallo Sylvi,
vielen Dank für Deine Antwort.
Ich möchte Folgendes bewerkstelligen: Auf einer Website soll ein “Gefällt mir”-Button eingebaut werden, der mit einer dazugehörigen Facebookseite verlinkt ist.
Hierzu habe ich mir u.a. die Site gefällt-mit-Button angeschaut. Link der Facebookseite hineinkopiert, Aussehen ausgewählt und Code erzeugt.
Hat leider eben den Haken, dass der Quellcode nicht valide ist.
Ich selbst befasse mich übrigens überhaupt nicht mit Facebook – macht mein Geschäftspartner.
Nochmals herzlichen Dank,
Sebastian
Hej Sebastian,
so nun hast Du mich noch mal gefordert. ;-) Ich habe zwei Codes ausprobiert und diese sind beide valide. Hatte sie hier in der Widget-Sidebar eingebaut. Zwei Button-Arten habe ich getestet. Einmal einen “gefällt-mir”-Button für die Seite (oben) und einen für die Fanseite auf Facebook (unten):
Der obere besitzt folgenden Code:
Und der untere:
Leider konnte ich die Codes hier nicht als Text einfügen, da sie umgehend umgesetzt werden.
Die Links meiner Seiten müsstest Du dann natürlich ersetzen. Vielleicht hilft Dir das ja ein bisschen weiter.
Gruß Sylvi
Hallo Sylvi,
erst einmal vielen Dank für Deine Mühe.
Das Problem ist das folgende: Der IE (wenigstens bis Version 8) benötigt den Befehl allowTransparency=”true”. Fehlt dieser, so wird die Hintergrundfarbe der Website an der Stelle des Buttons unterbrochen und rein weiß dargestellt.
D. h., man kann auf den Befehl allowTransparency=”true” nur verzichten, wenn die Hintergrundfarbe der Website rein weiß ist. So wie bei Dir.
Ich glaube ich werde den einen Fehler im Quellcode (hervorgerufen durch allowTransparency=”true”) einfach tolerieren.
Viele Grüße und noch einmal vielen Dank,
Sebastian
Hej Sebastian,
ja stimmt allowTransparency=”true” ist nicht valide. Und wie Du beschrieben hast, handelt es sich um ein Attribut, das gerade auf farbigen bzw. dunklen Hintergründen benötigt wird, damit der Button auch auf solchen Webseiten gut aussieht.
Naja, einen validen Fehler kann man durchaus hinnehmen, Du weißt ja, um welchen es sich handelt und schränkt die Lesbarkeit der Seite nicht ein.
Aber es war für mich auch mal interessant, in welcher Form man den validen Button noch einbauen kann. ;-)
Danke für Dein Feedback.
Lieben Gruß
Sylvi
Hallo Sylvi,
wenn man mit einem Fehler leben kann, so kann man auch einfach auf die Seite gefällt-mit-Button zurückgreifen.
Fazit: Betreibt man eine Website mit weißem Background, entfernt man nur den Befehl allowTransparency=”true” und der Code ist valide.
Liebe Grüße,
Sebastian
Hallo Sebastian,
so isses und ich hätte mir die Mühe sparen können. :-)
Gruß Sylvi
Hallo Sylvi,
naja, da haben wir sozusagen beide was gelernt. :-)
Was ich noch sehr spannend finde ist, dass es Dir gelungen ist, die Likebox auf Deiner Startseite valide einzubinden.
Könntest Du mir hier weiterhelfen? Weniger als 7 Fehler bekomme ich leider nicht hin. Es hängt insbesondere an dem folgenden Befehl, mit dem der Validator so gar nichts anfangen kann:
Liebe Grüße,
Sebastian
Hallo Sebastian,
da war ein bisschen Detektivarbeit erforderlich. Ursprünglich bin ich über einen Beitrag der IT-Runde und einen auf Techspread nicht nur auf die Möglichkeit einer individuell angepassten sondern auch validen Fanbox gestoßen. Und zwar durch den Kommentar von Markus und den darin enthaltenen Link (Link entfernt, weil er nicht mehr existiert).
Und hier noch ein weiterer Link: Facebook Markup Language in validem XHTML 1.1
Lies Dir das mal in Ruhe durch.
Die Box setzt sich zusammen aus einem Code im Sidebar-Widget, einem für die footer.php und einem eigenen Stylesheet.
Und dann kannst Du es ja vielleicht mit den folgenden Codes ausprobieren:
Widget-Code
Ziemlich unspektakulär, gell? ;-)
Code für die footer.php
<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script><script type="text/javascript"> /* <![CDATA[ */ document.getElementById('fblikebox').innerHTML = '<fb:fan profile_id="132591426781185" height="260" width="240" connections="8" stream="false" header="false" css="https://www.sylvis-blog.de/wp-content/themes/Smoky/facebook_widget.css?85?"></fb:fan>'; FB.init({xfbml : true}); /* ]]> */</script>Facebook-ID muss natürlich geändert werden.
Die css-Datei für die Fanbox habe ich separat gespeichert und Du kannst sie ja aus dem o. g. Beitrag übernehmen und anpassen. Dabei muss darauf geachtet werden, dass die Nr. hinter …widget.css um einen Zähler erhöht wird, sobald Änderungen in der im css vorgenommen werden, da sonst diese nicht übernommen werden (Cache).
Und jetzt wünsche ich Dir viel Erfolg bei der Umsetzung. :-)
Gruß Sylvi
Hi Sylvi,
juhu, es funktioniert!
Wenn Du Lust hast, schau’ doch mal bei http://www.FPW-Verlag.de vorbei.
Auf der Startseite findest Du die Like Box und unter Projekte die Gefällt mir-Buttons. Ich weiß nur nicht, weshalb das Wort “gefällt” leicht abgeschnitten ist.
Liebe Grüße und ein schönes WE!
Sebastian
Oh, da haben sich unsere Beiträge wohl ein bisschen überschnitten. ;-)
Dir auch ein schönes Wochenende, lieben Gruß
Sylvi
Edit: Ich habe nachgeschaut. Die Startseite ist sowas von valide! Herzlichen Glückwunsch. :-D