Thomas Hutter's Social Media Blog | Facebook Marketing und Social Media » fanpage http://www.thomashutter.com Aktuelles zu Facebook, Facebook Marketing und Social Media Tue, 21 May 2013 15:24:55 +0000 de-DE hourly 1 Facebook: like extended! http://www.thomashutter.com/index.php/2010/09/facebook-like-extended/ http://www.thomashutter.com/index.php/2010/09/facebook-like-extended/#comments Fri, 10 Sep 2010 06:57:39 +0000 Thomas Hutter http://www.thomashutter.com/?p=3393 Wie Facebook gestern im Developer Blog ankündigte, wurde die Funktionen und Möglichkeiten rund um den “Like”-Button erweitert. Neu ist es möglich, den “Like”-Button auch für das “Liken” von virtuellen Gütern ohne, dass dafür eine physische Seite benötigt wird einzusetzen. Ebenfalls neu ist die Möglichkeit den Like-Button mit einer Facebook-Seite zu verbinden. Ebenfalls erweitert wurde die Layout-Möglichkeit des “Like”-Button. Nun aber der Reihe nach…

Neue Darstellungsmöglichkeit “Box-Count”

Bis anhin gab es zwei Möglichkeiten den “Like”-Button darzustellen, die Standard-Möglichkeit mit dem Text (XX und XX andere Personen empfehlen/gefällt das) oder den Like  zusammen mit der Anzahl der Like-Zahlen zu platzieren. Die neue Möglichkeit “Box-Count” stellt den Like-Button wesentlich grösser, aber auch kompakter mit der Anzahl der Liker in einer Box dar, was je nach Layout und Content wesentliche Verbesserungen in der Platzierung, aber auch in der visuellen Wahrnehmung bringt.

Die alten Darstellungsmöglichkeiten und die neue “Box-Count”-Darstellung:

Der neue Like-Button

Der neue Like-Button

Die Darstellungsvariante “Box-Count” zeigt oberhalt des Buttons die Anzahl der “Likes” und kann über den Paramter layout=”box_count” gewählt werden. Der von Facebook zur Verfügung gestellte Konfigurator beinhaltet die neue Darstellungsmöglichkeit ebenfalls.

“Like-Button” mit Facebook Seiten verbinden

Bis anhin war es nur möglich, den “Like-Buttons” mit der URL einer Website zu verbinden. Die Erweiterung des “Like-Buttons” beinhaltet neu auch die Verbindungsmöglichkeit mit einer Facebook Seite. Neben der bereits bestehenden Like-Box erhalten Webmaster nun also ein zweites Instrument um die Anzahl der Fans über die Website zu steigern. Neu kann im Konfigurator auch die URL der Facebook Seite verwendet werden, im Konfigurator der Like-Box war bisher die Verbindung nur über die Page-ID möglich.

Beispiel:

Jetzt Fan von Thomas Hutter’s Social Media Blog auf Facebook werden:

Selbstverständlich sind auch hier alle drei Darstellungsvarianten wie oben beschrieben möglich.

“Like-Button” für Canvas-URLs auf Facebook

Ebenfalls neu ist die Möglichkeit, den “Like-Button” in Verbindung mit Facebook-Applikationen zu verwenden. Neben Facebook Seiten und normalen Webseiten können so also auch Verbindungen in Applikationen hergestellt werden. Die daraus resultierende News-Feed-Story verlinkt so direkt zurück in die Applikation. Um diese Funktion zu implementieren, müssen die Informationen über die Tags das Open Graph Protokoll hinzugefügt werden. Innerhalb der <meta>-Tags im <head> in der eingebundenen iFrame-Seite oder des Canvas-Endpunkts. Die Canvas Application’s ID wird automatisch als fb:app_id hinzugefügt. Die og:url verweist automatisch auf die apps.facebook.com-URL, der Tag og:site_name wird automatisch mit dem Namen der Applikation ausgefüllt.

Wenn Beispielsweise die Distribution von Inhalten gefördert oder den Benutzern die Möglichkeit des “Liken” von virtuellen Gütern gegeben werden soll, müssen folgende Code-Zeilen des Open Graph Protokolls hinzugefügt werden:

  • og:title – Der Titel des Objects
  • og:image – der URL zum Bild, das repräsentiert werden soll. Das Bild muss mindestens 50×50 Pixel und darf maximal ein Verhältnis von3:1 aufweisen.

Wenn ein “Real-World”-Objekt eingebunden werden soll (z.B. Film, Produkt), muss/soll der Tag og:type mit dem entsprechenden Wert hinzugefügt werden. Mehr Infos zum Open Graph Protokoll habe ich im Artikel “Facebook: “Like”-Button – Social Graph – Open Graph Protokoll” erläutert. Die korrekte Anwendung des Open Graph Protokolls kann über den URL Linter überprüft werden.

Gefahren

Grundsätzlich begrüsse ich die Möglichkeit, dass Facebook Seiten über den Like-Button verknüpft werden können. Allerdings beinhalten diese neuen Möglichkeiten auch gefahren. War es bis anhin klar, was man “liked”, ist es mit den neuen Möglichkeiten nicht mehr eindeutig sichergestellt, ob ein Artikel, eine Seite oder “irgend ein Gut” geliked wird. Bei einer missbräuchlichen Anwendung des Like-Buttons könnte dies negative Einflüsse auf die Online Reputation eines Benutzers nehmen.

]]> http://www.thomashutter.com/index.php/2010/09/facebook-like-extended/feed/ 0 Facebook: “Like”-Button – Social Graph – Open Graph Protokoll http://www.thomashutter.com/index.php/2010/04/facebook-like-social-graph-open-graph-protokoll/ http://www.thomashutter.com/index.php/2010/04/facebook-like-social-graph-open-graph-protokoll/#comments Fri, 30 Apr 2010 09:01:25 +0000 Thomas Hutter http://www.thomashutter.com/?p=2533 An der F8 Konferenz vom 21.04.2010 stellte Facebook “Like” vor, voller Enthusiasmus baute ich wie diverse weitere Blogger und sehr viele Webseitenbetreiber – gemäss einer von Facbeook publizierten Meldung immerhin 50’000 in der ersten Woche – den Like-Button in den Blog, bzw. in die Website mit ein. Der Einbau des Like-Buttons war auch nicht wirklich schwer, Facebook vereinfachte das Prozedere mit der Einbaumöglichkeit via iFrame. Beim Studium der von Facebook zur Verfügung gestellten Informationen zur Graph-API wurde mir bewusst, dass der Like-Button ein nicht unwesentlicher Teil des Social Graph ist, allerdings nicht wie von mir und vielen anderen angenommen, eine einfacher zusätzlicher Verlinkungsmechanismus. Vor allem Websitebetreiber, die bereits mit einer Fanpage aktiv auf Facebook vertreten sind, sollten sich den Einsatz des Like-Buttons zweimal überlegen – durch die Verwendung des Like Buttons werden Facebook Seiten erstellt, diese Seiten können unter Umständen in Konkurrenz mit der eigentlichen Fanpage stehen.

Nachfolgend die Beschreibung gemäss developers.facebook.com.

Open Graph Protokoll / Social Graph

Das Open Graph Protokoll ermöglicht es einem Websitebetreiber, seine Website in den Social Graph zu integrieren. Das Open Graph Protokoll ist zur Zeit für Webseiten vorgesehen, welche Dinge der realen Welt repräsentieren, Dinge wie Filme, Sportmannschaften, Persönlichkeiten, Restaurants, Websites, Blogs, etc. Sobald die Website Inhalte im Social Graph erhält, können Facebook Benutzer eine Verbindung zu der Website aufnehmen, Facebook erstellt dafür eine eigenständige Page, analog wie sie es bereits mit Facebook Seiten (Fanpages) machen können. Basierend auf den strukturierten Daten, welche über das Open Graph Protokoll an Facebook zur Verfügung gestellt werden, entstehen Nennungen der Website innerhalb von Facebook: in Benutzerprofilen, in Suchresultaten und im NewsFeed.

Einleitung Facebook Social Graph - Graph API

Einleitung Facebook Social Graph - Graph API

Mit Social Graph starten

Damit eine Website in den Social Graph integriert werden kann, müssen die entsprechenden Inhalte in Graph Objekte verwandelt werden. Dafür müssen <meta>Tags des Open Graph Protokolls sowie der “Like”-Button in die Website integriert werden.

Diese Tags ermöglichen es, strukturierte Informationen über die Seite zu spezifizieren. Umso mehr Informationen zur Verfügung gestellt werden, desto mehr Möglichkeiten bietet Facebook zur Darstellung heute und in Zukunft.

Hier ist ein Beispiel für eine Film-Seite:

<html
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
...
</head>
...
</html>

Für das Open Graph Protokoll sind fünf notwendig Einstellungen/Werte definiert:

  • og:title –  Der Titel des Objekts wie er im Social Graph dargestellt werden soll, z.B. “The Rock”.
  • og:type – Der Typ des Objekts, z.B. “movie”. Die komplette Liste der unterstützen Typen.
  • og:image – Ein Image-URL, der im Zusammenhang mit dem Objekt im Graph dargestellt werden soll. Das Bild muss im Minimum 50x50px und ein Maximum Verhältnis von 3:1 aufweisen.
  • og:url – Der Canonical-URL als permanente ID für das Objekt im Social Graph, z.B. http://www.imdb.com/title/tt0117500/.
  • og:site_name – Ein durch Menschen lesbarer Name der Seite, z.B. “IMDb”

Zusätzlich zu diesen Basis-Angaben muss ein zusätzlicher Wert hinzugefügt werden, dass die Seite verbunden werden kann mit:

  • fb:admins oder fb:app_id – eine kommagetrennte Liste der Facebook-Benutzer-ID’s oder der Facebook Plattform-Applikations ID welche die Seite administrieren.

Empfohlen wird auch, dass ein zusätzliche Wert für die Beschreibung oder diese zusätzlichen Werte hinzugefügt werden:

  • og:description – eine Beschreibung der Seite in einem Satz oder zwei Sätzen.

<meta property=”fb:admins” content=”USER_ID”/>
<meta property=”og:description” content=”A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons.”/>

Bei der nachfolgenden News Feed Story, werden og:title verlinkt mit og:url und og:site_name  automatisch auf die Website verlinkt:

Beispiel einer Facebook NewsFeed Meldung

Beispiel einer Facebook NewsFeed Meldung

In einem Benutzer-Profil definieren og:type in welcher Kategorie der Link und og:image welches Thumbnail verwendet werden soll.

Beispiel der Darstellung innerhalb eines Facebook Benutzerprofils

Beispiel der Darstellung innerhalb eines Facebook Benutzerprofils

Für einige Objekte macht es Sinn, weitere zusätzliche Meta-Angaben zu spezifizieren, z.B. das Ort beim einem Restaurant. Es können so viele og:-Angaben hinzugefügt werden, wie Sinn machen. Mehr Infos zu den Möglichkeiten.

Den Like-Button hinzufügen

Sobald die Meta-Informationen in die Page integriert sind, kann der Like-Button der mit dieser Seite verbunden ist, hinzugefügt werden. Der Like-Button kann einfach über ein <iFrame>, oder als XFBML-Tag hinzugefügt werden <fb:like>. Die zweite Variante benötigt das JavaScript SDK.

Im entsprechenden Beispiel für “the Rock” auf “IMDb” wäre dies für eine Darstellung von 450 x 80 Pixel unter Verwendung des XFBML-Codes folgender Eintrag:

<fb:like href="http://www.imdb.com/title/tt0117500/" width="450" height="80"/>

Administration der Seite

Die Änderungen der Attribute der Seite können über die <meta>Tags bewerkstelligt werden. Zu beachten gilt, dass die Werte von og:title und og:type nur anfänglich editiert werden können, sobald eine Seite mehr als 10 likes aufweist, werden diese Angaben fixiert. Diese Massnahme ist ein Schutz der Benutzer, nicht, dass Benutzer, die bereits die Website “geliket” haben, anschliessend überrascht sind, dass die Seite einen anderen Sinn oder Inhalt darstellt.

Sobald sich Benutzer mit der Seite verbunden haben, können Seitenadministratoren Stream Updates zu allen Benutzern publizieren und Statistiken einschauen, analog dies bei Facebook Seiten (Fanpages) gemacht werden können. Damit eine Seite administriert werden kann, ist eine Verbindung mit dem Facebook-Benutzer notwendig. Um diese Verbindung vornehmen zu können, muss der zusätzliche Wert fb:admins in die Seite hinzugefügt werden. Kommagetrennt kann so eine Liste der Administratoren hinzugefügt werden:

<meta property="fb:admins" content="USER_ID1,USER_ID2"/>

Jedes Mitglied dieser Liste muss auf der entsprechenden Seite “Like” anklicken, damit es als Administrator überprüft werden kann. Dies gilt wieder als Schutz, damit nicht irgendwelche Benutzer als Administratoren hinzugefügt werden können. Wichtig, der erste Benutzer in diesem Eintrag kann nicht entfernt werden.

Sobald die Verbindung zwischen der Seite und dem Facebook Account stattgefunden hat, wird die Seite unter “Konto -> Seiten verwalten” administriert werden.

Facebook - Seiten verwalten

Facebook - Seiten verwalten

Von diesem Interface aus, können Stream-Updates publiziert und Analyse-Daten über die Benutzer, die sich mit der Seite verbunden haben, eingeschaut werden.

Administration der Seiten via Applikation

Einige Seiten werden über hunderte oder tausende Subseiten mit den Open Graph Protokoll <meta>Tags verfügen, damit solche Seiten ebenfalls effizient administriert werden können, kann für solche Seiten eine Applikation geschrieben werden.

Empfohlene Meta-Daten

Zwei übliche Informationen über die die meisten Seiten verfügen sind Ort und Kontaktinformationen, nachfolgend ist aufgelistet, wie diese Informationen als <meta>-Daten hinzugefügt werden können.

Ort

Die Ortsangabe ist für Seiten von Firmen, Restaurants oder alle anderen Seiten mit effektiv existierenden Orten. Die Ortsangaben können mit Latitude und Longitude, eine Adresse oder mit beidem definiert werden.

Folgende Werte sind möglich:

  • og:latitude -  z.B. “37.416343″
  • og:longituede – z.B. “-122.153013″
  • og:street-address – z.B. “-1601 S California Ave”
  • og:postal-code – z.B. “94304″
  • og:country-name – z.B. “USA”

entsprechend sehen diese Informationen im Meta-Bereich wie folgt aus:

<meta property=”og:latitude” content=”37.416343″/>
<meta property=”og:longitude” content=”-122.153013″/>
<meta property=”og:street-address” content=”1601 S California Ave”/>
<meta property=”og:locality” content=”Palo Alto”/>
<meta property=”og:region” content=”CA”/>
<meta property=”og:postal-code” content=”94304″/>
<meta property=”og:country-name” content=”USA”/>

Kontaktinformationen

Um Kontaktinformationen hinzuzufügen, können folgende Informationen hinzugefügt werden:

  • og:email - z.B. “moc.elpmaxenull@em”
  • og:phone – z.B. “650-123-4567″
  • og:fax – z.B. “+1 415 123 4567″

entsprechend sehen diese Informationen im Meta-Bereich wie folgt aus:

<meta property=”og:email” content=”moc.elpmaxenull@em”/>
<meta property=”og:phone_number” content=”650-123-4567″/>
<meta property=”og:fax_number” content=”+1-415-123-4567″/>

Objekt Typen

Je nach Objekt muss für die Verwendung im Social Graph ein Typ definiert werden, dies erfolgt über den Wert og:type und sieht so aus:

<meta property="og:type" content="product" />

Folgende Typen werden zur Zeit von Facebook unterstützt:

Aktivitäten

  • activity
  • sport

Geschäft

  • bar
  • company
  • cafe
  • hotel
  • restaurant

Gruppen

  • cause
  • sports_league
  • sports_team

Organisationen

  • band
  • government
  • non_profit
  • school
  • university

Personen

  • actor
  • athlete
  • author
  • director
  • musician
  • politician
  • public_figure

Orte

  • city
  • country
  • landmark
  • state_province

Produkte und Unterhaltung

  • album
  • book
  • drink
  • food
  • game
  • movie
  • product
  • song
  • tv_show

Produkte welche über einen UPC-Code oder eine ISBN-Nummer verfügen, können dies mit dem Wert og:upc und og:isbn spezifizieren. Diese Werte erlauben es, genaue Verbindungen im Social Graph herzustellen.

Websites

  • article
  • blog
  • website

Wichtig für Besitzer von Facebook Seiten (Fanpages)

Beim Einbinden der Social Graph Funktionalität über das Open Graph Protokoll erstellt Facebook entsprechende Facebook Seiten (Gemeinschaftsseiten), diese Seite können natürlich unter Umständen die eigentliche Facebook Seite, welche bereits besteht, konkurrenzieren (Suche, Fangewinnung, etc.). Für Besitzer von bestehenden Facebook Seiten steht nach wie vor die Like-Box oder dem Fanpage Widget für die Einbindung in die Website zur Verfügung. Wie eine Verbindung von Facebook Seite (Fanpage) und dem Facebook Seiten (Gemeinschaftsseiten) aussehen kann, kann ich mir im Moment noch nicht definitiv vorstellen.

Enormes Potential

Das enorme Potential im Zusammenhang mit der Interaktion mit dem Social Graph ist nicht weg zu diskutieren und dürfte vielen Websites enorme neue Möglichkeiten eröffnen, Inhalte besser zu verteilen und Facebook Benutzer noch gezielter anzusprechen.

The Open Graph Protocol Design Decisions

]]> http://www.thomashutter.com/index.php/2010/04/facebook-like-social-graph-open-graph-protokoll/feed/ 12