So richten Sie die Schnittstelle zu Facebook ein

27. Sep 2018

Artikel Ihrer Weblication® CMS Webseite veröffentlichen Sie einfach und komfortabel über die Teilen-Funktion des Social Buttons, damit diese auf Ihrem Facebook Account bzw. der Facebook Seite erscheinen.

Facebook Teilen-Funktion
Facebook Schnitttstelle (kein Support)

Mit dem Weblic® "Social Button" steht Ihnen eine einfache und komfortable Möglichkeit zur Verfügung, um Inhalte Ihrer Homepage auch über Ihren Facebook Account bzw. Ihre Facebook Webseite zu veröffentlichen.

Zusätzlich zur früheren Facebook-Schnittstelle können Sie Meldungen bei Facebook nicht nur über eine Weblication® Listen-Funktion veröffentlichen, sondern auch direkt über einen Social-Button (Teilen) von jeder Seite aus. Wenn Sie diesen Social-Button z.B. im globalen Bereich der Seite definieren (z.B. Fußbereich), kann über alle Seiten, die diesen globalen Bereich nutzen, die Teilen-Funktion aufgerufen werden.

1) Social Button für Facebook Teilen-Funktion

Um Inhaltsseiten direkt über Facebook teilen zu können, steht Ihnen der "Social Button" als Weblic® in einer BASE Projektbasis zur Verfügung.

1.1 Social Button als Weblic® installieren/einbinden

Den Social Button können Sie als Weblic® 2.x Version über das weblics.de-Portal installieren (siehe Weblic® installieren). In aktuellen BASE Classic 2.x Projekten ist dieses Weblic® bereits vorinstalliert.
Auch in Mobile First Projekten ist dies so als Weblic® verfügbar und bereits vorinstalliert.

1.2 Social Button für Facebook konfigurieren

Über die Konfiguration des Social Buttons wählen Sie "Facebook" in der Auswahlbox "Icon / Type"aus. Die Konfigurationsmaske unterscheidet sich ggf. je nach Projekt, was an dieser Stelle aber nicht von Belang ist.

Um die Seite zu teilen, in der der Social Button eingebunden ist, tragen Sie im Feld "Links zum Folgen / Teilen" die URL ein, die unterhalb des Feldes bei "Link zum Teilen" angegeben ist:

https://www.facebook.com/sharer/sharer.php?u=$url

Der Parameter $url wird automatisch beim Generieren der Seite durch die URL der aktuell aufgerufenen Seite ersetzt.

Über die Konfiguration des Elementes können Sie optional auch den Titel-Text des Buttons definieren, sowie das Layout des Buttons bestimmen.

Social Button für Facebookzoom
Social Button für Facebook
Social Button für Facebook - Link zum Teilenzoom
Social Button für Facebook - Link zum Teilen
 

1.3 Veröffentlichen von Meldungen bei Facebook aktivieren und einstellen

Öffnen Sie als Administrator über das Weblication® Panel die Projektkonfiguration (Konfiguration / Layout - Projektkonfiguration).
Im unteren Bereich finden Sie bei einem aktuellen BASE Classic Projekt die Überschrift "Social Networks", bei Mobile First Projekten direkt den Punkt Facebook.
Aktivieren Sie die Option "Meldungen bei Facebook veröffentlichbar machen".
In älteren BASE Classic Projekten erscheint zu Facebook ggf. noch ein ein Feld "Facebook Name". Dies ist lediglich dafür erforderlich, damit Sie über das Panel die hier hinterlegte Seite aufrufen können. Für die Teilen-Funktion hat diese Angabe keine Bedeutung.

Feldbezeichnung Wert

Meldungen bei Facebook veröffentlichbar machen

Ja

Facebook Name

Ihr-Facebook-Name bzw. Facebook-ID
(z.B. maxmustermann für http://facebook.com/maxmustermann)
Falls es sich um eine Seite und nicht um eine Person handelt, müssen Sie die Seiten-ID eingeben. Wenn Sie wollen, dass die Posts unter dem Namen der Seite veröffentlicht werden, müssen Sie zudem page: vor die Seiten-ID setzen. (z.B. page:157423426302509). Wichtig bei Angabe einer Seite ist, dass hinter "page:" die ID und nicht der Name angegeben ist!
Wie Sie die ID zu einer Seite bzw. einem Benutzer ausfindig machen können, finden Sie nachfolgend in der Hinweise-Box beschrieben.

Bitte beachten Sie, dass im Feld Facebook-Name nicht die Anwendungs-ID angegeben wird!

Die Angabe des Facebook Name dient lediglich zum Öffnen der entsprechenden Facebook-Seite über das Weblication® Panel!

Hinweise

  • So können Sie die ID zu einer Seite bzw. einem Benutzer ausfindig machen:
    Geben Sie im Browser einfach folgende URL ein, und ersetzen Sie USERNAME bzw. FANPAGE durch die eigenen Angaben:
    http://graph.facebook.com/USERNAME
    http://graph.facebook.com/FANPAGE
    In der Textausgabe können Sie in den ersten Zeilen die ID entnehmen.

1.4 Inhalt über Facebook veröffentlichen / teilen

Für das Veröffentlichen in Facebook reicht es aus, in der Webseite auf den Facebook-Button zu klicken. Es öffnet sich ein neues Fenster, über welches Sie sich - wenn nicht schon erfolgt - mit dem gewünschten Facebook-Login anmelden können.

Nach erfolgtem Login haben Sie nun die Möglichkeit, auf der Facebook-Sharer Seite zu entscheiden, wo die Inhalte der Seite veröffentlicht werden sollen:

  • In deiner eigenen Chronik
  • In der Chronik eines Freundes
  • In einer Gruppe
  • Auf einer von dir verwalteten Seite
  • In einer privaten Nachricht
Seite auf Facebook teilenzoom
Seite auf Facebook teilen
Facebook Sharer-Funktion mit Auswahlzoom
Facebook Sharer-Funktion mit Auswahl
 

2) Listenübersicht für Facebook Teilen-Funktion

Häufig handelt es sich bei Inhalten, die in Facebook veröffentlicht werden sollen, um aktuelle Meldungen, Veranstaltungstermine oder ähnliches.
Weblication® bietet in der aktuellen BASE Classic und aktuellen Listen-Weblic® bereits im Standard der Default-Liste die Möglichkeit, zu den aufgelisteten Dateien die Facebook Teilen-Funktion einzublenden.

BASE Classic Listeneinbindung
Mobile First Listeneinbindung

2.1 Facebook Teilen-Button über CSS aktivieren

Das Weblic® Liste liefert in aktueller Version über das Standard-Zeilentemplate (default.wFilelist.php) bereits im Standard die Möglichkeit, den Facebook Teilen-Button für eine Liste zu nutzen:

Beispiel: Auszug aus default.wFilelist.php zum Facebook Teilen-Button

...
                <xsl:if test="php:functionString('wVariables::getValue', 'facebook_news_active', '/[IHR-GLOBALES-PROJEKT]') = 'yes'">
                  <xsl:if test="wd:extension/wd:object[@type = 'news'] or /wFilelist/wData/data[@name = 'showFacebookPublisher'] = 'yes'">
                    <wsl:button path="{@path}" caption="" title="{php:functionString('wTexts::getTextUser', 'be_publish_on_facebook')}" onclick="wShowMaskShareOnFacebook('/[IHR-GLOBALES-PROJEKT]/wGlobal/scripts/php/wPublishOnFacebook.php', '{php:functionString('wVariables::getValue', 'facebook_name', '/[IHR-GLOBALES-PROJEKT]')}', '{php:functionString('wStringconverter::removeLinebreaks', php:functionString('wStringconverter::maskAposJS', php:functionString('htmlspecialchars', wd:extension/wd:meta/wd:description/text())))}', '{$wHostURL}{@path}', '{php:functionString('wStringconverter::removeLinebreaks', php:functionString('wStringconverter::maskAposJS', php:functionString('htmlspecialchars', wd:extension/wd:meta/wd:title/text())))}', '{wd:extension/wd:meta/wd:thumbnail/@src}')" icon="add_facebook" class="wglButton beButtonEditRow beButtonFacebookPublisher" hideInEditor="1"/>
                  </xsl:if>
                </xsl:if>
...

Das o.g. Beispiel geht von einem globalen Projekt mit dem Verzeichnisnamen /[IHR-GLOBALES-PROJEKT] aus, welcher bei Ihnen entsprechend Ihrer Installation lautet (z.B. /de-wGlobal). Hier erfolgt die Abfrage, ob die Facebook-Schnittstelle über die Projektkonfiguration aktiviert ist. Wenn dies der Fall ist, wird der Button dann eingeblendet, wenn es sich um eine Seite vom Objekt-Typ "news" handelt oder in der ausgewählten CSS-Only-Variante die Eigenschaft -w-show-facebookpublisher aktiviert ist.

Ist mindestens eine der Bedingungen erfüllt, steht für die entsprechende Liste in eingeloggtem Zustand bei entsprechender Berechtigung der Facebook Teilen-Button zur Auswahl. Stellen Sie dazu sicher, daß das im Listen-Zeilentemplate angegebene Skript wPublishOnFacebook.php in aktueller Version im Projekt abliegt (vergleiche auch jeweils aktuelle BASE).

2.2 Inhalt über Facebook veröffentlichen / teilen

Für das Veröffentlichen in Facebook reicht es aus, zur entsprechenden Meldung auf den Facebook-Button zu klicken. Es öffnet sich ein neues Fenster, über welches Sie sich - wenn nicht schon erfolgt - mit dem gewünschten Facebook-Login anmelden können.

Nach erfolgtem Login haben Sie nun die Möglichkeit, auf der Facebook-Sharer Seite zu entscheiden, wo die Inhalte der Seite veröffentlicht werden sollen:

  • In deiner eigenen Chronik
  • In der Chronik eines Freundes
  • In einer Gruppe
  • Auf einer von dir verwalteten Seite
  • In einer privaten Nachricht
Meldung auf Facebook teilenzoom
Meldung auf Facebook teilen
Facebook Sharer-Funktion mit Auswahlzoom
Facebook Sharer-Funktion mit Auswahl
 

2.1 Facebook Teilen-Button über CSS aktivieren

In Mobile First Projekten erfolgt das Einbinden der Facebook Teilen-Schaltfläche über Listenerweiterungen, welche - sofern im Projekt noch nicht vorhanden - über das gleichnamige Weblic® nachinstallieren können.

Den Einsatz von Listenerweiterungen finden Sie in der BMF-Hilfe beschrieben.

Beispielhaftes Einbinden der Listenerweiterung zur Anzeige eines Buttons, um auf Facebook zu teilen (z.B. innerhalb .listDefault_var0)

-w-displayElements:listEntryExtensionFacebookShare=yes,...

2.2 Inhalt über Facebook veröffentlichen / teilen

Für das Veröffentlichen in Facebook reicht es aus, zur entsprechenden Meldung auf den Facebook-Button zu klicken. Es öffnet sich ein neues Fenster, über welches Sie sich - wenn nicht schon erfolgt - mit dem gewünschten Facebook-Login anmelden können.

Nach erfolgtem Login haben Sie nun die Möglichkeit, auf der Facebook-Sharer Seite zu entscheiden, wo die Inhalte der Seite veröffentlicht werden sollen:

  • In deiner eigenen Chronik
  • In der Chronik eines Freundes
  • In einer Gruppe
  • Auf einer von dir verwalteten Seite
  • In einer privaten Nachricht

3) Allgemeines

Sofern beim Publizieren in Facebook nicht das für og:image definierte Bild verwendet wird, kann dies an einem Cache zum Open Graph Object liegen. Nutzen Sie dann den Open Graph Object Debugger von Facebook (siehe weiterführende Links unten).

Sofern in der Projektkonfiguration zu Facebook aufgrund einer älteren Umsetzung ein Facebook Schlüssel/Geheimnis hinterlegt sind, blendet die Software über die browseEdit.js die alte Facebook-Schnittstelle ein. Ansonsten wird die neue Facebook Teilen-Funktion genutzt.

Facebook Homepage
CSS-Only-Eigenschaft: -w-show-facebookpublisher
weblics.de: Social Button
Facebook: Open Graph Object Debugger

Folgende ältere Umsetzung wird nicht mehr supportet:

Folgender Artikel beschreibt die Facebook-Schnittstelle, wie diese vor Verfügbarkeit des Weblics® "Social Button" und seiner neuen Umsetzung angeboten wurde. Die Komplexität der von Facebook angebotenen API-Schnittstelle wurde mittlerweile von uns durch eine einfache und komfortablere Möglichkeit ersetzt (siehe erstes Register "Facebook Teilen-Funktion").

Mit dem Facebook-/Twitter-Publisher veröffentlichen Sie Inhalte aus Weblication® CMS in Facebook einfach per Mausklick, ohne dass Sie sich hierfür in Facebook manuell anmelden müssen. Dieses Modul wird über die Lizenz freischaltet.

Auf Grundlage des aktuellen Beispielprojektes erhalten Sie nachfolgend eine Schritt-für-Schritt Anleitung, um Ihr Projekt "facebookfähig" zu machen. Um die Facebook-Schnittstelle nutzen zu können, muss das Zend-Framework installiert sein, was Sie über 'Administration - Serverinformationen' vornehmen können.

Schritt 1: Zend Framework installieren

Installieren Sie - sofern noch nicht vorhanden - das Zend Framework über die Serverinformationen.

Schritt 2: Einloggen bei Facebook

Melden Sie sich mit Ihrem bestehenden Facebook-Accout unter https://developers.facebook.com/apps an. Sofern noch kein Account besteht, registrieren Sie sich bei Facebook.

Schritt 3: Facebook Anwendungs-Seite aufrufen und Anwendung erstellen

Rufen Sie die Seite für Anwendungen bei Facebook auf https://developers.facebook.com/apps und erstellen Sie eine neue Anwendung (Klick auf "Neue Anwendung erstellen"). Als Name vergeben Sie z.B. "Mustermann AG Meldungen".

Hinweis:
Beim ersten Aufruf müssen Sie gegegebenenfalls eine Genehmigung für den Entwicklerbereich bei Facebook bestätigen (als Entwickler registrieren).

Schritt 4: Anwendung bearbeiten

Die für die Weblication® CMS Schnittstelle wichtigen Werte können Sie über den Punkt Anwendungen zur entsprechenden Anwendung ersehen. Diese "Grundeinstellungen" sind nachfolgend beispielhaft aufgeführt. Alle weiteren Felder sind für die Schnittstelle nicht relevant.

Feldbezeichnung Wert

Anwendungs-ID
(App-ID/API-Schlüssel)

In diesem Feld wird die der Anwendung zugewiesene ID angezeigt.

Anwendungs-Geheimcode
(APP Secret)

In diesem Feld wird der der Anwendung zugewiesene Geheimcode angezeigt.

Seitenadresse
(Webseite mit Facebook-Anmeldung)

In diesem Feld tragen Sie die URL der Webseite ein, die Meldungen einstellen darf (z.B. http://Ihre-lizenzierte-Domain.tld/).
Achten Sie auf den Slash am Ende!

Website-Domain
(APP Domain)

In diesem Feld tragen Sie die Domain der Webseite ein, die Meldungen einstellen darf (z.B. Ihre-lizenzierte-Domain.tld).

Speichern Sie die Angaben durch Klick auf die Schaltfläche "Änderungen speichern".

Schritt 5: Anwendungsdetails

Nach dem Speichern der zuvor definierten Facebook Anwendung werden Sie auf die Anwendungsdetails weitergeleitet.

Hier finden Sie die Daten, die Sie in Weblication® CMS in den Grundeinstellungen / Konfiguration Ihres Projektes eintragen müssen.

Schritt 6: Veröffentlichen von Meldungen bei Facebook aktivieren und einstellen

Öffnen Sie als Administrator über das Weblication® Panel die Konfigurationseinstellungen (Grundeinstellungen - Konfigurieren).
Unter der Überschrift "Facebook" aktivieren Sie die Option Meldungen bei Facebook veröffentlichbar zu machen. Tragen die Werte in den Feldern darunter die Daten ein, die Ihnen zuvor in den Facebook Anwendungsdetails ausgegeben wurden.

Feldbezeichnung Wert

Meldungen bei Facebook veröffentlichbar machen

Ja

Facebook Name

Ihr-Facebook-Name bzw. Facebook-ID
(z.B. maxmustermann für http://facebook.com/maxmustermann)
Falls es sich um eine Seite und nicht um eine Person handelt, müssen Sie die Seiten-ID eingeben. Wenn Sie wollen, dass die Posts unter dem Namen der Seite veröffentlicht werden, müssen Sie zudem page: vor die Seiten-ID setzen. (z.B. page:157423426302509). Wichtig bei Angabe einer Seite ist, dass hinter "page:" die ID und nicht der Name angegeben ist!
Wie Sie die ID zu einer Seite bzw. einem Benutzer ausfindig machen können, ist am Artikelende beschrieben.

Bitte beachten Sie, dass im Feld Facebook-Name nicht die Anwendungs-ID angegeben wird!

Facebook Kunden Schlüssel
(APP ID)

●●●●●●●●●●●●●●●●●●●●●
(tragen Sie hier aus den Anwendungsdetails den Wert aus "API-Schlüssel" ein)
Achten Sie darauf, keine Leerzeichen, Tabs, etc. in das Feld zu kopieren, sondern lediglich den Schlüsselwert!

Facebook Kunden Geheimnis
(APP Secret)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
(tragen Sie hier aus den Anwendungsdetails den Wert aus "Anwendungs-Geheimcode ein)
Achten Sie darauf, keine Leerzeichen, Tabs, etc. in das Feld zu kopieren, sondern lediglich den Schlüsselwert!

Schritt 7: Meldungen bei Facebook einstellen

Nun können Sie Meldungen direkt aus der Listenübersicht heraus bei Facebook einstellen. Im aktuellen Beispielprojekt ist das Standard Listentemplate (default.wFilelist.php) bereits für Facebook umgesetzt. Sie erhalten beim Einsatz dieses Listentemplates als Pflegebenutzer einen Facebook-Button zu jeder Listendatei.

Facebook-Button für Meldungen in einer Weblication Listezoom
Facebook-Button für Meldungen in einer Weblication Liste

Durch Klick auf den Facebook-Button öffnet sich ein kleines Fenster, das Ihnen ein Textfeld für die Facebook-Meldung zur Verfügung stellt. Bereits voreingetragen werden die ersten Zeichen der Beschreibung aus der Dokumentenerweiterung und die URL zum Artikel. Den Text können Sie vor Veröffentlichen der Meldung anpassen.
Sofern Sie nicht die Beschreibung aus der Dokumentenerweiterung als Vorschlag für die Facebookmeldung verwenden wollen, ändern Sie dies entsprechend im Listentemplate ab. Im Vorschaufenster ist es auch möglich, ein Bild für die Vorschau zu wählen, mit der die Meldung bei Facebook veröffentlicht wird.

Durch Klick auf den Button "Auf Facebook veröffentlichen" wird die Meldung an Facebook gesendet.

Beim ersten Aufruf werden Sie dazu aufgefordert die Anwendung freizugeben. Der für diese Freigabe verwendete Facebook-Benutzer muss Administrator der hinterlegten Facebook-Seite sein!

Meldung bei Facebook einstellenzoom
Meldung bei Facebook einstellen
Meldung bei Facebook einstellen (Vorschaubild einbinden)zoom
Meldung bei Facebook einstellen (Vorschaubild einbinden)
Facebook Homepage
Facebook Developers (Anwendungen)
CSS-Only-Eigenschaft: -w-show-facebookpublisher

Wichtige Hinweise

  • Bei älteren Projekten kann es vorkommen, dass im Editor die grid.js nicht eingelesen wird, was dann über die standard.wDocument.php oder includes.global.php nachgerüstet werden muss.
  • Diverse Browser-Plugins/Addons (z.B. Ghostery) können das Publizieren in Facebook ggf. unterbinden, weshalb diese für die betreffende Domain deaktiviert werden müssen!
  • So können Sie die ID zu einer Seite bzw. einem Benutzer ausfindig machen:
    Geben Sie im Browser einfach folgende URL ein, und ersetzen Sie USERNAME bzw. FANPAGE durch die eigenen Angaben:
    http://graph.facebook.com/USERNAME
    http://graph.facebook.com/FANPAGE
    In der Textausgabe können Sie in den ersten Zeilen die ID entnehmen.

Suche-Schnellauswahl

backupbannerbasebildbildergaleriecachecookiescss-onlycss-picture-renderingdebugformularframeworklistelizenzmobile firstmultinavigationnewsletterpasswortpersonalisierungresponsiveseosicherheitsprachknotensslumbenennenumzugversandvideovolltextsucheweblicwsl

Allgemeines

RSS-Feed

Systemvorausssetzungen

Online-Dokumentation + Handbuch

Empfehlungen für den Einsatz von PHP

Versionshistorie

Support

Weblication® CMS Vorgängerversionen

Letzte Änderungen Framework / Pflegetags

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG