Skip to main content

Facebook

System » Mandant » Global » Dienste » Facebook

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

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 Sie noch keine Facebook-App entwickelt haben und diesbezügliche Informationen benötigen, finden Sie hilfreiche Information dazu auf developers.facebook.com/docs/appsonfacebook/tutorial/.
Deutschsprachige Anleitungen, wie Sie eine Facebook-App in Ihren Account integrieren, finden Sie in einschlägigen Tutorials und Blogs im Internet sowie in entsprechender Literatur. Es sind gewisse Kenntnisse nötig, um eine App zu realisieren, die Sie sich vorher aneignen sollten oder Sie lassen dies 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 Sie ein Gewinnspiel als App erstellen und integrieren.

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üfen Sie diese Einstellung gegebenfalls. Den Sandbox-Modus können Sie in den Grundeinstellungen unter https://developers.facebook.com/apps ausschalten.

Kommentarfunktion

Wenn Sie keine App verwenden bzw. verwenden möchten, können Sie z.B. trotzdem die Facebook-Kommentarfunktion nutzen. Beachten Sie dazu den Handbuchlink am Ende dieser Seite.

2. Facebook einrichten

Sie müssen die folgenden Schritte durchführen, um Ihre Facebook-App mit plentymarkets zu verbinden.

Facebook App-Einstellungen hinterlegen:

  1. Öffnen Sie das Menü System » Mandant » Global » Dienste » Facebook.

  2. Klicken Sie auf das Tab Facebook App-Einstellungen.

  3. Hinterlegen Sie die APP ID und die ID unter APP SECRET, die Sie zum Konfigurieren Ihrer Facebook-App verwendet haben.

DE Mandant GlobEinstell ExtDienste Facebook 01 SI

+ Bild 1: Facebook App-Einstellungen hinterlegen

Neues Facebook-Konto registrieren:

  1. Öffnen Sie das Menü System » Mandant » Global » Dienste » Facebook.

  2. Klicken Sie auf das Tab Facebook-Konten.

  3. Klicken Sie 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 Sie an Facebook weitergeleitet werden. Loggen Sie sich ggf. ein. Facebook fragt Sie nun, ob Sie den Zugriff der plentymarkets-Schnittstelle erlauben möchten. Bestätigen Sie dies.

  2. Wenn Sie nun das Menü System » Mandant » Global » Dienste » Facebook neu laden, wird die Gültigkeit Ihrer Registrierung angezeigt.

  3. Wählen Sie bei mehreren Konten ein Standard-Konto.

  4. Das Menü wurde eingerichtet. Sie können nun Ihre Apps auf der Facebook-Seite verwalten.

DE Mandant GlobEinstell ExtDienste Facebook 03 SI

+ Bild 3: Facebook-*Konto*

Löschfunktion

Sie können das Facebook-Konto wieder löschen. Wenn Sie das Konto mit dem Löschen-Icon gelöscht haben, können Sie es, wie zu Beginn dieses Kapitels beschrieben, jederzeit wieder einrichten.

3. Webshop-Login über Facebook

Wenn Sie Ihren Kunden die Möglichkeiten bieten möchten, sich mit ihren Facebook-Zugangsdaten in Ihren Webshop einzuloggen, können Sie dies wie nachfolgend beschrieben einrichten. Um die Funktion verwenden zu können, benötigen Sie eine eingerichtete Facebook-App. Zur Verlinkung zu Facebook hinterlegen Sie dann Ihre Facebook-Zugangsdaten, wie nachfolgend beschrieben.

Beachten Sie den Hinweis zu Facebook-Apps in Kapitel 1.

3.1. App-Zugangsdaten hinterlegen

Nachdem Sie bei Facebook eine App eingerichtet haben, erhalten Sie die Zugangsdaten, die Sie dann in plentymarkets hinterlegen.

Facebook-App-Einstellungen hinterlegen:

  1. Öffnen Sie das Menü System » Mandant » Global » Dienste » Facebook.

  2. Klicken Sie auf das Tab Facebook-App-Einstellungen.

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

  4. Speichern Sie die Einstellungen.

3.2. Platzhalter hinterlegen

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

  • $FacebookLoginButton

  • $FacebookLoginScript

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

Tipp

Alternativ zum Platzhalter für den Login-Button können Sie diesen auch individuell im Layout ohne den Platzhalter konfigurieren.

3.3. Login-Funktion aktivieren

Die Login-Funktion aktivieren Sie wie nachfolgend beschrieben. Sie können die Funktion bei Bedarf an dieser Stelle auch wieder inaktiv schalten.

Facebook-App-Funktion aktivieren:

  1. Öffnen Sie das Menü System » Mandant » Mandant wählen » Dienste » Social Media.

  2. Stellen Sie auf die Option Facebook Login auf aktiv.

  3. Speichern Sie die Einstellungen.

3.4. Facebook-Login im Webshop

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

DE Mandant GlobEinstell ExtDienste Facebook 04 SI

Bild 4: Webshop-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 haben Sie auch die Möglichkeit, z.B. die Facebook-Kommentarfunktion in Ihrem Webshop einzurichten.

4. Facebook-Kommentarfunktion einrichten

Um die Kommentarfunktion einzurichten fügen Sie Codes in das Template ItemViewSingleItem Ihres Webshops ein. Diese Codes steuern die Verlinkung des Artikelbilds sowie die Verlinkung zu Facebook. Bild 1 zeigt ein Beispiel für die Kommentarfunktion. Gehen Sie wie unten beschrieben vor, um die Facebook-Kommentarfunktion in plentymarkets einzurichten.

Facebook 01

Bild 1: Facebook-Kommentarfunktion auf einer Artikelseite

4.1. Facebook-ID hinterlegen

Damit die Kommentarfunktion mit Ihrem Facebook-Account verknüpft und dort angezeigt wird, benötigt das System Ihre Facebook-ID. Die Facebook-ID finden Sie in Ihrem Facebook-Profil.

Facebook-ID hinterlegen:

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

  2. Öffnen Sie das Template PageDesignContent.

  3. Klicken Sie auf das Tab PageDesignContentHtmlStructure.

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

  5. Ersetzen Sie Facebook-ID durch Ihre eigene Facebook-ID.

4.2. Optional: Facebook-App-ID hinterlegen

Sie können zusätzlich zu Ihrer Facebook-ID auch Ihre Facebook-App-ID hinterlegen. Wenn Ihre 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 Ihre App-ID zu verwalten. Alle Admins dieser App können dann die Kommentare moderieren. Registrieren Sie Ihre Website bei Facebook, um eine App-ID zu erhalten. Eine gute Anleitung dazu finden Sie z.B. hier.

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

4.3. CMS-Code generieren und einfügen

Nun benötigen Sie einen Code, um die Kommentarfunktion in Ihren Webshop einzufügen. Den Code generieren Sie auf dieser Facebook-Seite. Tragen Sie die URL Ihres Webshops in der Zeile URL to comment on ein und klicken Sie 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. Gehen Sie wie nachfolgend beschrieben vor, um die beiden Codeteile in Ihr Design einzufügen.

Code für Facebook-Kommentarfunktion einfügen:

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

  2. Öffnen Sie das Template ItemViewSingleItem.

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

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

  5. Speichern Sie die Einstellungen.

Der zweite Teil des Codes wird für die Platzierung der Kommentarfunktion auf der Seite verwendet. Fügen Sie 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. Öffnen Sie das Menü CMS » Webdesign » Layout » Ordner: ItemView.

  2. Öffnen Sie das Template ItemViewSingleItem.

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

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

  5. Speichern Sie die Einstellungen.

Canonical-Tags

Platzieren Sie 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