Facebook, Google+, Twitter, Pinterest & Co ohne Social Media funktioniert mittlerweile nichts mehr. Damit die Besucher Eurer Seite auch nach Herzenslust tweeten, liken und sharen können, stelle ich Euch die besten Social Media Plugins für WordPress vor und erkläre Euch alternativ, wie die Einbindung ohne Plugin funktioniert.
Den Anfang macht…
Inhaltsverzeichnis:
- Wohin mit der Like-Box?
- Zuviel Arbeit?
- Twitter – was ist das?
- Gezwitscher in WordPress
- 1,2,3 …und installiert
- Einstellungen festlegen
- So sieht es aus!
- GooglePlus FollowMe
- Kd Google plus Badge
- SN Google Plus
- Wozu Pinterest?
- Viel Auswahl
- Pin-it Button
- Pinning as you want it!
- Plugins in WordPress installieren
- Pinterest „Follow“ Button
- Pretty Pinterest Pins
- Apps und Pinterest – Das geht auch!
- Eure Artikel als E-Book
- Send to Kindle Button erstellen
- …noch mehr Angaben
- Button in WordPress einbinden
- Fertig!
- WordPress Plugin
- Einstellungen des Plugins
Für das manuelle Einbinden benötigt Ihr einen Like-Box-Code den Ihr bei den Facebook Developer Tools erstellen könnt.
Facebook Developer Tools – Page Plugin
- Facebook Page URL: Tragt hier Eure Facebook URL ein (z.B. https://www.facebook.com/username).
- Width, Height: Hier legt Ihr die Breite und Höhe der Like-Box fest.
- Adapt to plugin container width: Das Plugin wird sich automatisch an die größe Eurer Website anpassen
- Show Friend´s Faces: Setzt Ihr den Haken, werden die Profilbilder von Personen die Euch gelikt haben angezeigt.
- Use Small Header: Der Header wird verkleinert
- Hide Cover Photo: Setzt Ihr den Haken, wird das Hintergrundbild nicht mehr angezeigt.
- Show Page Posts: Hier kann ausgewählt werden ob eine Umrandung gesetzt werden soll oder nicht.
Nachdem Ihr eingestellt habt, wie die Like-Box angezeigt werden soll, braucht Ihr nur „Get Code“ auswählen.
In dem Like-Box-Code-Fenster, kopiert Ihr zuerst den oberen Javascriptcode in die Zwischenablage (Strg +C).
Meldet Euch jetzt im Backend von WordPress an und wählt im Dashboard-Menü auf der linken Seite „Design -> Editor“. Dort sucht Ihr die header.php des von Euch verwendeten Themes. Kopiert nun Javascriptcode aus der Zwischenablage direkt hinter den <body>-Tag (siehe unteres Bild). Den ersten Schritt habt Ihr damit geschafft.
Jetzt wieder zurück zum Like-Box-Code-Fenster und kopiert euch diesmal den unteren Programmiercode in die Zwischenablage (Strg +C).
Tipp:
Den Like-Box-Code könnt Ihr natürlich auch in einer selbst programmierten Seite, an der Stelle, einfügen wo die Box erscheinen soll.
Wohin mit der Like-Box?
Meldet euch im Administrationsbreich von WordPress an und wählt „Design -> Widgets“ aus. Zieht dort das Widget „Text“ in den rechten Bereich an die Stelle an der die Like-Box immer in der Sidebar Eurer WordPress-Seite angezeigt werden soll und fügt den Like-Box Code aus der Zwischenablage ein (Strg+V).
Nur noch speichern und Ihr seid fertig. Das Ergebnis der Bemühungen seht Ihr im unteren Bild.
Wichtig: Das bereitgestellte Script sendet auch Daten an Facebook zurück, wenn Euer Websitebesucher es nicht benutzt. Darum solltet Ihr Eure Datenschutzerklärung mit einem entsprechenden Hinweis ergänzt werden, um rechtlich abgesichert zu sein.
Zuviel Arbeit?
Dann könnten Euch diese Plugins für WordPress interessieren.
Offizielles Facebook-Plugin: http://wordpress.org/plugins/facebook/
- Optimiert Inhalte für das Sharing.
- Like, Send, Follow Buttons.
- Like Box, Comments Box, Empfehlungen Box.
- Und viele weitere Einstellungsmöglichkeiten.
Social Facebook All In One: http://wordpress.org/plugins/social-facebook-all-in-one/
- Like Box
- Activity Feed
- Empfehlungen Box
- Facebook Registrierung
Ihr wollt in Eurem WordPress Blog auch „zwitschern“, nachdem Ihr diesen bereits mit Facebook verbunden habt? Kein Problem, dass einbinden von Twitter ist genauso einfach.
Twitter – was ist das?
Über Twitter könnt Ihr Textnachrichten mit maximal 140 Zeichen eintragen. Die Nachrichten werden unter anderem den Personen (Follower) angezeigt die euch folgen, können aber auch aufgerufen werden ohne selbst bei Twitter angemeldet zu sein. Diese „Tweets“ werden in den meisten Fällen genutzt, um seine eigene Meinung zu bestimmten Themen oder einfach etwas aus seinem Leben mitzuteilen. Mitunter entstehen durch Tweets regelrechte Diskussionen. Twitter ist also im Prinzip ein Blog im Mini-Format.
Seid Ihr noch nicht bei Twitter angemeldet, könnt Ihr das auf der Website von Twitter nachholen.
Gezwitscher in WordPress
Das Einbinden von Twitter lässt sich am einfachsten über ein Plugin durchführen. Ich habe für den Artikel Simple Twitter Tweets ausgesucht. Im Plugin habt Ihr die Möglichkeit die Anzahl der angezeigten Tweets, die Erneuerungszeit, Sprache und mehr einzustellen. Da das Plugin die Twitter API mit der OAuth Authentication nutzt, werden die letzten Tweets auch angezeigt, wenn keine Verbindung möglich ist oder Twitter down sein sollte.
Zuerst heißt es, Plugin herunterladen. Finden könnt Ihr Simple Twitter Tweets hier.
Meldet Euch nach dem herunterladen in Eurem WordPress-Blog an. Im linken Menü „Plugins“ auswählen und auf „installieren“ klicken.
1,2,3 …und installiert
In der Installationsübersicht wählt Ihr „Hochladen“ und anschließend „Durchsuchen…“ aus. Sucht jetzt die heruntergeladenen Zip-Datei des Plugins auf Eurem PC und bestätigt Eure Wahl mit „Jetzt installieren“. Schon ist das WordPress-Plugin installiert.
Direkt im Anschluss wählt Ihr „Aktiviere das Plugin“ aus. Soweit, so gut. Über das linke Menü „Design -> Widgets“ könnt Ihr Twitter Eurer Seitenleiste hinzufügen, indem Ihr das Simple Twitter Tweets Widget dorthin verschiebt.
Einstellungen festlegen
Im oberen Teil der Einstellungen legt Ihr den Titel, wie viele Tweets angezeigt werden sollen und wie oft aktualisiert werden soll. Zusätzlich müsst Ihr Euren Twitternamen eintragen, damit dieser auch auf der Schaltfläche erscheint.
Im mittleren Abschnitt tragt Ihr Euren Twitter-Account Key und Token inklusive Secrets ein, damit das Plugin sich mit der Twitter-API verbinden kann. Setzt Ihr den Haken bei Exclude _@replies werden Kommentare zu Euren Tweets ausgeblendet.
Über den unteren Bereich wählt Ihr aus, wie der Twitter Button dargestellt und welche Sprache genutzt werden soll.
- Show Twitter Follow Button: Nur den Twitter Button anzeigen.
- Show Twitter Screen Name: Euren Twitternamen auf dem Button anzeigen.
- Show Twitter Followers Count: Neben dem Button wird die Anzahl Eurer Follower angezeigt.
- Language: Die Sprache könnt Ihr ändern, in dem Ihr das gewünschte Länderkürzel eintragt (de = Deutschland, en = England usw.).
So sieht es aus!
Sind die Einstellungen gespeichert, sieht es beim Aufruf Eures Blogs ähnlich dem unteren Bild aus.
Damit Eure Besucher euch auch in Google+ folgen können, darf der Button dazu nicht fehlen. Ich stelle Euch hier 3 Varianten vor, die Ihr auch gleichzeitig nutzen könnt.
GooglePlus FollowMe
Nachdem Ihr das GooglePlus FollowMe Plugin heruntergeladen und installiert habt, gelangt Ihr über „Einstellungen -> GooglePlus FollowMe“ zu den Einstellungen des Plugins.
Hier braucht Ihr nur Eure Google+ Profil URL hinterlegen und auswählen, ob der Button auf der linken oder rechten Seite platziert werden soll. Das Ergebnis seht Ihr im unteren Bild.
Kd Google plus Badge
Mit diesem Plugin könnt Ihr in der Seitenleiste Eures Blogs einen Follow-Button inklusive der Anzahl Eurer derzeitigen Follower anzeigen lassen.
Nach der Installation des Plugins, gelangt Ihr über „Design -> Widgets“ zu den Einstellungen des Plugins.
Zieht hier das Widget von „Google Plus Badge“ an die gewünschte Stelle der Hauptseitenleiste, an der es angezeigt werden soll. An den Einstellungen selbst, braucht Ihr nicht viel festlegen. Vergebt einen Titel für den Header, legt die Größe fest und Eure Google+ Profil URL.
SN Google Plus
Zu guter Letzt noch ein Plugin, bei der Ihr eine größere Auswahl an Buttons habt. Diese könnt Ihr oben, unten, links oder rechts auf Eurer Seite anzeigen lassen.
Nach der Installation des Plugins, gelangt Ihr über „Einstellungen -> SN Google Plus“ zu den Einstellungen des Plugins.
In den allgemeinen Einstellungen legt Ihr fest, welche URL bei Google+ empfohlen werden soll. Zusätzlich könnt Ihr die Größe des Buttons und die Sprache auswählen. Bei Add counter wählt Ihr aus, ob dieser angezeigt werden soll oder eben nicht.
Habt Ihr im unteren Bereich einen Button mit Slider-Funktion ausgewählt, könnt Ihr noch zusätzliche Einstellungen für diesen festlegen. Darunter z.B. Größe oder Position des Buttons.
Wozu Pinterest?
Die Idee hinter Pinterest ist der Austausch von Hobby´s und Interessen über virtuelle Pinnwände. Ihr könnt über Euren Pinterest-Account Bilder oder Videos mit einer kurzen Beschreibung anpinnen. Andere Nutzer können wiederum Eure Bilder und Videos repinnen oder kommentieren. Viele Firmen nutzen Pinterest bereits für Ihre Marketingkampagnen, warum solltet Ihr das nicht auch?
Um Eure Blog-Besucher auf Eure Pinnwand aufmerksam zu machen gibt es den Pin-it Button. Wie Ihr diesen oder das Pinterest Widget einbinden könnt, will ich Euch als Nächstes erklären.
Viel Auswahl
Bei Pinterest gibt es insgesamt 5 unterschiedliche Varianten zur Auswahl, die Ihr einbinden könnt. Um einen Pin-it Button oder ein Widget zu erstellen ruft Ihr den Widget builder von Pinterest auf.
Zuerst erkläre ich Euch, wie Ihr den Pin-it Button erstellen könnt.
Pin-it Button
Habt Ihr den Pin-it Button ausgewählt, legt Ihr als Erstes die Einstellungen für den Button fest.
- Button Type:
– One Image, zeigt ein von Euch gewähltes Bild an, dessen URL Ihr unter Image ein Stück weiter unten angeben müsst.
– Any Image, zeigt ein Zufallsbild an, welches Ihr nicht bestimmen könnt.
– Image Hover,
- Pin Count: Hier könnt Ihr wählen, ob ein Counter angezeigt werden soll, wie oft das Bild bereits gepinnt wurde. Dieser kann über dem Button angezeigt, rechts daneben oder komplett ausgeblendet werden.
- URL: Tragt hier die URL Eurer Pinterest Seite ein.
- Image: Hier wird die Bild-Url hinterlegt, wenn Ihr One Image ausgewählt habt.
- Description: Tragt hier eine Beschreibung zu dem Bild ein.
Ist alles eingetragen klickt Ihr auf „Build it!“, um den Button zu erstellen. Ihr seht dann darunter eine kleine Vorschau des Buttons (unteres Bild). Das Bild neben dem Button dient nur als Orientierung für Euch, welches Bild beim Anklicken des Buttons gepinnt wird und erscheint so nicht in Eurem Blog.
Als letzten Schritt, den angezeigten Link komplett markieren, in die Zwischenablage kopieren (Strg + C) und in Eurem Blog wieder einfügen (Strg + V).
Pinning as you want it!
Nun kommen wir endlich zum Einbinden in Euren WordPress Blog. Ihr könnt den Button entweder direkt in einen Artikel einfügen oder in der Seitenleiste anzeigen lassen. Fangen wir mal mit dem „pinnen“ Eurer Artikel an.
Öffnet über das WordPress Dashboard den Beitrag, in dem z.B. der Pin-it Button erscheinen soll.
Hinweis:
Denkt daran, dass nur das Bild gepinnt wird, dass Ihr beim Erstellen des Buttons angegeben habt und nicht der Artikel selbst.
In der Bearbeitungsansicht stellt Ihr oben rechts auf „Text“ um (oberes Bild), und fügt den Link des Pin-it Buttons an der gewünschten Stelle im Artikel ein (unteres Bild).
Das Ergebnis sieht dann wie im folgenden Bild aus. Wird jetzt auf den Pin-it Button geklickt, wird das damit verlinkte Bild auf der Pinnwand des Pinterest Nutzers angezeigt.
Alternativ könnt Ihr die Buttons oder Widgets in der Seitenleiste einbinden. Beim Einfügen in die Seitenleiste Eures Blogs könnt Ihr den Pin-it Button außer acht lassen. Die Widgets oder der Follow Button machen in diesem Fall mehr Sinn.
Diese lassen sich wiederum einfacher mit einem Plugin für WordPress einbinden. Ihr könnt die Widgets auch auf der Seite von Pinterest erstellen, müsst dann aber zusätzlich den automatisch erstellten Link anpassen und die Grafik in Eure Mediathek hochladen. Aber es soll ja nicht zu kompliziert werden, daher stelle ich Euch hierfür mal 2 gute Plugins vor.
Plugins in WordPress installieren
Ladet zuerst das jeweilige Plugin herunter und installiert es in Euren WordPress Blog (Plugins -> installieren). Nachdem Ihr das Plugin aktiviert habt, findet Ihr unter „Design -> Widgets“ das Plugin. Dort zieht Ihr das Widget einfach, an die Stelle in der Seitenleiste, an welcher der Follow Button oder das Widget erscheinen soll.
Pinterest „Follow“ Button
In den Einstellungen habt Ihr die Auswahl zwischen verschiedenen Button Designs oder die Möglichkeit eine eigene Bilddatei zu verwenden. Wer will kann noch einen Titel vergeben ,der über dem Button erscheint. Über den gesetzten Haken bei „Open in a new window“, wird beim anklicken des Buttons Eure Pinterest Seite in einem neuen Fenster geöffnet.
Pretty Pinterest Pins
In den Einstellungen könnt Ihr wieder einen Titel vergeben und müsst Euren Pinterest Usernamen hinterlegen.
- Specific Board: Sollen nur Pins eines bestimmten Boards angezeigt werden, könnt Ihr hier den Namen eintragen.
- Number of Pins to Show: Hier stellt Ihr die Anzahl der Pins, die angezeigt werden sollen, ein.
- Show Caption: Hakt diese Option an, wenn auch die Bildbeschreibungen angezeigt werden sollen.
- Show „Follow Me“ Button: Setzt Ihr hier den Haken wird unter den Pins noch ein Follow Me Button angezeigt, der auf Eure Pinnwand verlinkt.
Tipp:
Weitere Pinterest Plugins für WordPress findet Ihr hier.
Apps und Pinterest – Das geht auch!
Ihr habt eine eigene App entwickelt? Dann aufgepasst! Ihr könnt den Pin-it Button auch in Eurer App einsetzen, damit die Nutzer Eurer App Inhalte daraus teilen können. Eine Anleitung, wie Ihr den Pin-it Button in Eurer App einbinden könnt, findet Ihr unter diesen Links:
- Einbinden in eine iOS App.
- Einbinden in eine Android App.
Eure Artikel als E-Book
Hierfür hat sich Amazon etwas einfallen lassen. Auf einer Seite von Amazon könnt Ihr euch einen „Send to Kindle“ Button erstellen. Wird dieser angeklickt, muss man sich kurz bei Amazon einloggen und kann danach wählen auf welches Gerät der Artikel als E-Book geschickt werden soll.
Funktioniert mit allen Kindle Geräten oder Tablets/Smartphones auf der die Kindle-App installiert ist.
Send to Kindle Button erstellen
Als Erstes erkläre ich Euch, wie der Send to Kindle Button auf der Developerseite von Amazon erstellt wird und welche Angaben für die Einbindung in WordPress angegeben werden müssen. Wenn Ihr lieber ein Plugin nutzen wollt, ist der untere Teil des Artikels für Euch gedacht.
Auf der Developerseite angekommen, habt zuerst die Möglichkeit das Aussehen des Buttons anzupassen. Neben der Auswahl, ob und welcher Text auf dem Button erscheinen soll, könnt Ihr z.B. auch Schriftart, Farbe und Größe bestimmen. Auf der rechten Seite seht Ihr dabei immer eine kleine Vorschau, wie der Button später aussieht.
- Quelle Screenshot: http://www.amazon.com/gp/sendtokindle/developers/button
Als Nächstes wird gefragt, wie in der Programmierung Eures Blogs Titel, Autor und Datum markiert sind. Für WordPress müsst Ihr Custom CSS Selectors markieren und die Angaben selbst hinterlegen. Die korrekten Angaben für WordPress könnt Ihr aus dem unteren Bild übernehmen.
- Quelle Screenshot: http://www.amazon.com/gp/sendtokindle/developers/button
…noch mehr Angaben
Weiter geht es mit der Frage, wie der eigentliche Inhalt Eures Blogs in der Programmierung markiert ist. Also wählt Ihr wieder Custom CSS Selectors und übernehmt die Daten erneut aus dem unteren Bild.
- Quelle Screenshot: http://www.amazon.com/gp/sendtokindle/developers/button
Da wir ja nur unseren Bloglesern die Möglichkeit geben wollen die Artikel als E-Book zu lesen und nicht vorhaben wöchentlich E-Books im Amazon Shop zu verkaufen, markiert Ihr einfach „No“ bei der nächsten Auswahl.
- Quelle Screenshot: http://www.amazon.com/gp/sendtokindle/developers/button
Damit habt Ihr auch für´s erste alles erledigt und könnt auf „Generate widget code“ klicken. Zum einbinden in WordPress lasst Ihr jetzt entweder die Seite offen, damit Ihr nicht wieder von Vorne anfangen müsst oder kopiert Euch die Codezeilen in eine lokale Textdatei auf Euren PC.
- Quelle Screenshot: http://www.amazon.com/gp/sendtokindle/developers/button
Button in WordPress einbinden
Jetzt geht es an´s Eingemachte. Kopiert Euch den Codeschnipsel aus Step 1 in die Zwischenablage (Strg + C) und öffnet im Template-Editor von WordPress (oberes Bild) die Datei Kopfzeile (header.php). Fügt den Code dort direkt über der Zeile ein, in der der Body Tag geschlossen wird (unteres Bild).
Jetzt fehlt nur noch der Codeschnipsel aus Step 2. Diesen platziert Ihr in der Datei content.php, direkt unter der letzten Zeile für den Seitencontent. Die genaue Stelle könnt Ihr im unteren Bild sehen. Dadurch erscheint der Send to Kindle Button jetzt unter jedem Blogartikel den Ihr veröffentlicht habt oder demnächst veröffentlichen wollt.
Tipp für Euch:
Laut den Terms & Conditions zum Send to Kindle Button, darf die Beschriftung geändert werden. Ändert dazu einfach die Stelle im Code, die ich für Euch im unteren Bild markiert habe, in den gewünschten Text der auf dem Button zu lesen sein soll.
Fertig!
Habt Ihr alles richtig gemacht, sieht es ähnlich wie im unteren Bild aus.
WordPress Plugin
- Quelle: http://wordpress.org/plugins/send-to-kindle/
Als Alternative könnt Ihr das WordPress Plugin für den Send to Kindle Button installieren.
Das geht zwar schneller, aber ich empfehle Euch die manuelle Einbindung, schließlich zieht jedes Plugin bei WordPress PHP-Memory, welchen man sich auch für andere Plugins aufsparen kann. Solltet Ihr trotzdem lieber das Plugin nutzen wollen, erkläre ich Euch jetzt noch kurz die Einstellungen des Plugins.
Ladet das Send to Kindle Plugin für WordPress herunter und installiert dieses in WordPress. Meldet Euch dazu im Administrationsbereich von WordPress an und wählt in der linken Navigationsleiste “Plugins -> Installieren”.
Einstellungen des Plugins
Nach der Installation und Aktivierung des Plugins, findet Ihr auf der linken Seite des Dashboards einen neuen Menüpunkt „Send to Kindle“.
- Quelle: Send to Kindle Plugin für WordPress Screenshot
Über Look and Feel stellt Ihr ein, an welchen Stellen (z.B. nur in Artikeln, am Anfang oder am Ende) der Button erscheinen. Auch hier habt Ihr wieder die Möglichkeit die Schriftart usw. einzustellen. Eine kleine Vorschau wird Euch immer unten eingeblendet.
- Quelle: Send to Kindle Plugin für WordPress Screenshot
Im Menüpunkt Advanced, könnt Ihr im unteren Bereich eigenen HTML Code aktivieren. Notwendig wäre das, wenn Ihr einen eigenen Text auf dem Button anzeigen und nicht eine der beiden Standardmöglichkeiten nutzen wollt.
- Quelle: Send to Kindle Plugin für WordPress Screenshot
Solltet Ihr jetzt noch Fragen haben, stellt Sie ruhig in den Kommentaren. Vielleicht findet Ihr auch, dass unbedingt noch ein Social Media Plugin für WordPress in einem Artikel erwähnt werden sollte. Teilt mir ggf. einfach mit was Euch noch fehlt.
