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端rnberg Sample 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 kennzeichnen Markup 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 Ort Typ - 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 Seite Bild - die URL eines passenden Bildes Lesetipp: "Social Objects for Beginners" (engl.)

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

Der Code der Seiten enthält Beschreibungen, "MetaTags", 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Ă&#x;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.