Individuelle Facebook-Fanseite erstellen — Tutorial

Die­ser Arti­kel wur­de auf den neu­es­ten Stand der Tech­nik gebracht und über­ar­bei­tet. Face­book bie­tet ja schon seit lan­gem die Mög­lich­keit, über das Anle­gen einer Face­book-App im Deve­lo­per-Bereich von Face­book, indi­vi­du­el­le Inhalts­sei­ten auf einer Face­book-Fan­page einzubinden.

Um eine sol­che Sei­te ein­zu­bin­den, benö­tigt man zumin­dest grund­le­gen­de HTML- und CSS-Kennt­nis­se, wenn man sta­ti­sche Sei­ten in den geschäft­li­chen Auf­tritt von Face­book ein­fü­gen will oder man bin­det Sei­ten einer Wor­d­Press-Instal­la­ti­on ein. Auch das funktioniert.

Mitt­ler­wei­le gibt es auch pro­fes­sio­nell gestal­te­te Face­book-Lay­outs bei den gro­ßen The­mes- und Tem­pla­tes-Anbie­ter wie Theme­fo­rest und Tem­pla­te­mons­ter zu kau­fen. Die eige­nen Inhal­te muss man dann nur noch ein­tra­gen, sein Logo ein­fü­gen und even­tu­ell Farb­an­pas­sun­gen vor­neh­men. Auch hier­für sind zumin­dest Basis-HTML- und CSS-Kennt­nis­se von­nö­ten. Aber über die­se ver­fü­gen ja recht vie­le User.

Voraussetzungen für das Erstellen von externen Inhalten für die Facebook-Seite

Für die Inhal­te ist natür­lich ein exter­ner Spei­cher­platz not­wen­dig, wo Sie die Inhal­te abspei­chern und dann in Face­book ein­bin­den. Wenn Sie schon einen Inter­net­auf­tritt haben, ist es ohne­hin kein Pro­blem, einen Unter­ord­ner in Ihrem Webs­pace (Bei­spiel: www​.ihre​do​main​.de/​u​n​t​e​r​o​r​d​ner) anzu­le­gen und dort die Datei­en dar­in abzulegen.

Außer­dem benö­ti­gen Sie für Ihre Domain ein SSL-Zer­ti­fi­kat, das Sie bei Ihrem Hos­ter oder einem sons­ti­gen Anbie­ter käuf­lich erwer­ben müs­sen. Ansons­ten funk­tio­niert das Ein­bin­den von exter­nen Inhal­ten auf Ihrer Face­book-Fan­page mit­tels App nicht.

Eigenes Erstellen vs. Baukasten-Anwendungen

Natür­lich gibt es im Web vie­le kos­ten­pflich­ti­ge Ser­vices wie Fan­page-Gene­ra­tor, mit deren Bau­kas­ten-Anwen­dun­gen Sie ganz ein­fach Sei­ten in Ihre Fan­page ein­stel­len kön­nen. Der Vor­teil von die­ser Vor­ge­hens­wei­se, die ich hier erläu­te­re, ist die, dass Sie sich ein­mal von Dritt­an­bie­tern unab­hän­gig machen, denn Ihre Datei­en blei­ben bei Ihnen.

Was pas­siert, wenn der von Ihnen genutz­te Ser­vice plötz­lich nicht mehr exis­tiert? Letzt­end­lich bedeu­tet dies, dass Ihre ange­leg­ten Sei­ten ver­lo­ren sind und Sie wie­der von vor­ne begin­nen müs­sen. Außer­dem ver­lan­gen die­se Anwen­dun­gen von Dritt­an­bie­tern einen Zugriff auf Ihre per­sön­li­chen Daten und Ihre Freun­des­lis­te sowie die Erlaub­nis, in Ihrem Namen zu pos­ten, was ich gene­rell nicht gut finde.

Aber letzt­end­lich kann ja jeder selbst ent­schei­den, ob er per­sön­li­che Daten frei­ge­ben will oder nicht. Ich will die Ser­vices nicht schlecht­ma­chen, schließ­lich ermög­li­chen sie vie­len Inter­es­sen­ten, schnell und ein­fach Inhalts­sei­ten in ihren Face­book-Auf­tritt zu inte­grie­ren. Den­noch zie­he ich die hier erläu­ter­te Vari­an­te vor, auch wenn sie viel­leicht auf­wän­di­ger ist.

In die­sem Arti­kel will ich auf die ein­zel­nen Schrit­te ein­ge­hen, die Sie aus­füh­ren müs­sen, um eine indi­vi­du­el­le Face­book-Fan­sei­te zu erstellen.

1. Erstellen der Facebook-Anwendung

Ich gehe bei die­sem Tuto­ri­al davon aus, dass Sie schon eine Face­book-Fan­page besit­zen, denn ich beschrei­be nur die Schrit­te für die Erstel­lung einer Face­book-App, um eige­ne Inhalts­rei­ter in die Face­book-Sei­te ein­zu­bin­den, wie sie auch auf mei­ner Face­book-Sei­te von Geld-online-Blog zu sehen sind:

Face­book-Fan­page von Geld-online-Blog mit den drei indi­vi­du­el­len Inhalts­sei­ten News­let­ter-Geschenk, Blog-Inhalt und Impres­sum als Rei­ter in der Informationsleiste

Um die­sen ers­ten Schritt aus­zu­füh­ren, rufen Sie fol­gen­de Adres­se auf: https://​deve​lo​pers​.face​book​.com/​a​pps. Ganz oben rechts fin­den Sie den But­ton “+Neue Anwen­dung erstel­len”. Die­sen kli­cken Sie an.

Danach wird ein Fens­ter mit dem Titel “Neue App erstel­len” geöffnet.

Ver­ge­ben Sie hier im Feld Anwen­dungs­na­me den Titel Ihrer anzu­le­gen­den Inhalts­sei­te. Ich habe als Bei­spiel den Titel “Impres­sum Mein Blog” ein­ge­fügt. Wenn Sie eine News­let­ter­sei­te ein­bin­den wol­len, tra­gen Sie News­let­ter (Mei­ne Web­site) ein.

Falls Sie meh­re­re Face­book-Fan­pages ver­wal­ten und die­sen indi­vi­du­el­le Inhalts­sei­ten ver­ge­ben wol­len, soll­ten Sie in dem Anwen­dungs­na­men auch den Web­site-Namen ein­tra­gen, damit Sie spä­ter in Ihren Anwen­dun­gen nicht die Über­sicht ver­lie­ren und so immer wis­sen, zu wel­cher Face­book­sei­te die jewei­li­ge Anwen­dung gehört.

Das Feld App Name­space kön­nen Sie leer las­sen und unter App Cate­go­ry kön­nen Sie ein zu Ihrer Face­book­sei­te pas­sen­des The­ma aus­wäh­len. Aber Sie müs­sen auch hier nicht unbe­dingt etwas aus­wäh­len. Kli­cken Sie dann auf Weiter.

Danach erfolgt eine Sicher­heits­kon­trol­le: Geben Sie den Cap­t­cha-Code ein und kli­cken wie­der auf Weiter.

2. Konfiguration der Anwendung

Nun geht es wei­ter mit den Ein­stel­lun­gen der Anwen­dung. In dem neu­en Fens­ter muss nicht viel aus­ge­füllt werden.

Deak­ti­vie­ren Sie zuerst noch den Sand­kas­ten-Modus, denn schließ­lich wol­len Sie ja, dass alle User auf Face­book Ihre Inhalts­sei­te sehen kön­nen. Im Sand­kas­ten- oder Test­mo­dus kann nur der Admin die App testen.

Kopie­ren Sie sich auch die App-ID und die App-Secret her­aus. Die Codes ste­hen ganz oben unter dem App-Titel.

Den Dis­play Name hat­ten Sie ja schon bei “Neue App erstel­len” mit dem Anwen­dungs­na­men ange­ge­ben. Sie brau­chen also nur den Bereich unter Sei­ten­rei­ter auszufüllen.

Unter Page Tab Name legen Sie den Namen fest, der unter­halb des Sei­ten­rei­ters auf Ihrer Face­book-Sei­te ange­zeigt wird.

Die Sei­ten­rei­ter-Adres­se ist die URL, wo Ihre HTML-Inhalts­sei­te liegt. Am bes­ten legen Sie dafür auf Ihrem Webs­pace einen Unter­ord­ner an. Ich habe oben ein­fach ein gene­ri­sches Bei­spiel ein­ge­tra­gen. Die glei­che Sei­ten­rei­ter-Adres­se tra­gen Sie dar­un­ter in das Feld Siche­re Sei­ten­rei­ter-Adres­se, nur dass sie mit htt­ps anstatt mit http anfängt.

Bei Bild für Sei­ten­rei­ter laden Sie über den Bear­bei­ten-Link noch eine Gra­fik in der Grö­ße 111×74 Pixel für den Rei­ter hoch. Auf die­ses Bild­chen kön­nen Sie den Titel der Sei­te wie hier im Bei­spiel “Impres­sum” schrei­ben und die Gra­fik farb­lich nach Ihren CI-Far­ben anpas­sen. Die Gra­fik darf die For­ma­te .gif, .jpg oder.png haben.

Als Page Tab Width las­sen Sie den Nor­mal­wert 810 Pixel eingestellt.

Wenn Sie auf “Ände­run­gen spei­chern” kli­cken, ist die App erstellt und freigeschaltet.

Face­book gibt für die exter­ne Fan­sei­te eine bestimm­te Grö­ße vor. Die Brei­te der Sei­te liegt bei 810 Pixel und die Höhe bei 800 Pixel. Wird die Sei­ten­hö­he aber mal die­sen Wert über­schrei­ten, dann soll­ten Sie unten­ste­hen­den Java­Script-Code in den Quell­text der Fan­sei­te ein­fü­gen, weil ansons­ten am rech­ten Sei­ten­rand der Fan­sei­te ein Scroll­bal­ken ein­ge­blen­det wird, was nicht so gut aussieht.

Außer­dem benö­tigt Ihre HTML-Sei­te die Face­book-App-ID. Daher geben Sie unten auf­ge­führ­ten Java­Script-Schnip­sel unter­halb des öff­nen­den Body-Tags ein und erset­zen den Mus­ter­text IHRE APP-ID mit Ihrer App-ID. Ach­ten Sie dar­auf, dass zwi­schen den Apo­stro­phen und Ihrer ID kei­ne Leer­zei­chen stehen.

3. Anwendung der Facebook-Seite hinzufügen

Nun kom­me ich zum letz­ten Schritt: Um Ihre neue Anwen­dung Ihrer Face­book-Sei­te zuzu­wei­sen, ändern Sie fol­gen­den Link https://www.facebook.com/dialog/pagetab?app_id=APP_ID_EINTRAGEN&display=popup&next=http://www.facebook.com

so um, dass Sie hin­ter app_​id= Ihre App-ID ein­tra­gen (auch hier dar­auf ach­ten, dass kein Leer­zei­chen vor und hin­ter der App-Num­mer steht. Geben Sie die­se URL in die Brow­s­er­zei­le ein und rufen Sie die Sei­te auf. Dar­auf­hin kön­nen Sie wäh­len, zu wel­cher Sei­te Sie die­se App hin­zu­fü­gen wol­len. Den Schritt schlie­ßen Sie mit einem Klick auf “Add Page Tab” ab.

Wenn Sie nun Ihre Face­book-Sei­te auf­ru­fen (manch­mal muss man sie noch­mals aktua­li­sie­ren mit der F5-Tas­te), soll­te der neue Rei­ter mit der eige­nen Inhalts­sei­te ange­zeigt wer­den. Sie kön­nen den Rei­ter noch wei­ter nach vor­ne in der Infor­ma­ti­ons­leis­te schieben.

4. Spätere Änderungen

Sie kön­nen immer wie­der Ände­run­gen an Ihren Ein­stel­lun­gen vor­neh­men, wenn sich mal der Pfad zur Fan­sei­te geän­dert haben soll­te oder Sie wei­te­re Aktua­li­sie­run­gen durch­füh­ren möch­ten. Sie kom­men zu den Anwen­dun­gen über den Link https://​deve​lo​pers​.face​book​.com/​a​p​ps/ und kön­nen dort über Anwen­dung bear­bei­ten die gewünsch­ten Ände­run­gen erledigen.

Wei­te­re Inhalts­sei­ten fügen Sie auf die glei­che Wei­se Ihrer Face­book-Fan­page hin­zu. Jede ein­zel­ne Inhalts­sei­te ist eine App, die Sie im Deve­lo­per-Bereich anle­gen und für die Sie eine App-ID in Ihr HTML-Doku­ment ein­fü­gen müssen.