![[How To] Facebook Share-Gate](https://www.elitepvpers.com/forum/iconimages/tutorials/how-facebook-share-gate_ltr.gif){kind=small}
Als erstes einmal ganz grob, was wir dazu benötigen:
1. Fanpage (logischerweise)
2. Handynummer (optional)
3. iFrame App für die Fanpage, um den Code für's Share-Gate einzubinden
4. Der Code für das Share-Gate
5. Ein wenig HTML Kenntnisse
1. Fanpage erstellen
Um eine Fanpage zu erstellen, geht ihr auf folgenden Link:
Dort könnt ihr eure Seite erstellen, bearbeiten etc.
2. iFrame App erstellen und einbinden
Kommen wir nun zur der Erstellung und Einbindung der iFrame App in eure Fanpage.
Es gibt hier 2 Möglichkeiten.
Entweder:
- ihr erstellt euch selbst die App, was jedoch eine Handynummer benötigt
oder
- ihr greift auf eine App zurück, die bereits von jemand anderem erstellt wurde ( keine Handynummer nötig)
2.1 iFrame App selbst erstellen und einbinden
Vor der Erstellung oder danach werdet ihr dazu aufgefordert, euren Account zu verifizieren. Hierzu braucht ihr lediglich eine SMS zu empfangen und den empfangenen Code als Verifikation anzugeben. Dies könnt ihr auch schon vorher über diesen Link tun:
Um eine App selbst zu erstellen, geht ihr auf folgende Seite:
Dort klickt ihr oben rechts auf "Neue Anwendung erstellen", gebt einen Namen ein, akzeptiert die AGBs und klickt auf "Weiter". Der Name ist hierbei irrelevant, also kann da auch totaler Quatsch stehen, ebenso ist die Angabe des App Namespace nicht nötig.
Wenn ihr alles richtig gemacht habt, sollte es danach in etwa so aussehen:
Nun kann eure App aber noch nicht besonders viel.
Das ändern wir nun.
Hierzu gibt es einen Anbieter namens "iFramehost", welcher euch die Erstellung solcher iFrame Apps wesentlich vereinfacht. Außerdem betreibt er seine Service auch über SSL, was lästigen Abfragen auf eurer Fanpage vorbeugt.
Und das beste: ES IST VÖLLIG KOSTENLOS!
Zur Erstellung solcher Apps hat der Anbieter selbst auch ein Tutorial.
Um mir ein wenig Arbeit zu ersparen, folgt ihr einfach diesem Tutorial:
Als ein nettes Icon könnt ihr dabei etwa dieses benutzen:
Wenn ihr nun alles richtig eingetragen habt, sollte es bei euch etwa so aussehen:
Jetzt müsst ihr nur noch unten auf "Anwendung speichern" klicken und ihr habt eure iFrame App erstellt.
Anschließend müsst ihr nur noch in der linken Leiste auf "Profilseite der Anwendung anzeigen" gehen und dort dann wieder in der linken Leiste auf "Zu meiner Seite hinzufügen". Jetzt wählt ihr eure Fanpage aus und klickt dementsprechend auf "Add to Page".
2.2 Fremde iFrame App benutzen
Eine fremde iFrame App zu benutzen ist logischerweise einfacher, da man diese lediglich einbinden muss.
Hierzu geht ihr auf
und klickt dort auf "Install Page Tab". Anschließend wählt ihr eure Fanpage aus und schon habt ihr einen iFrame Tab.Optional könnt ihr auch auf die Icons unter dem grünen Button klicken, um direkt ein anderes Icon für den Tab zu bekommen.
3. Share-Gate erstellen
Wenn ihr nun auf eure Fanpage geht, solltet ihr einen neuen Tab in der linken Leiste sehen. In meinem Fall sind es zwei. Den oberen habe ich von meiner eigenen App und den unteren habe ich direkt von iFramehost eingebunden.
Es sollte nun in etwa so aussehen:
Wenn ihr nun auf euren Tab klickt, müsst ihr die Tab Application noch authorisieren.
Bei selbst erstellten Apps müsst ihr vorher noch euren Anwendungs-Geheimcode angeben, welcher sich beim Bearbeiten der App einsehen lässt.
Nachdem ihr die App authorisiert habt, gelangt ihr nun zu der App an sich.
Diese sieht wie folgt aus:
Kommen wir nun aber zur eigentlich Erstellung des Share-Gates.
Zuerst einmal braucht ihr das Template für das Share-Gate.
Dieses ladet ihr hier herunter:
Nun habt ihr 2 verschiedene Templates. "Template iFramehost" ist für die, die die App von iFramehost eingebunden habt und "Template App" logischerweise für jene, die die App selbst erstellt haben.
Dort sind nun ein paar Platzhalter, welche ihr durch Daten von euch ersetzen müsst.
Diese sind folgende:
###URL### - Die URL von eurer Fanpage
###TITEL### - Einen Titel, der beim sharen/teilen verwendet wird
###HTML_CODE### - Hier kommt der eigentliche HTML Code hin, welcher nach dem Share-Gate zu sehen ist.
Nun noch für die, die ihre App selbst erstellt haben:
###APPID### - Die App ID eurer iFrame App
Wenn ihr dies nun alles ersetzt habt (ja auch die # ersetzen), fügt ihr den nun entstandenen Code in das Feld "Page Source".
Dies sieht dann wie folgt aus:
Nun noch lediglich auf "Save Settings" klicken und schon habt ihr euer Share-Gate erstellt.
Wenn ihr nun auf euren Tab klickt, sollte eure Seite so aussehen:
4. Sonstiges
Es gibt noch einen kleinen Bug in dem System. Wenn ihr nun als Admin auf euren Tab geht, wird euch das Share-Gate angezeigt, jedoch gibt es jetzt ein Problem.
Das Share-Gate überdeckt nun den Link zur Bearbeitung des Tab Inhalts.
Um so ein Share-Gate zu umgehen, gibt es aber einen ganz einfachen Trick.
Man klicke auf "Teilen", schließe das sich darauf öffnende Fenster einfach und anschließend auf "Weiter".
Nun solltet ihr eure zuvor "programmierte" HTML Seite sehen, über der nun ein hervorgehobener Streifen mit dem Titel "Admin Tab Options" zu sehen ist.
Dort rechts auf "Settings" und ihr seid wieder im iFrame Editor.
Nun wollt ihr sicherlich auch noch einen anderen Namen für euren Tab haben.
Dies könnt ihr einfach ändern, indem ihr auf eurer Seite unter dem Titel auf "Info bearbeiten" klickt. Anschließend in der linken Leiste auf Anwendungen und dort unter eurem App Namen bzw. "Static iFrame Tab" auf "Einstellungen bearbeiten".
Natürlich sollen die Besucher auch sofort auf eurem Share-Gate landen und nicht auf der Pinnwand oder der Infoseite.
Hierzu geht ihr wieder auf "Info bearbeiten". Dort dann links in der Leiste auf "Genehmigungen verwalten" und nun unter "Standart-Reiter" euren iFrame Tab auswählen.
Es gibt ja auch noch Seiten, bei denen man als "Nicht-Fan" ein schickes Bildchen vorgehalten bekommen, welches einen dazu auffordert, die Seite zu liken.
Solche Bilder oder auch HTML Code könnt ihr einbinden, indem ihr bei den Settings eures iFrame Tabs unter "Non-Fan Page Source" ein Bild hochladet oder entsprechenden HTML Code einfügt.
Und das war es auch schon mit meinem Tutorial.
Ich hoffe ich konnte es so verständlich wie möglich aufzeigen und erklären.
Für konstruktive Kritik bin ich immer offen
Autor: eMkay ( Meine Wenigkeit )
MfG bassbanane
Werde drauf zurück greifen.
![FickSchnitz[L]'s Avatar](https://www.elitepvpers.com/forum/customavatars/avatar3844228_2.gif){kind=avatar}
