Schlagwort-Archiv: iframe

FlickR-Fototab für Facebookseiten erstellen

Leider stellt der Fotodienst FlickR keine wirklich schöne Lösung für fertige Facebook-Seitentabs zur Verfügung. Deshalb habe ich für den Tab auf unserer Seite des Social Media Clubs Bonn einen eigenen iframe-Tab gebaut.

Wie iframe-Tabs an sich erstellt werden, habe ich ja bereits in diesem Tutorial ausführlich erklärt: http://spr.li/iframe (pdf).Diese iframe-Tabs sind ja nichts weiter als auf Tabformat angepasste HTML-Seiten, die Sie extern auf Ihrem Webspace online gestellt haben und in Facebook via eigener Anwendung als Tab einbetten -  sofern man die nötigen HTML-Kenntnisse, einen developer-Zugang in Facebook und https-fähigen Webspace zur Verfügung hat.

Wie Sie jetzt noch die FlickR-Fotos anders als über das nicht sehr ansprechende Standardmodul darin unterbringen, zeige ich hier:

Weiterlesen

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        
fbml icon

Endgültiges Ende für Static-FBML-Tabs am 5.Dezember 2012

Erinnern Sie sich noch an Static FBML, die alte Methode zum Erstellen von eigenen Facebook-Seiten-Tabs? Neue erstellen kann man damit ja schon länger nicht mehr, aber alte Tabs wurden bislang noch angezeigt. Das wird sich am 5.Dezember 2012 ändern, denn dann werden alle solchen Tabs von Facebook gelöscht.

Falls Sie also noch alte Tabs dieser Art auf Ihrer Facebook-Seite benutzen, sollten Sie rechtzeitig auf neue iframe-Tabs umstellen.

Wie das geht, habe ich hier im Blog bereits erklärt. (Das Tutorial können Sie sich unter http://spr.li/iframe kostenlos herunterladen oder via Scribd einsehen.) Wichtig: Für diese Umsetzung sind Webdesign-Kenntnisse, eigener Webspace und ein Developer-Account in Facebook nötig.

Falls Sie diese Voraussetzungen nicht erfüllen, können Sie zum Beispiel auf folgende vorhandenen Apps zurückgreifen:

 

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Facebook: Neues Script für lange iframe-Tabs erforderlich

Facebook hat wieder mal was geändert und so funktioniert der bisherige Workaround zum Entfernen des Scrollbalkens und vollständigen Anzeigen von iframe-Tabs auf Facebook-Seiten jetzt leider nicht mehr. Den Scrollbalken entfernt es zwar weiterhin, aber der Reiter wird abgeschnitten angezeigt.

Ich gab die Frage an meine Leser weiter und erhielt sogleich folgende Lösung von Danny Trapp:

  • der body-tag wird künftig ohne overflow:hidden verwendet
  • man füge statt des alten fb-root scripts folgendes ein:

<div id=”fb-root”></div>
<script type=”text/javascript”>
window.fbAsyncInit = function() {
FB.init({
appId: ‘APP-ID‘,
status: true,
cookie: false,
xfbml: true
});
FB.Canvas.setSize({ width: 810, height: xxxxx });
};
(function() {
var e = document.createElement(‘script’);
e.async = true;
e.src = document.location.protocol +
‘//connect.facebook.net/de_DE/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>

  • Bei APP-ID setzen Sie wie gewohnt die ID Ihrer eigenen App ein, mit der Sie Ihre page(s) in Facebook einbinden.
  • Mit der Pixelangabe der Höhe muss man ggf. etwas experimentieren, bis man den richtigen Wert hat.
  • Wichtig ist auch, dass man in den App-Settings im Developer-Bereich auf 810px Weite umschaltet (falls nicht ohnehin schon geschehen).

 Herzlichen Dank, Danny!

Das komplette (und hiermit aktualisierte) Tutorial zum Einbinden von eigenen Inhalten in Seitentabs bei Facebook finden Sie hier:

http://spr.li/iframe

oder auf Scribd:

http://www.scribd.com/doc/50039880/Facebook-iframe-Tabs-Tutorial

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        
apps.jpg

Facebook-Seiten: Mehr Platz für individuelle Reiter

UPDATE: alle Beiträge zu diesem Thema und mehr finden Sie jetzt zusammengefasst unter http://www.schwindt-pr.com/downloads/fbseiten_chronik.pdf

Mit der kommenden Layoutänderung für Facebook-Seiten hat man nun wohl auch mehr Platz für seine individuellen Reiter (iframe-Tabs). Diese werden zunächst als Kästen im Kopfbereich dargestellt. Beim Aufrufen sehen die alten 520px breiten im neuen Layout noch etwas verloren aus:

Viel weiße Seite um die alten Reiter

Die neue Maximalbreite ist wohl 810px. Ob es eine maximale Höhe gibt, weiß ich noch nicht. Sobald ich etwas über die genauen Maße erfahre, werde ich das hier im Artikel nachtragen.

UPDATE: Ja, die max. Breite ist 810px. das muss man aber erst in den App-Einstellungen ändern, bevor man seine externen Inhalte entsprechend hochladen kann:

Danach kann man den angepassten Reiter hochladen:

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Neues Prozedere zum Hinzufügen von Apps für iframe-Tabs zu Seiten

Da es offenbar mit einem Posting auf der Facebook-Seite und auf Twitter allein nicht bei allen angekommen ist, auch hier nochmal der Hinweis, dass sich das Prozedere zum Hinzufügen eigener Apps für iframe-Tabs zu Seiten geändert hat. Wie immer bei solchen Änderungen haben die einen schon die neue Variante, andere noch die alte…

Die alte Variante sah vor, dass man sich nach dem Erstellen der App zur automatisch erstellten Profilseite derselben durchklickte und dort “Zu meiner Seite hinzufügen” wählte. Manche haben diesen Link noch und alles funktioniert wie gehabt, andere haben zewar den Link noch, das hinzufügen klappt aber nicht mehr…

Daher habe ich mein Tutorial zum Erstellen und Hinzufügen vin iframe-Tabs zu Facebook-Seiten aktualisiert. Das Tutorial kann auch als pdf-Dokument oder auf Scribd heruntergeladen werden.

Das neue Prozedere scheint aber noch in der Betaphase zu sein, daher sollte man auf Fehlfunktionen gefasst sein. Aber das kennen wir ja schon…

 

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Facebook: iframeTabs – eigene Anwendung oder…?

Gerade wurde gemeldet, dass ab 1.Oktober 2011 alle über eigene Anwendung erstellten iframeTabs eine https-Version haben müssen. Wer die im iframeTab eingebundenen externen Inhalte auf einem Webspace hat, der https einschließt, kann dem gelassen entgegensehen. Wer dies aber nicht hat, könnte in die Bredouille kommen…

Lösung A: eigenen Webspace mit https-Version aufrüsten

Lösung B: gesonderten Webspace, der https einschließt, für iframeTab hosten lassen.

Lösung C: statt eigener Anwendung Drittanwendung benutzen.

Welche alternativen Drittanwendungen haben Sie schon ausprobiert und was können diese?

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Facebook: Neues zu iframe-Tabs und https

Es gibt wieder was Neues in Sachen iframe-Tabs und https. Wer einen iframe-Tab ohne https-Version angelegt hat, bekam ja zuerst eine Fehlermeldung beim Versuch, den Tab über eine sichere Verbindung (https) aufzurufen. Dann wurde das Anzeigen solcher frame-Tabs für https-Nutzer ganz deaktiviert. Inzwischen ist es so, dass die https-losen frame-Tabs für https-Nutzer wieder im Menü der Fanseite angezigt werden und man beim Versuch, sie anzuzeigen folgende Meldung erhält:

Zu einer regulären Verbindung (http) wechseln? Es tut uns leid, aber wir können diesen Inhalt nicht anzeigen, während Du Facebook über eine sichere Verbindung (https) benutzt. Möchtest du vorübergehend auf eine unsichere Verbindung wechseln, um diese Anwendung zu benutzen? Nach deinem nächsten Login besteht wieder eine sichere Verbindung.

Damit wird man als Nutzer einer sicheren Verbindung immerhin darauf hingewiesen, dass es noch andere Tabs gibt und hat die Wahl, ob man zu http wechseln möchte, oder nicht.

Seitenbetreiber hingegen sehen folgende Meldung:

Please update yoursecure url. To make sure useres can view your app over a secure browser connection (https), please visit the developer console to update your Secure Canvas URL.

Das nützt Seitenbetreibern, die keine https-Version zu ihrer Website haben, auf deren Server die iframe-Inhalte liegen, alerdings auch nicht mehr als vorher. Aber immerhin werden sie so auf die Möglichkeit hingewiesen, eine sichere Verbindung in ihre App eintragen zu können.

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Facebook: Wenn der iframe-Tab Probleme macht – UPDATED

Das iframe-Tab-Tutorial zum Einbinden individueller Inhalte in Facebook-Fanseiten erfreut sich großer Resonanz. Leider gibt es aber beim ein oder anderen Anzeigeprobleme. Daher hier noch ein Nachtrag zum Tutorial:

Method POST not allowed

Problem 1: Die externen Inhalte werden im iframe-Tab nicht angezeigt, stattdessen erscheint eine Fehlermeldung wie: “Method Not Allowed The requested method POST is not allowed for the URL”

Lösung: Benennen Sie die einzubindenden Seiten von .html um in .php (auch Verlinkungen innerhalb des Tabs ändern, falls vorhanden!). Dann sollte alles normal angezeigt weden.

Scrollbalken

Problem 2: Die einzubindende Seite ist höher als 800px, so dass Facebook Scrollbalken in den Tab einfügt, was unschön aussieht.

UPDATE2 (August 2012): Die unten gezeigte Lösung funktioniert nicht mehr. Lesen Sie die neue Lösung HIER nach.

 

Lösung: Setzen Sie <body style=”overflow:hidden”>

und fügen Sie folgendes Script am Anfang des body ein:

<div id=”fb-root”>
<script src=”http://connect.facebook.net/en_US/all.js“></script>

<script type=”text/javascript”>
FB.init({
appId : ‘IHRE APP-ID‘,
status : true,
cookie : true,
xfbml : true,
oauth: true
});
FB.Canvas.setAutoResize(true, 500);
</script>

</div>

 

 

Das Tutorial wurde auch um diese beiden Hinweise ergänzt und kann nach wie vor als pdf (439kb) heruntergeladen werden unter:

http://www.scribd.com/doc/50039880/Facebook-iframe-Tabs-Tutorial

oder

http://www.schwindt-pr.com/iframetabs.pdf

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Facebook-Fanseiten weitersagbar machen (iframe-Tab plus HTML)

Mit den neuen iframe-Tabs kann man ganz bequem individuelle Inhalte in seine Fanseite einbauen, Weitersage-Möglichkeiten inklusive. Damir lässt sich auch eine erweiterte Alternative zum  seit längerem fehlerhaften “Freunden vorschlagen”-Link erstellen. Ich habe das auf meiner Fanseite mal zu Demonstrationszwecken gemacht:

 

Wie das mit den Weitersagebuttons geht, habe ich hier im Blog bereits vor einiger Zeit erklärt:
http://dewww.schwindt-pr.com/2011/01/21/weitersagen-auf-facebook-und-twitter-fuer-fanseiten-static-fbml/

…und sie auch auf meiner Website und den anderen individuellen Unterseiten meiner Fanseite erfolgreich eingesetzt.

Das iframe-Tab-Tutorial von GECKOweb und mir finden Sie unter:
http://www.scribd.com/doc/50039880/Facebook-iframe-Tabs-Tutorial oder
http://www.schwindt-pr.com/iframetabs.pdf

 

 

Ich freue mich, wenn Sie diesen Beitrag weitersagen via        

Facebook iframe-Tabs: individuelle Fanseiten-Reiter mit eigener Anwendung erstellen – UPDATED

UPDATE 11.12.2011: Facebook hat das Prozedere für das Hinzufügen der App zur Seite geändert (siehe unten)!

Dieses Tutorial kann kostenlos als pdf-Datei heruntergeladen werden
und ist auch auf scribd verfügbar.

Mit der Umstellung auf das neue Fanseiten-Layout, das Anfang März 2011 für alle eingeführt wird, hat Facebook nun auch das Erstellen von sogenannten iframe-Tabs als individuelle Gestaltungsmöglichkeit von Fanseiten eingeführt. Reiter, die mit Static FBML erstellt wurden, sollen zunächst weiter angezeigt werden. Da die neuen Reiter aber viel umfangreicher gestaltet werden können, sollte man das auch nutzen und bald umstellen.

Dazu nötig sind:

  • externer Webspace (z.B. dort, wo Ihre reguläre Website auch liegt) inklusive Variante mit sicherer Verbindung (https)!!!
  • ein verifiziertes Privatkonto auf Facebook, mit dem Sie auch Admin der Fanseite sind, zu der die individuellen Inhalte hinzugefügt werden sollen
  • HTML- und CSS-Kenntnisse (oder ein Webdesigner, der diesen Teil für Sie übernimmt)

Dieses Tutorial zeigt Ihnen, wie Sie die individuellen Inhalte vorbereiten müssen, die in die Fanseite eingebunden werden sollen, und wie dieses Einbinden dann funktioniert.

Inhalte vorbereiten

Die Inhalte eines iframe-Tabs können Sie wie normale Websites designen und (wie auch sonst im Webdesign) ausgehend von einer index.html konzipieren. Für die CSS-Datei des iframe-Tabs können Sie die CSS-Datei Ihrer Website kopieren und entsprechend anpassen.

Für Fanseiten-Reiter gilt eine maximale Breite von 810px. Da für iframe-Tab aber auch noch eine maximale Höhe von 800px hinzukommt, sollten Sie vorsichtshalber nochmal 10px von der max. Breite abziehen, damit der vertikale Scrollbalken, der beim Überschreiten der max. Höhe erscheint, nicht noch zu einem weiteren horizontalen Scrollbalken führt. Legen wir also 800px Breite und max. 800px Höhe für den body fest.

WICHTIG: Links, die aus dem Reiter hinaus auf externe Webseiten führen sollen, müssen mit target=”blank” versehen werden, weil Facebook sonst versucht auch diese (nicht für die Ansicht in Facebook optimierten Seiten) im Reiter darzustellen.

Von dieser Startseite ausgehend können Sie weitere Unterseiten ganz normal über ein Menü oder Textlinks untereinander verlinken. Solange Sie sich an die genannte Größe halten und folgende weiteren Regeln beachten, werden diese Seiten nachher im Tab selbst navigierbar angezeigt:

Der im Video gezeigte Tab hat z.B. folgende Struktur:

  • Home (index.html)
  • Grundsätze (grundsaetze.html)
  • Publikationen (publikation.html)
  • Kontakt (kontakt.html)
  • Impressum (Link zum Impressum der regulären Website ist ein MUSS und wird daher mit target=”blank” eingebunden!)

Die html-Dateien sowie die dazugehörige CSS-Datei liegen alle im selben Unterordner meiner Website bereit. Diese für die Facebook-Ansich optimierte Miniwebsite muss nun über eine im Folgenden zu erstellende Facebook-Anwendung auf der Fanseite anzeigbar gemacht werden:

Erstellen einer Facebook-Anwendung

  1. Legen Sie auf Ihrem Webserver einen eigenen Ordner an und kopieren Sie die Dateien für den Tab (.css und .html) in diesen Ordner.
  2. Die neu erstellte index.html für den neuen Tab ist also zu finden unter
    http://meinewebseite.de/meinordner/index.html
  3. Öffnen Sie in einem neuen Browser-Tab die Developer-Seite von Facebook
    http://www.facebook.com/developers/
  4. Klicken Sie rechts oben auf den Button + Create new app
  5. Geben Sie Ihrer Anwendung einen Namen (kann man jederzeit wieder ändern und ist nach außen nicht sichtbar) und stimmen Sie den Allgemeinen Geschäftsbedingungen von Facebook zu:
  6.  Klicken Sie auf Weiter.
  7. Danach werden Sie gebeten einen Sicherheits-Code einzugeben.
  8. Nun werden Sie aufgefordert, einen Namen für Ihre Anwendung einzugeben (wird später nicht Name des Reiters) und eine Kontakt-Emailadresse sowie die Anwendungsdomain (facebook.com eintragen):
  9. Ganz oben können Sie außerdem ein Icon für Ihren Reiter hochladen:
    Weitere Anweisungen finden Sie dann im neuen Fenster:
    Es sollte – wie ein normales Favicon –  16x16px groß sein, allerdings JPG-, GIF- oder PNG-Format haben und nicht größer als 5MB sein. Außerdem versichern Sie mit dem Hochladen, dass Sie die Rechte an diesem Bild besitzen.
  10. Jetzt geben Sie weitere Details zu Ihrer neuen Anwendung ein:

    • Website > Adresse der Webseite: http://facebook.com/
    • Seitenreiter > Page Tab Name:  späterer Name des Reiters
    • Page Tab URL: wo befindet sich die Startseite Ihrer extern bereitgestelten Reiter-Inhalte?
    • Secure Page Tab URL: wo befindet sich die sichere Startseite (https) Ihrer extern bereitgestellten Reiter-Inhalte?

    ÄNDERUNGEN SPEICHERN!

Ihre Anwendung zu Ihrer Fanseite hinzufügen (s.pdf-Download ganz oben)

  1. Modifizieren Sie den folgenden Link mit Ihren Parametern:   https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=http://www.facebook.com/
    • YOUR_APP_ID = Ihre App-ID (finden Sie ganz oben auf Ihrer Anwendungsseite, siehe Grafik bei Punkt 8)

    Beispiel:
    https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID_HERE&display=popup&next=http://www.facebook.com/

     

  2. Geben Sie dann diesen modifizierten Link ins Adressfeld Ihres Browsers ein und öffnen Sie ihn. Daraufhin erscheint so ein Dialog:
    • Über Choose Facebook Pages können Sie die gewünschte Facebook-Seite auswählen, zu der der neue reiter hinzugefügt werden soll.
    • Über Add Page Tab fügen Sie den Reiter zu Ihrer Fanseite hinzu.
  3. Wechseln Sie zu Ihrer Fanseite. Dort sollte Ihre Anwendung jetzt als Menüpunkt erscheinen:
    Screenshot Fanseiten-MenüIm Reiter dazu kann man dann die einzelnen Unterseiten direkt im Reiter aufrufen:

    screenshot iframetab schwindt-pr

    Bild anklicken, um Original-Tab zu sehen

Ich freue mich, wenn Sie diesen Beitrag weitersagen via