Jetzt gefällt mir auch der valide “gefällt-mir”-Button

valider Button
Geschätzte Lesezeit: 2 Minuten

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.

Ausgabe des "gefällt-mir"-Button auf FacebookLetztendlich 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=&lt;?php the_permalink();?&gt;&amp;t=&lt;?php the_title();?&gt;&amp;send=false" frameborder="0" scrolling="no"></iframe>

 

Valider Fehler durch Syntax Highlighter Pro verursacht

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

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

18 Kommentare

Kommentare hinzufügen
  • Vielen Dank für die Erwähnung smilie 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 smilie. 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

  • 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. smilie 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):

      Zwei gefällt-mir-Buttons
      Der obere besitzt folgenden Code:
      Code für die Webseite
      Und der untere:Code für die Fanseite
      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 smilie 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. smilie
      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 Sylvi,

    naja, da haben wir sozusagen beide was gelernt. smilie

    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

      <div id="fblikebox"></div>

      Ziemlich unspektakulär, gell? smilie
      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. smilie

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

      Dir auch ein schönes Wochenende, lieben Gruß
      Sylvi

      Edit: Ich habe nachgeschaut. Die Startseite ist sowas von valide! Herzlichen Glückwunsch. smilie

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

* Ich bin mit den Datenschutzbedingungen von Sylvis Blog einverstanden.

Copyright © Sylvis Blog • 2019. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung