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.
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
- 1.1 Social Button als Weblic® installieren/einbinden
- 1.2 Social Button für Facebook konfigurieren
- 1.3 Veröffentlichen von Meldungen bei Facebook aktivieren und einstellen
- 1.4 Inhalt über Facebook veröffentlichen / teilen
- 2) Listenübersicht für Facebook Teilen-Funktion
- 2.1 Facebook Teilen-Button über CSS aktivieren
- 2.2 Inhalt über Facebook veröffentlichen / teilen
- 2.1 Facebook Teilen-Button über CSS aktivieren
- 2.2 Inhalt über Facebook veröffentlichen / teilen
- 3) Allgemeines
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.
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 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
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.
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
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.
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 | In diesem Feld wird die der Anwendung zugewiesene ID angezeigt. |
| Anwendungs-Geheimcode | In diesem Feld wird der der Anwendung zugewiesene Geheimcode angezeigt. |
| Seitenadresse | In diesem Feld tragen Sie die URL der Webseite ein, die Meldungen einstellen darf (z.B. http://Ihre-lizenzierte-Domain.tld/). |
| Website-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 Bitte beachten Sie, dass im Feld Facebook-Name nicht die Anwendungs-ID angegeben wird! |
| Facebook Kunden Schlüssel | ●●●●●●●●●●●●●●●●●●●●● |
| Facebook Kunden Geheimnis | ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● |
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.
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!
Weiterführende Links
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.