Facebook Like, Share Buttons, Seiten-Plugin auf der Website

Dezember 2017 Twitter @ItDoorlu
Facebook Seite ItDoor
Facebook Konto
Twitter ItDoor
Google+ ItDoor

Facebook Like, Share Buttons, Seiten-Plugin auf der Joomla Website

Das Thema Facebook Like, Share Buttons, Seiten-Plugin auf der Joomla Website befaßt sich mit der Integration dieser Element auf Ihrer Website.

Sie geben z. B. in Google diesen Suchtext ein: Social Plugins – Facebook for Developers

Natürlich könnte man die Suche noch spezifischer gestalten, aber so bekommen Sie einen Überblick.

Im Übrigen bleibt es trotz dieses Suchtextes dabei, daß Sie nicht programmieren müssen.

Auf diese Art und Weise gelangen Sie zu dieser URL: https://developers.facebook.com/docs/plugins/ [Link].

Dort finden Sie Facebook Like, Share Buttons und das Facebook Seiten-Plugin und andere Facebook Elemente.

Wie Sie aber aus der Überschrift erkennen können, beschränkt sich dieser Fachartikel auf Facebook Like, Share Buttons und das Facebook Seiten-Plugin.

Modul für Facebook Elemente anlegen

Natürlich könnte man auch daran denken, ein fertiges Plugin zu benutzen. Aber Sie werden sehen wie einfach es ist, ein Modul für Facebook anzulegen. Wenn Sie keine Änderungen vornehmen, brauchen Sie keine Programmierkenntnisse.

Bei Global Configuration oder bei Ihrem User den Editor „CodeMirror „ auswählen

Hier die beiden möglichen Stellen in Joomla etwas genauer:

Global-Configuration Registerkarte  Site (Site Settings) Feld „Default Editor”

oder

Oben im Menü: Users-Manage Registerkarte „Basic Settings“

Joomla CodeMirror Editor auswählen für Einbindung der Facebook Elemente
Joomla CodeMirror Editor auswählen für Einbindung der Facebook Elemente

Hier wählen Sie also für die Einbindung der Facebook Elemente in Ihre Joomla Webpage CodeMirror (vorübergehend) als Standard Editor aus.

Modul für Facebook Elemente anlegen

Sie benutzen die Menüfolge „Extension-Modules“ und klicken dann auf den Button „New‘“.

Infolgedessen gelangen Sie in die Liste der Modultypen und wählen den Modultyp „Custom“ aus.

Wenn Sie sich näher für Modultypen interessieren, dann gibt es in dem Fachartikel „Joomla Modultypen – Joomla Standard mindestens 25 Modultypen“ weitere Informationen.

Zu dem Modultyp „Custom“ bietet Joomla folgenden Text an:

This module allows you to create your own Module using a WYSIWYG editor.

Wenn Sie ein Template wie „Protostar“ benutzen, bei dem Sie grundsätzlich kein Javascript einfügen können, ist das leider erforderlich. Leider deswegen, weil ich diese Umstellung nur für die Erstellung eines Moduls für umständlich halte. Daran ändert auch nichts die Tatsache, daß Sie nach der Fertigstellung des Moduls wieder dann an den beiden oben genannten Stellen auf Ihren gewohnten Editor zurückstellen können.

Was passiert, wenn Sie nicht VOR der Erstellung des Moduls für Facebook  auf den Editor „CodeMirror“ umstellen, wird weiter unten erläutert.

Joomla Modul für Facebook anlegen Modultyp Custom
Joomla Modul für Facebook anlegen Modultyp Custom

So sieht das dann aus im Modul, wenn Sie den Editor „MirrorCode“ eingeschaltet haben. Das ist eine ganz andere Sicht als z. B. beim TinyMCE-Editor  oder z. B.  beim JCE-Editor.

Modul für Like It Button

Bei der oben angegebenen Facebook URL suche ich mir das Plugin für den Button „Gefällt mir“ aus.

Facebook Auswahl des Plugins "Gefällt mir"
Facebook Auswahl des Plugins „Gefällt mir“

Anschließend haben Sie dann diese Teilsicht, wenn Sie etwas nach unten scrollen.

Facebook Auswahlmöglichkeiten für den Button "Gefällt mir"
Facebook Auswahlmöglichkeiten für den Button „Gefällt mir“

Da Sie nur den „Gefällt mir“ Button haben wollen, kein Häkchen bei „Button „Teilen hinzufügen“ und kein Häkchen bei „Gesichter von Freunden anzeigen“.

In dieser Maske geben Sie dann die URL Ihrer Website ein. Anschließend klicken Sie auf den Button „Code generieren“.

Infolgedessen werden Ihnen 2 Blöcke mit Code angeboten.

Facebook 2 Code Blöcke für den ausgewählten "Gefällt mir" Button
Facebook 2 Code Blöcke für den ausgewählten „Gefällt mir“ Button

In 2 Schritten kopieren Sie diese beiden Blöcke mit Code (Strg+C, Strg+V) in Ihr Modul.

Anschließend suchen Sie sich noch eine Position aus für Ihr Modul aus. Damit entscheiden Sie vereinfacht ausgedrückt, ob Ihr Modul oben, unten, rechts oder links auf Ihrer Website erscheint.

Wenn Sie weiteres über Modulpositionen wissen möchten, dann können Sie in dem Fachartikel „Joomla Modulpositionen – ihre Bedeutung“ nachlesen.

Wenn Sie alle Einstellungen bei Ihrem Modul vorgenommen haben, speichern Sie das neue Modul ab.

  • Das Modul muß mit eingeschalten MirrorCode Editor abgespeichert werden.
  • Wenn Sie dann anschließend z. B. zu TinyMCE-Editor oder z. B. zu dem JCE-Editor zurückkehren, weil CodeMirror nicht Ihr Standardeditor ist, dürfen Sie das „Modul for Facebook“ nicht noch mal abspeichern. Denn dadurch schrumpft der Code und somit funktioniert der „Gefällt mir“ Button nicht mehr.

„Gefällt mir“ Button auf der Joomla Website

So kann das dann aussehen.

"Gefällt mir" Button mit Text auf der Joonla Website
„Gefällt mir“ Button mit Text auf der Joonla Website

Auf welchen Seiten der „Gefällt mir“ Button von Facebook auf der Website erscheinen soll.

Wenn Sie den Ort des Moduls auf den Seiten Ihrer Website über die Auswahl einer Position festgelegt haben, können Sie bei dem „Modul for Like it“ auf der Registerkarte „Menü Assignment“ entscheiden, auf welchen Seiten Ihr Modul erscheinen soll.

Joomla Seitenauswahl für das Modul for Like It
Joomla Seitenauswahl für das Modul for Like It

Die Voreinstellung war hier „On all pages“.

Modul für Seiten Plugin von Facebook

Es läßt sich auf diese Art und Weise natürlich von Facebook noch mehr einbauen, also  nicht nur den „Gefällt mir Button“. So z. B. das Seiten-Plugin von Facebook.

Sie geben z. B. in Google (wieder) diesen Suchtext ein: Social Plugins – Facebook for Developers.

Natürlich könnte man die Suche noch spezifischer gestalten, aber so bekommen Sie einen Überblick.

Im Übrigen bleibt es trotz dieses Suchtextes dabei, daß Sie nicht programmieren müssen.

Auf diese Art und Weise gelangen Sie zu dieser URL: https://developers.facebook.com/docs/plugins/.

Dort wählen Sie dann Seiten-Plugin aus.

Facebook Auswahl des Seiten Plugins
Facebook Auswahl des Seiten Plugins

Anschließend haben Sie dann diese Teilsicht, wenn Sie etwas nach unten scrollen.

Einstellungsmöglichkeiten für das Seiten-Plugin von Facebook
Einstellungsmöglichkeiten für das Seiten-Plugin von Facebook

Ihre Eingaben werden dann in den gleich zu generierenden Code übernommen, der Sie dann in Ihr „Modul für Seiten-Plugin“ kopieren.

Weitere Einstellungen für das Seiten-Plugin von Facebook

Unter dem Button „Code generieren“ steht auf dieser Webpage: „Neben den oben aufgeführten Einstellungen sind auch folgende Änderungen möglich“.

Weitere Einstellungen für das Seiten-Plugin von Facebook
Weitere Einstellungen für das Seiten-Plugin von Facebook

Dort finden Sie so viele Einstellungsmöglichkeiten, daß die nicht alle in 1 Screenshot hineinpassen.

Auch diese Einstellungen werden in den Code integriert, der noch zu generieren ist.

Nachdem Sie auf dieser Maske alle Einstellungen vorgenommen haben, klicken Sie auf den Button „Code generieren‘“.

Infolgedessen werden Ihnen 2 Blöcke mit Code angeboten, die dann so aussehen können.

Beispiel für 2 Code Blöcke für das Seiten-Plugin von Facebook
Beispiel für 2 Code Blöcke für das Seiten-Plugin von Facebook

In 2 Schritten kopieren Sie diese beiden Blöcke mit Code (Strg+C, Strg+V) in Ihr Modul für „„Modul für Seiten-Plugin“.

Anschließend suchen Sie sich noch eine Position aus für Ihr Modul aus. Damit entscheiden Sie vereinfacht ausgedrückt, ob Ihr Modul oben, unten, rechts oder links auf Ihrer Website erscheint.

Wenn Sie weiteres über Modulpositionen wissen möchten, dann können Sie in dem Fachartikel „Joomla Modulpositionen – ihre Bedeutung“ nachlesen.

Wenn Sie alle Einstellungen bei Ihrem Modul vorgenommen haben, speichern Sie das neue Modul ab.

 

  • Das Modul muß mit eingeschalten MirrorCode Editor abgespeichert werden.
  • Wenn Sie dann anschließend z. B. zu TinyMCE-Editor oder z. B. zu dem JCE-Editor zurückkehren, weil CodeMirror nicht Ihr Standardeditor ist, dürfen Sie das „Modul for Facebook“ nicht noch mal abspeichern. Denn dadurch schrumpft der Code und somit funktioniert der „Gefällt mir“ Button nicht mehr.

Facebook Seiten-Plugin auf der Joomla Website

Wenn alles gut geklappt hat, dann kann das auf Ihrer Joomla Webpage so aussehen.

Facebook Seiten-Plugin auf Website
Facebook Seiten-Plugin auf Website

Dort würde man dann Ihre Beiträge finden.

Möchten Sie, daß Ihre Beiträge hier nicht zu sehen sind, dann müßten Sie aus dem Code im Modul

<< data-tabs=“timeline“>> löschen.

<< data-tabs=“timeline“>> löschen.

Führen Sie diese Löschung durch, dann kann das auf Ihrer Joomla Website z. B. so aussehen.

Facebook Seiten-Plugin ohne Ihre Beiträge
Facebook Seiten-Plugin ohne Ihre Beiträge

Die Darstellung des Moduls ist also verkürzt. Die sonstigen  Abweichungen berufen darauf, daß ich das Modul an einem anderen Tag eingebaut habe, als das Modul bei dem Sie die Beiträge sehen.

Auf welchen Seiten das Seiten-Plugin von Facebook auf der Website erscheinen soll.

Wenn Sie den Ort des Moduls auf den Seiten Ihrer Website über die Auswahl einer Position fesgelegt haben, können Sie bei dem Modul auf der Registerkarte „Menü Assignment“ entscheiden, auf welchen Seiten Ihr Modul erscheinen soll.

Joomla Seitenauswahl für das Modul für Seiten-Plugin
Joomla Seitenauswahl für das Modul für Seiten-Plugin

Die Voreinstellung war hier „On all pages“.

Nur den „Like“  Button und den „Share „Button“ auf der Joomla Website

Das bedeutet, daß beide Buttons auf Website ohne Text erscheinen sollen. Also z. B. der „Gefällt mir „ Button ohne den Text „Registriere Dich, um sehen zu können, was Deinen Freunden gefällt.“

Dann sind hier https://developers.facebook.com/docs/plugins/ folgende Einstellungen vorzunehmen.

Facebook Einstellungen für Like und Share ohne Text
Facebook Einstellungen für Like und Share ohne Text

Der kleine Trick besteht hier darin, bei dem Feld Layout „button“ auszuwählen, statt Standard. In dem schwarzen Rahmen sehen Sie übrigens unabhängig vom ausgewählten Layout eine Vorschau. Vorschau bedeutet, daß hier an dieser Stelle gezeigt wird, wie dann das Facebook Plugin auf Ihrer Website aussieht.

Anschließend verfahren Sie wie oben erwähnt.

So könnte das dann auf der Joomla Website aussehen.

"Gefällt mir" und "Teilen " Buttons ohne Text auf der Website
„Gefällt mir“ und „Teilen “ Buttons ohne Text auf der Website

Wie Sie sehen, ist dann die Darstellung auf der Joomla Website, wie in der Vorschau der Facebook Webpage.

Wenn Sie den Editor  MirrorCode nicht verwenden

Speichern Sie das Modul mit einem anderen Editor als MirrorCode ab, dann übernimmt Joomla beim Abspeichern nicht den vollen Code der beiden Textblöcke. Der Code wird dann deutlich reduziert. Im Fall von ItDoor blieb das als Code nach dem Abspeichern des Moduls übrig.

<div id=“fb-root“>&nbsp;</div>

<div class=“fb-page“ data-href=“http://itdoor-in-joomla.lu/“ data-tabs=“timeline“ data-small-header=“true“ data-adapt-container-width=“true“ data-hide-cover=“false“ data-show-facepile=“false“>&nbsp;</div>

Module für Facebook ohne Editor CodeMirror
Module für Facebook ohne Editor CodeMirror
  • Dieses CodeMirror Problem haben Sie dann nicht, wenn Sie ein Template verwenden, daß den Einbau von Javascript zuläßt. Am besten sogar mit einer Stelle für „Privat JS“. Denn sonst laufen Sie Gefahr, daß der Code bei irgendeinem Update überschrieben wird. Was Ihr Template anbietet, sehen Sie in der Regel bei den Einstellungen (Settings) des Templates.

Das war es zum Thema Facebook Like, Share Buttons, Seiten-Plugin auf der Website.

Ob ein angelegtes Modul sofort den Status „Published“ hat, hängt übrigens vom Template ab. Eine Einstellung z. B. bei Global Configuration bei der man festlegen, welchen Status ein neu angelegtes Modul erhalten soll, ist mir nicht bekannt.

verwandte Fachartikel

Joomla Artikel in Facebook mit AutoTweet NG hochladen

Joomla RSS Feed erstellen – einen Newsfeed anbieten

 

Liste Fachartikel zum Thema Joomla von ItDoor

IT Wörterbücher von ItDoor

zu den Fachartikeln zum Thema Word von ItDoor für eilige Leser

zur Startseite von ItDoor

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.