Facebook Landingpage: Freunden empfehlen Box hinzufügen

Kategorie: facebook

Vor ca. zwei Wochen habe ich euch ja schon erklärt, wie ihr für eure Fanpage eine Landingpage erstellen könnt. Jetzt habe ich mich mal wieder mit dem Thema beschäftigt und eine wie ich finde recht hilfreiche Erweiterung gefunden, die ich euch in diesem Artikel vorstellen will.

Es geht um eine Facebook-Box, die ihr auch mit auf eurer Landingpage einbinden könnt, die es neuen Fans ermöglicht eure Fanpage gleich an ihre Freunde weiter zu empfehlen. Also auf jeden Fall ein Feature, dass man einbinden sollte um die Reichweite weiter zu steigern.

Ich hab für euch auch mal ein Beispiel rausgesucht, wie das dann in der Praxis aussehen kann, hier mal die Fanpage von Shoemoney:



Jetzt aber genug der Vorrede und wieder die volle Aufmerksamkeit auf das Tutorial gerichtet, das jetzt folgt.

So geht es:

Schritt 1:
Als erstes benötigen wir natürlich eine Fanpage, auf der auch bereits ein Landingpage-Tab erstellt ist, was wir ja schon in unserem letzten Tutorial getan haben.

Das was jetzt kommt ist im Prinzip relativ simpel, da ihr nur den folgenden Code in euren Landingpage-Tab einbinden müsst:


<fb:request-form  
method="post"  
action="/index.php"  
type="NAME OF YOUR FAN PAGE"  
invite="true"  
content="Was ihr sagen wollt
<fb:req-choice url='Eure Fanpage URL' label='Was auch immer' /> ">  
<fb:multi-friend-selector actiontext="Passende Überschrift"  
rows="3"  
max=35   
showborder="true"   
cols="2"/>  
</fb:request-form>  


Schritt 2:

Jetzt müssen wir den Code in unseren Landingpage Tab einbinden, dazu geht ihr auf eure Fanpage und klickt auf Seite bearbeiten:



Jetzt müssen wir, wenn ihr euch noch erinnert auf den Menüpunkt Anwendungen gehen, damit wir zu der Static FMBL App kommen, mit der wir unseren Tab erstellt haben.



Wenn ihr jetzt nach ganz unten scrollt seht ihr schon die FMBL App, die nach dem Titel des Tabs benannt ist.



Hier gehen wir dann auf „Zur Anwendung“ und sehen wieder die Box in der wir den HTML Code einbinden können. Der letzte Schritt für euch besteht dann darin, den oben von mir angeführten Code hier einzufügen und dann natürlich auch an eure Fanpage anzupassen.

An dieser Stelle solltet ihr natürlich daran denken, nach dem Einfügen auch auf „Änderungen übernehmen“ zu klicken.

Das Aussehen der Box

Bis jetzt sieht unsere Box eher noch unspektakulär aus:



Damit das aber nicht so bleibt, sollten wir uns das Aussehen noch einmal ansehen. Gehen wir am besten der Reihenfolge nach vor:

1. Setzt das Attribut showborder auf false
2. Erhöht die Anzahl der Spalten auf 3 (cols='3')
3.Jetzt muss die Box noch zentriert werden dazu könnt ihr einfach einen div-Tag verwenden und diesen über style=“margin-left:20px“ in die Mitte schieben oder ihn mir margin: 0 auto; automatisch zentrieren lassen, wenn ihr die Breite angegeben habt.

Jetzt sind wir dann auch fertig und ich finde die Box kann sich inzwischen auch wirklich sehen lassen.



Optional könnt ihr auch noch das Überspringen ändern, indem ihr noch das Attribut bypass hinzufügt, mögliche Werte sind „skip“, „cancel“ und „step“.

Am Ende hoffe ich natürlich, dass ich euch mit diesem Tutorial geholfen habe. Sollte das der Fall gewesen sein, freue ich mich natürlich, wenn ihr meine Seite weiterempfehlt und/ oder einen Kommentar da lasst.

Geschrieben von Sensei am 06. 2. 2011
Abgelegt unter: facebook
Tags: , , , , , ,

15 Kommentare zu “Facebook Landingpage: Freunden empfehlen Box hinzufügen”

  • Chaosweib sagt:

    Danke für das Tutorial. Ich habs mal getestet und im IE wird es auch korrekt angezeigt. Im Firefox leider nicht, da fehlen zum Beispiel die Namen der Freunde. Was mich aber geschockt hat, war dass im Firefox plötzlich unter dem Absendebutton stand: “Melde erzwungene Einladung”. Hast Du da ne Idee warum das kommt und wie das weggeht?

  • Sensei sagt:

    @Chaosweib, ich meine wenn man statt “cancel” auf “step” stellt müsste das gehen, ansonsten hab ich keine Ahnung, das ist bestimmt was typisches für das deutsche Facebook.

    In der englischen Version (US) wird mir das nämlich auch in Firefox nicht angezeigt. Da muss ich mich dann wenn nochmal schlau machen, aber ist schwer da was zu finden.

  • Chaosweib sagt:

    Danke für Deine Mühe. Ich bastele heute Nacht mal dran rum, vielleicht klappt es ja noch. Bei Dir sieht es ja auch korrekt aus.

    Oder könntest Du mir Deinen Code schicken, dann bräuchte ich den nur abzuändern!?

  • Christine sagt:

    hallo!
    wieder einmal ein super artikel =)
    allerdings funktioniert das ganze bei mir mal wieder nicht..
    habe den code kopiert und einfach eingefügt?
    muss ich die leerzeichen vielleicht rausnehmen??

    LG!

  • Sensei sagt:

    @Christine nimm doch mal die “” raus und mach sie in der Box rein, manchmal zerschießen die Font’s das weiß auch nicht wieso :D und extra Leerzeichen habe ich nicht eingebaut

  • Julia sagt:

    Hallo!

    Vielen Dank für die tolle Anleitung. Ich suche nun schon seit einer Weile nach so etwas.
    Ich habe den Link auch so kopiert wie er da steht und mit meiner Adresse und meinem Text abgeändert. Allerdings bekomme ich immer diese Meldung:

    “Leider konnte deine Anfrage nicht bearbeitet werden.
    Bitte versuche es noch einmal”

    Irgendeine Idee woran das liegen könnte???

    Julia

  • Julia sagt:

    Noch eine Anmerkung…die Empfehlung kommt allerdings trotz dieser Meldung bei den Freunden an!
    Nervig ist sie aber trotzdem ;)

  • Sensei sagt:

    @Julia, das Problem ist mir selbst noch nicht aufgefallen, ich vermute jetzt aber einfach mal, dass sich das wieder beruhigen wird und eventuell ein Momentaner zustand von Facebook war. Sollte das ein permanentes Problem sein, kannst du dich ja noch mal melden, der Support hilft da ja relativ selten :D

  • Christine sagt:

    Hallo nochmal!
    bei mir funktionierts immer noch nicht…
    ich weiß nicht, was ich falsch mache, aber versucht habe ich bereits alles.. vielleicht einfach abwarten?!

    noch kurz etwas anderes- vielleicht weiß da jemand von euch bescheid:
    ist es erlaubt, mit dem facebook-logo zu werben, sprich sich aufkleber mit dem facebook- und profillogo drucken zu lassen, um sie zb auf firmenbriefe zu kleben?

  • Basti sagt:

    Super Anleitung! Vielen Dank!
    Was ein wenig ärgerlich ist: wenn ich die Einladung verschicke, bekommt der Empfänger eine Einladung zu FBML???

    Ist das bei Euch auch so?

  • rene sagt:

    Danke für den super Artikel, funktioniert fast einwandfrei. Kurze Frage. Bei uns steht in dem Vorschau Fenster ganz unten – von Static FBML – anstatt – von NAME UNSERER SEITE – kann man das irgendwie noch ändern?

    Dann würde mich noch interessieren, ob man irgendwie die Möglichkeit hat, die Anzahl der möglichen auswählbaren Freunde von 6 Personen, auf eine höhere Zahl hochzusetzen.

  • Sensei sagt:

    Hallo Rene, das scheint ein Problem in der Vorschau zu sein, kann dir aber noch nicht sagen, wie man es lösen kann. Was die Anzahl der Personen angeht bin ich mir im Moment auch nicht sicher, ich meine aber gelesen zu haben, dass es im Moment nicht geht. Da müsstest du dann nochmal im Facebook Developer Center gucken.

  • Jörg sagt:

    An sich ein Super Artikel und alles gut und ausführlich erklärt. Nur ist es so das der Empfänger erstens ein Anfrage für Static FBML bekommt und zweitens beim annehmen der Anfrage nichts geschieht.

    Ob sich das lösen lässt?

  • Sensei sagt:

    Hm, das ist wirklich blöd ist bei mir auch ich war aber überzeugt, dass es ging, werde es mir mal anschauen und dann berichten

  • Regina sagt:

    Ich nutze bereits die neuen iframes für meine facebook-Seite und würde dort auch gerne so ein Fenster anzeigen lassen.
    allerdings frage ich vorher ab, ob der besucher bereits Fan ist oder nicht. Ist er noch keiner, soll er einen “Gefällt mir”-button angezeigt bekommen.
    Ist er bereits Fan, soll er seine Freunde einladen können.

    daher meine frage: kann ich den Code auch in ein echo einbauen? Muss ich dann irgendwas auskommentieren?

Einen Kommentar hinterlassen

Kategorien