xsMobi: Optimize Pages for Facebook's Open Graph plus use Facebook-ready FMBL

Mobihexer-Seiten an den "Open Graph" von Facebook anbinden (

& gleich Inhalt erstellen!) kleine Anleitung, dt. u. engl.

Connect Your Mobile Pages to Facebook's Open Graph

(& use xsMobi's FMBL template) bilingual how-to guide

Beispiel-Mobihexer-Seite IAW GmbH, NürnbergSample page mobihexer.de/.../iaw-nuernberg.html

Mobihexer-Menü: "Adressdaten und Einstellungen"

In the edit menu, go to "User Data and Settings"

Die Seite für Open Graph kennzeichnenMarkup for the Open Graph

The Open Graph protocol defines four required properties: title, type, url, image

Obligatorische Kennungen einer Seite für die Aufnahme in den "Social Graph". Auskunft gibt das Open Graph Protocol

Titel - z.B. Name der Firma und OrtTyp - z.B. eine Firma, ein Schauspieler, ein Hotel, ein Sportverein, eine Schule, eine Stadt, eine Sehenwürdigkeit. All das sind "soziale Objekte"URL - die genaue Webadresse der SeiteBild - die URL eines passenden Bildes

Lesetipp: "Social Objects for Beginners" (engl.)

Typ der Seite und "Administrator" festlegenSelect page type and enter your Facebook ID

Der Code der Seiten enthält Beschreibungen, "Meta-Tags", die Titel, Typ, URL und Bild wiedergeben - damit können Suchmaschinen eine Menge anfangen ...

Save "User Data and Settings" and the page HTML code is marked up with required properties - plus others such as address and geolocation data

Die Mobihexer-Seite enthält daraufhin einen"Gefällt mir"-Button - wie auf Facebook

Now, there's a Like button on the page

Drücken des "Gefällt mir"-Buttons verbindet die Seite mit dem Facebook-Netzwerk "Open Graph"!

Give the page a Like to let Facebook know the

page wants to join the Open Graph!

Sogleich erscheint eine neue Seite in der Seitenliste des Administrators, also des Mobihexer-Nutzers!In no time, a new page shows up in the Facebook pages dashboard!

Wie man sieht, sind Titel, URL und Beschreibung ("Description") auf die Seite übertragen worden, das Bild wird hier nicht übernommen. Also: Bild ändern. The meta content of our sxMobi / Mobihexer page (title, url, description) has now been transferred to the Facebook page. Except the image, so let's change it.

Seite mit neuem Logo New image uploaded

Zurück in die Facebook-Seitenbearbeitung

We can now edit the page at Facebook

Wenn wir einen freien Seitentext erstellen wollen, müssen wir die FBML-Applikation auf die Seite holen,

das sind nur ca. drei Klicks.There are now multiple options to edit the page. For

instance, let's add an FBML tab.

Die Facebook-Page hat jetzt einen neuen, leeren Reiter mit dem Titel "FBML 1"

New tab "FBML 1" in the page's application menu

Um den neuen Reiter mit Code zu bestücken, holen wir uns diesen aus dem Mobihexer-Menü

Back to the xsMobi menu, go to "fb", get the FBML

Titel des Reiters nach Wunsch umbenennen, in das große Textfeld den Code (komplett!) einkopieren

Rename the title, paste the FBML into the text area

Fertig: die Facebook-Fanpage hat jetzt einen Reiter mit dem Firmenprofil, Inhalt s. nächstes Bild

Done! The Facebook page tab is now completed. Let's have a look at its content - see next slide ...

Ergebnis: die Mobihexer-Seite jetzt als Facebook-Seiten-Reiter - zur Demo. Denn jetzt sollte der Text nachbearbeitet werden: eine einfache Duplizierung der Inhalte ist nicht Sinn der Sache! Tipp: kürzen, umtexten, Links einfügen.

The entire copy of the mobile site, built with xsMobi, is now available as a Facebook page tab. Next step: re-edit the page, avoid "duplicate content".For instance, add paragraphs relevant to Facebook, add inline links.