Themen

Der Rollout von Facebook Canvas hat begonnen, ein optimaler Zeitpunkt also für einen ersten Einblick. In einem kurzen Tutorial zeige ich, wie mit dem Canvas Editor die neuen Facebook Canvas erstellt werden können.

Canvas Editor

Ist Facebook Canvas für eine Seite ausgerollt (der Rollout sollte bis am 28.02.16 abgeschlossen sein), findet man in den Publisher Tools der Facebook Seite facebook.com/SEITENURL/publishing_tools/ einen neuen Bereich “Canvas”.

Canvas in den Publisher Tools

Canvas in den Publisher Tools

 

Ein Canvas Tutorial, welches die wichtigsten Punkte erklärt, ist bereits im Publisher verfügbar, bringt aber bei mir eine Fehlermeldung und lässt sich leider nicht auf dem Smartphone (Android) betrachten.

Canvas Tutorial von Facebook

Canvas Tutorial von Facebook

Einen Canvas erstellen

Klickt man in der Canvas Übersicht auf “Create”, wird ein neuer, leerer Canvas geöffnet. Im neuen und noch leeren Canvas muss ein Titel hinzugefügt werden. Der leere Canvas beinhaltet das Header-Element, ein Photo und einen Call-to-Action-Button.

Leerer Canvas

Weitere Elemente können nach Belieben über “+ Add Component” zum Canvas hinzugefügt werden.

Zur Auswahl stehen:

  • Button
  • Carousel
  • Photo
  • Text Block
  • Video
"Add Component" im Canvas Editor

“Add Component” im Canvas Editor

 

Header

Im “Header”-Element muss ein Logo integriert werden. Das Bild sollte eine Abmessung von 120 x 44 Pixel aufweisen und wird zentriert im Canvas eingefügt, wird das Maximalformat von 882 x 66 Pixel eingefügt, wird das Bild über die ganze Breite dargestellt.. Die Hintergrundfarbe lässt sich über einen Farbwähler oder mit Hilfe des Hex-Codes #rrggbb auswählen. Ebenso kann die Transparenz des Hintergrundes gewählt werden. 

Bilddimensionen im Header

  • Bilder mit mindestens 120 x 44 Pixel, max. 882 x 66 Pixel
  • PNG-Format
  • transparentes Bild
Header im Canvas Editor

Header im Canvas Editor

 

Text Block

Im “Text Block”-Element kann ein Text mit bis zu 500 Wörter eingegeben werden. Im “Text Block” kann mit folgenden Formatierungen gearbeitet werden:

  • Schriftart “Sans-Serif” oder “Serif”
  • Schriftgrösse
  • Schriftfarbe (Farbwähler oder Hex-Code #rrggbb)
  • Fett / Kursiv / Unterstrichen
  • linksbündig, zentriert oder rechtsbündig
"Text Block"-Element im Canvas Editor

“Text Block”-Element im Canvas Editor

 

Gemäss der Spezifikation von Facebook, sind innerhalb eines Textblocks keine unterschiedlichen Formatierungen möglich, erste Tests zeigen aber, dass sehr wohl unterschiedliche Formatierungen in einem Textblock möglich sind (z.B. Fett und normale Schrift), nicht möglich sind unterschiedliche Farben oder Zeilenumbrüche.

Unterschiedliche Formatierungen im Text Block

Unterschiedliche Formatierungen im Text Block

 

Photo

Im “Photo”-Element kann ein Photo hochgeladen werden. Die Bild-Dimension muss im Minimum 640 Pixel breit sein. Es können in einem Canvas maximal 20 Bilder verwendet werden. Bilder müssen als PNG- oder JPG-Dateien hochgeladen werden. Die Vollbreite beträgt im Minimum 640 Pixel, kann aber mit 1080 Pixel eingesetzt werden, es können allerdings grössere Bilder verwendet werden, wenn die Funktion “Fit to heigt – tilt to pan” verwendet wird.

Bildoptionen

  • “Fit to width” passt das Bild auf die Breite des Bildschirms des Betrachters an.
  • “Fit to width (tap to expand)” passt das Bild auf die Breite des Bildschirms des Betrachters an, ist das Bild allerdings breiter als der Screen, kann der Betrachter das Bild vergrössern.
  • “Fit to heigt (tilt to pan)” passt das Bild an die Höhe des Bildschirms des Betrachters an. Der Betrachter kann durch Neigen des Gerätes nach Links oder Rechts entsprechend das Bild ausserhalb der Darstellung betrachten.

Bei den Bildoptionen “Fit to width” und “Fit to width (tap to expand)” kann eine eine URL hinterlegt werden. Wird das Foto angetippt, öffnet sich innerhalb der Facebook App die entsprechende Ziel-URL.

Photos im Canvas Editor

Photos im Canvas Editor

Bild mit Einstellung "Fix to heigth ("tilt to pan")

Bild mit Einstellung “Fix to heigth (“tilt to pan”)

 

Bild mit Einstellung "Fix to width"

Bild mit Einstellung “Fix to width”

 

Carousel

Im “Carousel”-Element können bis zu 10 Bilder hinzugefügt werden, es können mehrere Carousel in einem Canvas erfasst werden.

  • Alle Bilder müssen gleich gross sein.
  • Bilder können in der maximalen Höhe oder in der Teilhöhe verwendet werden.
  • Unterhalb des Bildes werden immer Punkte angezeigt, die zeigen, wo man sich im Karussell befindet, diese Punkte können nicht entfernt oder umplatziert werden.
  • Jedes Bild kann mit einer eigenen URL verlinkt werden und eine individuelle Beschreibung haben (wird nicht angezeigt).
Carousel Element im Canvas Editor

Carousel Element im Canvas Editor

 

Video

Im “Video”-Element kann ein Video im Format .MOV oder .MP4 hochgeladen werden. Die maximale Dateigrösse liegt bei 1.75 GB, die Spieldauer bei maximal 2 Minuten, verwendete Videos müssen eine Auflösung von mindestens 720 Pixel aufweisen. Es können pro Canvas mehrere Videos integriert werden, allerdings darf die gesamte Laufzeit aller Videos 2 Minuten nicht überschreiten und nur ein Video darf die Autoplay-Funktion aktiviert haben.

Facebook schreibt in den Spezifikationen, dass Canvas Videos im Portrait-Format aufgenommen werden sollen, Breitformat-Videos werden automatisch ins Hochformat konvertiert (die Videos werden entsprechend verkleinert und erhalten schwarze Balken). Das erste Bild des Videos ist automatisch das Vorschaubild.

Für Videos gibt es zwei Skalierungsoptionen:

  • Fit to width (no interaction)
  • Fit to height (tilt to pan)
Video Element im Canvas Editor

Video Element im Canvas Editor

 

Button

Es können mehrere Button-Elemente in einem Canvas platziert werden. Jeder Button besteht aus maximal 30 Zeichen und kann mit einer URL verlinkt werden. Ein Button ist 48 Pixel hoch und erhalten über- und unterhalb einen Abstand von 48 Pixel.

Gestaltungsmöglichkeiten:

  • Buttons farblich ausgefüllt oder umrandet (bei Umrandung ist der Button transparent)
  • Füll-, bzw. Umrandungsfarbe (Farbwähler oder Hex-Code #rrggbb)
  • Schriftart “Sans-Serif” oder “Serif”
  • Schriftgrösse
  • Schriftfarbe (Farbwähler oder Hex-Code #rrggbb)
  • Fett / Kursiv / Unterstrichen
  • linksbündig, zentriert oder rechtsbündig

Buttons können farblich gefüllt oder umrandet werden, dann wird der Hintergrund des Canvas im Button angezeigt.

Es besteht die Möglichkeit die Button Position zu wählen. Wird “In line (default)” gewählt, wird der Button an der entsprechenden Stelle eingesetzt. Wird “Fixed to Bottom” gewählt, ist der Button jeweils im Canvas im Fussbereich immer sichtbar.

Button Element im Canvas Editor

Button Element im Canvas Editor

 

Anordnen der Elemente

Die erstellten Elemente können im Canvas über die Pfeil-Buttons nach oben oder unten verschoben und so frei angeordnet werden. Nicht benötigte Elemente mit dem Papierkorb gelöscht werden.

Anordnen der Buttons im Canvas

Anordnen der Buttons im Canvas

 

 

Vorschau Online & Mobile

Facebook bietet während dem Erstellungsprozess zwei Vorschaumöglichkeiten.

Online Voschau im Canvas Editor

Die eine Vorschau findet direkt online im Canvas Editor statt.

Online Vorschau im Canvas Editor

Online Vorschau im Canvas Editor

Die Online Vorschau ist nicht WYSIWYG und wird mehr schlecht als recht dargestellt.

Mobile Vorschau

Damit die Mobile Vorschau genutzt werden kann, muss zuerst der Canvas gespeichert werden (“Save Draft”). Nach dem Speichern startet ein Klick auf “Preview on Device” die Vorschau auf dem Mobile Gerät. Innerhalb der Facebook App wird eine Benachrichtigung angezeigt, dass die Werbeanzeige fertig für die Vorschau ist.

Benachrichtigung Vorschau auf Mobile Gerät

Benachrichtigung Vorschau auf Mobile Gerät

 

Tippt man die entsprechende Meldung in den Benachrichtigungen an, wird die Vorschau gestartet. Die Vorschau zeigt dann problemlos den erstellten Canvas an.

Vorschau der Canvas in der Mobile App

Vorschau der Canvas in der Mobile App

 

Probleme in der Vorschau

Die Vorschau hat bei den Tests fast problemlos funktioniert. Probleme gemacht hat das Canvas Element “Carousel”. Sobald das Carousel Element im Canvas eingebunden war, stürzte die Vorschau in der Mobile App (Android) ab. Alle anderen Inhaltselemente haben beim Test keine Fehler verursacht.

 

Publizieren des Canvas

Nach der Finalisierung muss der Canvas publiziert werden mit einem Klick auf “Finish Canvas”. Nach der Publikation wird die URL angezeigt, welche im Link Ad, bzw. Conversion Ad eingesetzt werden kann.

Wichtig! Nach dem Publizieren mit “Finish Canvas” kann der Canvas nicht mehr verändert werden.

 

Erkenntnisse

Folgende Erkenntnisse habe ich bei der ersten Erstellung gewonnen:

  • die Erstellung eines Canvas ist grundsätzlich einfach, wenn auch gewöhnungsbedürftig.
  • der Erstellungsprozess benötigt Zeit und eine sinnvolle Planung, bzw. vorherige Produktion der Inhaltselemente.
  • die nicht komplett funktionierende Online Vorschau ist verwirrend.
  • das Carousel Element funktioniert in der Vorschau (noch) nicht.
  • die “Tilt to Pan”-Effekte sehen cool aus.
  • die Ladezeit ist wirklich extrem schnell.

 

 

Autor: Thomas Hutter 1703 Posts
Thomas Hutter (40) ist Inhaber und Geschäftsführer der Hutter Consult GmbH. Er berät grosse und mittlere Unternehmen, Organisationen und Agenturen in der Schweiz, Deutschland, Österreich und Niederlanden rund um den strategischen und nachhaltigen Einsatz von digitaler Kommunikation und digitalem Marketing in und mit sozialen Netzwerken.
Diese Webseite nutzt Cookies, Remarketing & Analytics. Wenn Du weiter auf dieser Seite bleibst, stimmst Du den Datenschutzbestimmungen zu. Datenschutz akzeptieren