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.


WERBUNG

Preis­wer­tes SEO-Tool für Blog­ger noch günstiger
SERPBOT PRO dau­er­haft 20 Pro­zent güns­ti­ger – 1. Monat 80 Pro­zent Rabatt
Nut­ze dafür die­sen Gut­schein­code: erfolg-durch-serpbot
Regis­trie­rungs­link: SERPBOT PRO*


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:

Facebook-Seite von Geld-online-Blog

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.

Facebook- Neue App erstellen

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.

Facebook-Seite - Captchacode

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.

Facebook- Appeinstellungen

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.

Facebook-App zuweisen

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.

21 Gedanken zu „Individuelle Facebook-Fanseite erstellen — Tutorial“

  1. Pingback: Facebook-Artikelserie
  2. Hal­lo,

    Dan­ke für das Tuto­ri­al, aller­dings ist — evtl. hat fb mal wie­der irgend­wo was geän­dert — “Kli­cken Sie dort auf den Punkt Anwen­dungs-Pro­fil­sei­te.” (nach Abspei­chern der Daten in Face­book-Inte­gra­ti­on) nicht auffindbar.

    Ich bekom­me es ein­fach nicht hin, einer Fan­sei­te die App zuzu­fü­gen. Auch auf der Fan­sei­te selbst kann ich kei­ne neu­en Apps hin­zu­fü­gen: Auf der Fan­sei­te Klick auf “Sei­te bear­bei­ten -> Anwen­dun­gen” führt nur zur Über­sicht bereits instal­lier­ter Anwen­dun­gen. Es kön­nen nur wel­che gelöscht, nicht jedoch hin­zu­ge­fügt werden.

    Wäre für einen Tipp dankbar!

    Grü­ße,

    Mar­kus

  3. Hal­lo Markus,

    dan­ke für Ihren Hin­weis. Da hat Face­book tat­säch­lich wie­der rum­ge­pfuscht und den Ablauf ver­än­dert. Ich habe gera­de selbst noch­mal die App-Erstel­lung durch­ge­spielt, und ich kom­me auch nicht mehr zu dem Link: Anwendungsprofilseite.
    Ich bin jetzt so weit wie Sie und krie­ge die App auch nicht mehr zur Fan­sei­te hin­zu. Echt cool von FB. Da ich die­se App auch noch für wei­te­re Sei­ten benö­ti­ge, schaue ich mich in den nächs­ten Tagen um, wie die­ser Ablauf jetzt funk­tio­nie­ren soll­te. Wenn ich die Lösung habe, wer­de ich sie hier in einem Kom­men­tar veröffentlichen.
    Soll­ten Sie schnel­ler sein, wür­de ich mich freu­en, wenn Sie die Lösung hier eben­falls präsentieren.

    Aber das ist mal wie­der typisch FB.

  4. Hal­lo Markus,

    rein zufäl­lig habe ich die Lösung gefun­den, wie Sie die App auf Ihre Fan­sei­te bekom­men. Wenn Sie eine App bzw. Anwen­dung erstellt haben, dann haben Sie ja eine eige­ne Sei­te “Anwen­dun­gen”, wo Ihre gan­zen erstel­len Anwen­dun­gen auf­ge­führt sind. Rechts neben einer Anwen­dung fin­den Sie den Link: Bear­bei­ten. Kli­cken Sie da drauf und Sie kom­men wie­der in die Erstel­lungs­sei­te der Anwen­dung. Da sehen Sie in der lin­ken Spal­te unter “Rela­ted Links” eine klei­ne Link­samm­lung, auch den Link “View App Pro­fi­le Page”. Dort kli­cken Sie drauf und es öff­net sich die Fan­sei­te Ihrer Anwendung.

    Und dort fin­den Sie nun in der lin­ken Spal­te den Link: zu mei­ner Sei­te hin­zu­fü­gen. Wenn Sie da drauf kli­cken, öff­net sich eine Über­sicht all Ihrer bis­her ange­leg­ten Fan­sei­ten. Ein­fach dann die Sei­te aus­wäh­len, zu der die App hin­zu­ge­fügt wer­den soll. Das war’s dann. Ich hof­fe, Sie kom­men mit der Beschrei­bung zurecht. Wenn nicht, ein­fach noch­mal melden.

  5. Hal­lo Frau Braun,

    vie­len Dank für den Lösungs­weg. Soweit abso­lut nachvollziehbar. 

    Was anschei­nend noch wich­tig ist: Beim Hin­zu­fü­gen der Anwen­dung über “Zu mei­ner Sei­te hin­zu­fü­gen” nicht auf den blau­en Text-Link zur Anwen­dung kli­cken son­dern auf den But­ton “Einer Sei­te hinzufügen”.

    Dan­ke für Ihre Tipps!

    Vie­le Grüße,

    Mar­kus

  6. Hal­lo Frau Braun,
    wie ich eine neue Anwen­dung und einen ent­spre­chen­den Rei­ter erstel­len kann, haben Sie sehr gut erklärt. Das wer­de ich sofort aus­pro­bie­ren. Ich habe nun eine etwas ande­re Fra­ge: Ich bin gera­de dabei, mir eine Fan­sei­te bei Face­book ein­zu­rich­ten. Gleich zu Beginn sah ich, wenn ich auf “Anwen­dun­gen” klick­te, eini­ge vor­in­stal­liert, so z.B. Fotos, Vide­os, Links usw. Als ich am nächs­ten Tag wei­ter­ar­bei­ten woll­te, ging beim Ankli­cken nur noch ein lee­res, blau hin­ter­leg­tes Fens­ter auf. “Fotos” zog ich gleich am ers­ten Tag nach links aus­sen, “Vide­os” und “Links” woll­te ich dann am nächs­ten Tag bear­bei­ten, aber da waren sie aus mei­nen “Anwen­dun­gen” ver­schwun­den. Ich suche nun seit zwei Tagen nach Mög­lich­kei­ten, die­se Anwen­dun­gen wie­der zu bekom­men, fand aber bis­her im Netz nichts. Gera­de bin ich dann auf Ihre Sei­te gesto­ßen und hof­fe, dass Sie mir evtl. hel­fen können.
    Lie­be Grüße
    Geli

  7. Hal­lo Geli,

    wahr­schein­lich haben Sie die Anwen­dun­gen aus Ihrer Anwen­dungs­über­sicht gelöscht. Ich habe auf einer mei­ner Sei­ten pro­be­hal­ber die Anwen­dung “Links” raus­ge­löscht. Als ich danach wie­der auf die Anwen­dungs­auf­lis­tung kam, war die Anwen­dung unten als emp­foh­len auf­ge­führt und ich konn­te sie wie­der akti­vie­ren. Daher ist es echt komisch, dass sie bei Ihnen nicht mehr da sind. Aller­dings konn­te ich an der Pinn­wand immer noch Links ein­fü­gen, auch als die Anwen­dung weg war. Schau­en Sie am bes­ten mal im Hil­fe­be­reich von Face­book nach. Den fin­den Sie, wenn Sie oben rechts auf Kon­to und im sich auf­klap­pen­den Menü auf Hil­fe­be­reich kli­cken. Viel­leicht fin­den Sie dort ein paar Hinweise.

  8. Hal­lo Susanne,

    die “Hil­fe” habe ich schon x‑mal auf­ge­ru­fen, hilft aber nicht wei­ter. Scha­de dass man sich in sol­chen Fäl­len nicht direkt an Face­book wen­den kann. Oder kann man das? Habe ich da was über­se­hen? Womög­lich muss ich halt ohne die­se Anwen­dun­gen wei­ter­le­ben. Ich mach mich jetzt mal an das, was Sie oben beschrie­ben haben, viel­leicht bin ich ja erfolg­reich und bekom­me es hin. Könn­te wohl sein, dass ich mich dies­be­züg­lich noch­mal melde.

    Lie­be Grüße
    Geli

  9. Hal­lo Susanne,

    ich habe es tat­säch­lich geschafft! Die Anwen­dung ist von Face­book über­nom­men wor­den, alles so weit ganz gut. Aller­dings soll­te ich die Län­ge ver­än­dern, und da habe ich Schwie­rig­kei­ten. Wo muss die­ser o.g. Code ein­ge­fügt wer­den? Was ich bis­her gemacht habe, isf fol­gen­des: Die neue Anwen­dungs­sei­te geöff­net, rech­te Maus­tas­te, und dann auf eine von zwei Mög­lich­kei­ten kli­cken: “aktu­el­ler Frame/​Framequelltext anzei­gen” oder “Sei­ten­quell­text anzei­gen”? Und an wel­cher Stel­le muss ich dann den obi­gen Code ein­fü­gen? Bin lei­der kein Pro­gram­mie­rer, und wenn ich sol­che Schnip­sel­sei­ten sehe, sehe ich nur schwar­ze klei­ne Amei­sen auf weis­sem Grund…

    Lie­be Grüße
    Geli

  10. Hal­lo Geli,

    fügen Sie den Java­Script-Code am bes­ten vor dem schlie­ßen­den Body-Tag ein (). So sieht der schlie­ßen­de Tag aus, sie­he Klam­mer. Ein­fach den Code aus mei­nem Text kopie­ren und vor die­sem Tag einfügen.

  11. Hal­lo Susanne, 

    pri­ma, dann ver­su­che ich das mal so! Vie­len Dank! Sie schei­nen auch kein Wochen­en­de zu haben? ;-)
    Gibt es eigent­lich auch eine Mög­lich­keit, eine sol­che Anwen­dung zu erstel­len, OHNE eine bereits bestehen­de Web­sei­te zu ver­lin­ken? Ich den­ke da z.B. an ein paar Bil­der, die ich hoch­la­den und dar­un­ter noch einen infor­ma­ti­ven Text schrei­ben möchte.

    LG Geli

  12. Hal­lo Geli,

    Sie kön­nen hoch­ge­la­de­ne Bil­der in die­se Anwen­dung ein­bin­den, aber mit den ent­spre­chen­den HTML-Kennt­nis­sen. :-) Die Bil­der müs­sen auf einem Webs­pace lie­gen, also Bil­der auf Face­book hoch­la­den und dort ein­bin­den, geht nicht.

  13. Dan­ke! Die Bil­der wür­den zwar auf einem Webs­pace lie­gen, aber mir feh­len die HTML-Kennt­nis­se.… Man kann eben nicht alles haben, ist auch nicht so schlimm.

    LG Geli

  14. Hal­lo Allerseits,

    ich bin da auch noch ein abso­lu­ter Laie. Aber vie­len Dank für die Anlei­tung. Mal schau­en, ob ich da jetzt bes­ser durchkomme :)

    Gruß
    Peter

  15. Pingback: Individuelle Inhalte auf Facebook-Seiten erstellen mit HikeSocialApps

Schreibe einen Kommentar