Skip to main content

Facebook

Einrichtung » Mandant » Global » Dienste » Facebook

Einrichtung » Mandant » Mandant wählen » Dienste » Social Media

Alt: CMS & Webshop

Diese Handbuchseite widmet sich Funktionen des alten plentymarkets Webshops Callisto. Informationen zum Webshop-Template Ceres findest du hier.

1. Facebook

Facebook ist mittlerweile das dominierende soziale Netzwerk weltweit und auch in Deutschland führend. Dabei sieht sich Facebook als "Soziales Werkzeug", also als eine Plattform, mit deren Hilfe Entwickler neue Applikationen erschaffen (golem.de). Wer eine eigene Facebook-App (z.B. für den Webshop) entwickelt hat, kann dieses Menü verwenden, um die App mit plentymarkets zu verbinden.

Tipp: Facebook-App

Wenn du noch keine Facebook-App entwickelt hast und diesbezügliche Informationen benötigst, findest du hilfreiche Information dazu auf developers.facebook.com/docs/appsonfacebook/tutorial/.
Deutschsprachige Anleitungen, wie du eine Facebook-App in deinen Account integrierst, findest du in einschlägigen Tutorials und Blogs im Internet sowie in entsprechender Literatur. Es sind gewisse Kenntnisse nötig, um eine App zu realisieren, die du dir vorher aneignen solltest oder du lässt die Entwicklung der App z.B. von einem Dienstleister ausführen.
Ein Beispiel für eine Facebook-App ist ein Gewinnspiel, auch dazu gibt es im Internet verschiedene weitere Informationen, wie du ein Gewinnspiel als App erstellet und integrierst.

Sandbox-Modus

Für nach dem 3.4.2013 erstellte Facebook-Apps gilt die Grundeinstellung Sandbox-Modus. Das heißt, diese Apps sind in diesem Testmodus nicht öffentlich sichtbar. Prüfe diese Einstellung gegebenfalls. Den Sandbox-Modus kannst du in den Grundeinstellungen unter https://developers.facebook.com/apps ausschalten.

Kommentarfunktion

Wenn du keine App verwenden möchtest, kannst du z.B. trotzdem die Facebook-Kommentarfunktion nutzen. Beachte dazu den Handbuchlink am Ende dieser Seite.

2. Facebook einrichten

Du musst die folgenden Schritte durchführen, um deine Facebook-App mit plentymarkets zu verbinden.

Facebook App-Einstellungen hinterlegen:

  1. Öffne das Menü Einrichtung » Mandant » Global » Dienste » Facebook.

  2. Klicke auf das Tab Facebook App-Einstellungen.

  3. Hinterlege die APP ID und die ID unter APP SECRET, die du zum Konfigurieren deiner Facebook-App verwendet hast.

DE Mandant GlobEinstell ExtDienste Facebook 01 SI
Bild 1. Facebook App-Einstellungen hinterlegen

Neues Facebook-Konto registrieren:

  1. Öffne das Menü Einrichtung » Mandant » Global » Dienste » Facebook.

  2. Klicke auf das Tab Facebook-Konten.

  3. Klicke auf das Zahnrad neben dem Link Neues Facebook-Konto registrieren.

DE Mandant GlobEinstell ExtDienste Facebook 02 SI
Bild 2. Link zur Registrierung in plentymarkets
  1. Es öffnet sich ein neues Fenster, in dem du an Facebook weitergeleitet wirst. Logge dich ggf. ein. Facebook fragt dich nun, ob du den Zugriff der plentymarkets-Schnittstelle erlauben möchtest. Bestätige dies.

  2. Wenn du nun das Menü Einrichtung » Mandant » Global » Dienste » Facebook neu lädst, wird die Gültigkeit deiner Registrierung angezeigt.

  3. Wähle bei mehreren Konten ein Standard-Konto.

  4. Das Menü wurde eingerichtet. Du kannst nun deine Apps auf der Facebook-Seite verwalten.

DE Mandant GlobEinstell ExtDienste Facebook 03 SI
Bild 3. Facebook-Konto
Löschfunktion

Du kannst das Facebook-Konto wieder löschen. Wenn du das Konto mit dem Löschen-Icon gelöscht hast, kannst du es, wie zu Beginn dieses Kapitels beschrieben, jederzeit wieder einrichten.

3. Webshop-Login über Facebook

Im Folgenden wird erläutert, wie du deinen Kunden die Möglichkeiten anbietest, sich über Facebook-Zugangsdaten in deinen Webshop einzuloggen. Um die Funktion verwenden zu können, benötigst du eine eingerichtete Facebook-App. Zur Verlinkung zu Facebook hinterlegst du dann deine Facebook-Zugangsdaten, wie nachfolgend beschrieben.

Beachte den Hinweis zu Facebook-Apps in Kapitel 1.

3.1. App-Zugangsdaten hinterlegen

Nachdem du bei Facebook eine App eingerichtet hast, erhältst du die Zugangsdaten, die du dann in plentymarkets hinterlegst.

Facebook-App-Einstellungen hinterlegen:

  1. Öffne das Menü Einrichtung » Mandant » Global » Dienste » Facebook.

  2. Klicke auf das Tab Facebook-App-Einstellungen.

  3. Trage die APP-ID und das APP-Secret ein, wie von Facebook erhalten (Bild 1).

  4. Speichere () die Einstellungen.

3.2. Platzhalter hinterlegen

Es stehen folgende Platzhalter für die Integration des Facebook-Logins zur Verfügung:

  • $FacebookLoginButton

  • $FacebookLoginScript

Hinterlege die Platzhalter im Menü CMS » Webdesign » Layout » PageDesign » PageDesignContent.

Tipp

Alternativ zum Platzhalter für den Login kannst du die Schaltfläche auch individuell im Layout ohne den Platzhalter konfigurieren.

3.3. Login-Funktion aktivieren

Die Login-Funktion aktivierst du wie nachfolgend beschrieben. Du kannst die Funktion bei Bedarf an dieser Stelle auch wieder inaktiv schalten.

Facebook-App-Funktion aktivieren:

  1. Öffne das Menü Einrichtung » Mandant » Mandant wählen » Dienste » Social Media.

  2. Stelle auf die Option Facebook Login auf aktiv.

  3. Speichere () die Einstellungen.

3.4. Facebook-Login im Webshop

Das folgende Bild zeigt das Layout der Funktion. Der Kunde klickt auf die Schaltfläche Anmelden und es wird ein Fenster mit dem Facebook-Login geöffnet.

DE Mandant GlobEinstell ExtDienste Facebook 04 SI
Bild 4. ebshop-Login mit Facebook-Zugangsdaten

Beim Login mit den Facebook-Zugangsdaten wird für den betreffenden Webshopbesucher automatisch ein Kundenkonto angelegt. Sollte der Kunde innerhalb der nächsten 90 Tage nicht in dem betreffenden Webshop bestellen, wird das Kundenkonto automatisch wieder gelöscht.

Weitere Facebook-Funktionen

Mit plentymarkets hast du auch die Möglichkeit, z.B. die Facebook-Kommentarfunktion in deinem Webshop einzurichten.

4. Facebook-Kommentarfunktion einrichten

Um die Kommentarfunktion einzurichten, fügst du Codes in das Template ItemViewSingleItem deines Webshops ein. Diese Codes steuern die Verlinkung des Artikelbilds sowie die Verlinkung zu Facebook. Bild 5 zeigt ein Beispiel für die Kommentarfunktion. Gehe wie unten beschrieben vor, um die Facebook-Kommentarfunktion in plentymarkets einzurichten.

Facebook 01
Bild 5. Facebook-Kommentarfunktion auf einer Artikelseite

4.1. Facebook-ID hinterlegen

Damit die Kommentarfunktion mit deinem Facebook-Account verknüpft und dort angezeigt wird, benötigt das System deine Facebook-ID. Die Facebook-ID findest du in deinem Facebook-Profil.

Facebook-ID hinterlegen:

  1. Öffne das Menü CMS » Webdesign » Layout » Ordner: PageDesign.

  2. Öffne das Template PageDesignContent.

  3. Klicke auf das Tab PageDesignContentHtmlStructure.

  4. Füge den folgenden Code in das Tab ein:
    <meta property="fb:admins" content="Facebook-ID">.

  5. Ersetze Facebook-ID durch deine eigene Facebook-ID.

4.2. Optional: Facebook-App-ID hinterlegen

Du kannst zusätzlich zu deiner Facebook-ID auch deine Facebook-App-ID hinterlegen. Wenn deine Seite viele Kommentarfelder enthält, empfiehlt Facebook, eine App-ID als Administrator zu hinterlegen. Dies schaltet eine Moderationsschnittstelle auf Facebook frei, die es erlaubt, alle Kommentare sämtlicher Plugins durch deine App-ID zu verwalten. Alle Admins dieser App können dann die Kommentare moderieren. Registrier deine Website bei Facebook, um eine App-ID zu erhalten. Eine gute Anleitung dazu findest du z.B. hier.

Der Code für die Integration deiner Facebook-App-ID lautet <meta property="fb:app_id" content="*APP-ID">*. Füge den Code wie oben für die Facebook-ID beschrieben in das Template PageDesignContentHtmlStructure ein. Ersetze dann APP-ID durch deine eigene Facebook-App-ID.

4.3. CMS-Code generieren und einfügen

Nun benötigest du einen Code, um die Kommentarfunktion in deinem Webshop einzufügen. Den Code generierst du auf dieser Facebook-Seite. Trage die URL deines Webshops in der Zeile URL to comment on ein und klicke auf Get Code, um den Code zu generieren.

Der generierte Code wird in einem neuen Fenster angezeigt und besteht aus zwei Teilen. Der erste Teil enthält den Code für die Verknüpfung der Kommentarfunktion. Also, dem Teil zum Eingeben von Kommentaren. Der zweite Teil enthält den Code zur Darstellung abgegebener Kommentare. Gehe wie nachfolgend beschrieben vor, um die beiden Codeteile in dein Design einzufügen.

Code für Facebook-Kommentarfunktion einfügen:

  1. Öffne das Menü CMS » Webdesign » Layout » Ordner: ItemView.

  2. Öffne das Template ItemViewSingleItem.

  3. Füge Teil 1 des Facebook-Codes am Ende des Templates ein.

  4. Prüfe die Codezeile mit dem Sprachkürzel und passe ggf. die Sprache an.
    Beispiel: Wenn im Code "//connect.facebook.net/en_US/all.js#xfbml=1" steht und die Sprache Deutsch sein soll, ersetzt du die en_US-Sprachkürzel durch de_DE.

  5. Speichere () die Einstellungen.

Der zweite Teil des Codes wird für die Platzierung der Kommentarfunktion auf der Seite verwendet. Füge den Code an der Stelle im Template ItemViewSingleItem ein, an der die Kommentare angezeigt werden sollen.

Code für die Platzierung der Facebook-Kommentare einfügen:

  1. Öffne das Menü CMS » Webdesign » Layout » Ordner: ItemView.

  2. Öffne das Template ItemViewSingleItem.

  3. Füge Teil 2 des Facebook-Codes an der Stelle des Templates ein, an der die Kommentare angezeigt werden sollen.

  4. Wenn du im Menü Einrichtung » Mandant » Mandant wählen » SEO » URL-Aufbau » Sonstige für die Option Verlinkung innerhalb der Webseite die Einstellung Relative Links gewählt hast, ersetze den Codeteil data-href="IHRE_DOMAIN" durch data-href="$BaseURL4Links$CanonicalUrl.

  5. Speichere () die Einstellungen.

Canonical-Tags

Platziere auf der Seite kein eigenes Canonical-Tag (z.B. <link href="http://www.IhrWebshop.de" rel="canonical" />), da plentymarkets automatisch Canonical-Tags einfügt.

Zum Seitenanfang