So geht’s: Funktionierender Like Button in Static-FBML Tabs

So geht’s: Funktionierender Like Button in Static-FBML Tabs


Nach wie vor ist die Static-FBML Anwendung der beliebteste Weg einen Landing Tab zu erstellen. Bereits einfache HTML Kenntnisse genügen hier. Geht man einen Schritt weiter so kann man mit FBML sogar unterschiedliche Landing Tabs für Fans und Nicht-Fans erzeugen.

Hinweis auf den Like Button

Hinweis auf den Like Button

Dabei besteht der Mehrwert für den Betreiber einer Facebook Page häufig darin, dass er die Nicht-Fans dazu motivieren kann Fan zu werden. Dies geschieht zumeist mit einem Hinweis auf den Like Button oberhalb des Tabs.

Die folgende Methode erlaubt es einen funktionierenden Like Button für die Fanpage direkt in einem Static FBML Tab einzubauen. Aber Achtung: Dieses Vorgehen verstößt gegen Facebook Richtlinien und erfolgt deshalb auf eigene Gefahr.

  1. Facebook selbst bietet keine Version des Like-Buttons für Static-FBML an. Also muss der Button von einem anderen Element kommen. Wir greifen hier auf das Comments Modul zurück und bauen die folgenden Zeilen ein:
    <fb:comments xid=“EINDEUTIGE_ID“ canpost=“true“ candelete=“false“ returnurl=“http://www.facebook.com/YOURVANITY“>
    </fb:comments>
    XID und URL müssen entsprechend angepasst werden.
  2. Jetzt haben wir die Kommentarbox mit allem drum und dran. Mit ein wenig CSS entfernen wir nun alle Elemente die wir hiervon nicht wollen. Im StyleSheet sind dazu die folgenden Zeilen nötig:
    • Kommentare und Eingabefeld entfernen
      .comment_body {display:none;}
    • „Faces“ von aktuellen Fans entfernen
      .connect_widget_sample_connections.clearfix {display:none;}
  3. Jetzt stehen nur noch der Like Button und der Text zum aktuellen Fanstatus auf dem Tab. Da der Like Button nach dem Klicken verschwindet sollte zumindest der Text stehen bleiben, damit der Nutzer weis wo er dran ist. Zum Schluss ist es aber noch möglich mit .fb_protected_wrapper {width:200px} die Breite der Textbox samt Button anzupassen.

Wie bereits erwähnt verstößt dieses Vorgehen ab Schritt zwei gegen die Facebook Bedingungen, da hier von Facebook ausgelieferte Elemente verändert werden.

Like Button im Tab

Like Button im Tab

Die Verwendung dieses Like Buttons unterscheid sich in seiner Funktion zudem vom „normalen“ Button in der Kopfzeile der Page. Beim Original-Button findet nach dem klicken ein Reload der Seite statt. So können für die Fans dann andere Inhalte angezeigt werden. Der hier gezeigte Button veranlasst keinen Reload, einzig die Darstellung des Buttons ändert sich.

Update: Eigentlich haben wir im Artikel schon alles notwendige beschrieben. Aber da ihr so vehement nach einem Copy-Paste Beispiel fragt noch mal alles zusammen gefasst:

<style>

.comment_body {display:none;}
.connect_widget_sample_connections.clearfix {display:none;}
.fb_protected_wrapper {width:340px}

</style>

Hier klicken um Fan zu werden:<br />

<fb:comments xid="bloganol_comments" canpost="true" candelete="false" style="width:200px" returnurl="http://www.facebook.com/nurwetter"></fb:comments>

Wenn ihr jetzt noch nicht weiter kommt, gebt es an euren Webdesigner oder Programmierer weiter. Wir werden und können keinen weiteren Support hierfür leisten. Die Umsetzung dieses Quellcodes seht ihr hier: http://www.facebook.com/nurwetter?v=app_4949752878

Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInBuffer this pageEmail this to someone
Kategorien
Veröffentlichung 5. Januar 2011

Es gibt 30 Kommentare

Deinen hinzufügen
  1. 4
    Yvonne

    Hallo Jens
    Vielen Dank für den spannenden Hinweis. Du schreibst ganz am Anfang „Nach wie vor ist die Static-FBML Anwendung der beliebteste Weg einen Landing Tab zu erstellen“. Welche anderen Möglichkeiten gibt es denn sonst noch? Mir sind nur FBML Tabs bekannt.
    Danke und Gruss

  2. 10
    Karsten

    Gutes Topic, aber leider ohne exemplarisches Beispiel und funktionierenden Code. Wo kann man so einen Like-Button denn mal anschauen?

    Und wo findet man den Code dafür? – Heißt es doch in der Überschrift: „Funktionierender Like Button in Static-FBML Tabs“. Irgendwie ein wenig verwirrend.

  3. 15
    Oliver

    die info ist auf basis der tatsache das es tatsächlich eindeutig gegen die FB Richtlinien verstösst (leider) vollkommen irrelevant.

  4. 19
    Mathias Brodala

    Die gleiche Beschränkung gilt übrigens auch für Iframe-Canvas-Seiten in Profil-/Seitentabs. Auch dort ist das geschilderte Vorgehen momentan die einzige Möglichkeit, einen Like-Button zu platzieren.

    Die demnächst (wann auch immer das genau sein mag, Q1 ist ein dehnbarer Zeitraum) zugelassenen Iframes sollten zumindest die Nutzung der Social-Plugins in ihren Iframe-Varianten ermöglichen. Der Like-Button zählt ja dazu.

  5. 24
    John

    Der Trick ist schön und gut – klappt aber nur im FF , Chrome etc. Im IE bleiben das doofe Commentfeld und die Faces bestehen! Habt ihr dafür noch nen Trick, wie man diese für den IE im CSS auch ausblenden kann?

  6. 26
    Michael

    Die alternative (und weitaus bessere) Lösung wäre diesen Button nicht einzubauen.

    Erstens verstößt es gegen die FB Richtlinien

    Zweitens ist es absolut sinnfrei, weil der Button sowieso auf jeder Seite ist (und zwar da, wo ihn der User erwartet)

    Drittens ist es sehr unschön, weil beim Klick auf den Button kein Reload der Seite durchgeführt wird. Das heisst, dass im Tab steht, dass der User Fan ist und oben auf der Fanseite trotzdem noch der Like Button zu sehen ist.

  7. 27
    Jasper

    Och.. gibt genug Situationen, in denen das Verschieben des Like-Buttons durchaus vorteilhaft ist – daher wäre es schön, wenn einer ne Lösung für den IE hätte – trotz der von dir aufgezählten und oben bereits erwähnten Gründe ;)

+ Hinterlasse einen Kommentar