Zusätzliche Funktionen für WordPress-Blogartikel einbauen (Updated)

Zusätzliche Funktionen im Blog con schwindt-pr (Sharing, Hinweis auf Mailabo, ähnliche Beiträge und Autorenkasten.

Wer mit WordPress bloggt, kennt das: Man hat ein Theme gefunden und vielleicht schon ein bisschen an dessen Layout geschraubt, aber es fehlen einfach noch ein paar Sachen. Zum Glück gibt es für alles Plugins. Manchmal sind aber auch die nicht das, was man sucht. Wer sich ein bisschen mit HTML und CSS auskennt, kann daher noch einiges rausholen. So habe ich in den vergangenen Tagen an meinem Blog gearbeitet und u.a. folgende Bereiche eingerichtet, die am Ende eines jeden Artikels angezeigt werden:

Zusätzliche Funktionen im Blog con schwindt-pr (Sharing, Hinweis auf Mailabo, ähnliche Beiträge und Autorenkasten.

1. Beiträge weitersagen mit Sharebuttons (Updated)

Für das Weitersagen meiner Blogartikel habe ich mich für die Sharing-Option von Jetpack entschieden. Dort können Sie einen individuellen Einleitungstext (Sharing-Bezeichnung) speichern und sich zwischen verschiedenen Layouts (Schaltflächenstil) für die Buttons entscheiden, die man zuvor ausgewählt hat. Die Weitersage-Option via WhatsApp, die nur mobilen Besuchern angezeigt wird, ist im Standardpaket allerdings nicht enthalten. Wie Sie diese Funktion aktivieren können, habe ich hier erklärt: WhatsApp zu Jetpack-Sharebuttons hinzufügen.

UPDATE: Inzwischen nutze ich das Plugin Shariff Wrapper (Danke für den Tipp, Johannes Mirus!) und das in einer per Hand angepassten Version:

Weitersage-Buttons aus Shariff Wrapper

Statt in den Plugin-Einstellungen auszuwählen, wo die Buttons angezeigt werden sollen, habe ich den im FAQ des Plugins unter „Can I use it in my theme?“ genannten Code an der gewünschten Stelle in die single.php eingefügt. UPDATE: Wenn Sie die Zähler in den Buttons nicht verwenden wollen (wie ich im Newsroom), müssen Sie backend=on weglassen.

Dazu habe ich einen Einleitungssatz und eine horizontale Linie davor eingefügt. In den Plugin-Einstellnugen habe ich außerdem den Abstand zum folgenden Kasten in der CSS-Zeile definiert. UPDATE 2: Nach dem Plugin-Update am 6.6.2015 habe ich die Linie und die Überschrift direkt in den Einstellungen unter Design > Überschrift über allen Shariff-Buttons via html festgelegt. (Danke an Jan-Peter Lambeck für die prompte Hilfe via Twitter!)

2. Hinweis auf Blogabo per Mail

Unter den Sharebuttons und den automatisch angezeigten Meta-Informationen zum Artikel (Kategorie, Schlagworte) wird jetzt ein Kasten angezeigt, in dem ich den Leser auf die Möglichkeit hinweise, sich neue Artikel von mir per E-Mail zuschicken zu lassen. Für diese Funktion gibt es zwar auch Plugins, aber ich habe sie manuell eingefügt. Und das geht so:

Ich habe einen einfachen div-Container in die single.php eingefügt. Diese div enthält folgenden Hinweis mit dem Link zu meiner Mailabo-Funktion, wie ich sie auch in den Widgets der Sidebar bzw. im Footer verwende:

Screenshot des Kastens mit dem Hinweis auf das Mailabo

Die div habe ich mittels einer eigenen Klasse im CSS layoutet. Das geht sicher auch noch etwas schicker, aber für den Anfang reicht es so. 😉

Damit so eine Änderung beim nächsten Themeupdate nicht wieder überschrieben wird, empfiehlt es sich, ein Child Theme anzulegen und die Änderung dort vorzunehmen.

Übrigens: Leider hat sich das Plugin post notification, das ich bis gestern für die Benachrichtigung über neue Artikel per E-Mail genutzt habe, mal wieder verselbständigt. Daher habe ich es jetzt ein für alle Mal abgeschafft und weise nun wieder auf den bereits früher verwendeten Weg via Feedburner hin.

3. Ähnliche Beiträge anzeigen

Um Besucher meiner Website für weitere Beiträge als nur den einen, über den sie auf die Website gekommen sind, zu interessieren, verwende ich das Plugin Contextual Related Posts.

Beispiel für die Anzeige ähnlicher Beiträge

Zuvor hatte ich das Jetpack-Modul Ähnliche Beiträge ausprobiert. Das erlaubt aber leider keine weiteren Einstellungen für die Auswahl der anzuzeigenden Beiträge und zeigt so auch öfter mal stark veraltete Artikel an. Mit dem neuen Plugin hingegen kann ich einen Zeitrahmen definieren, innerhalb dessen die ähnlichen Beiträge ausgesucht werden sollen. Außerdem kann ich bestimmte Artikel sogar komplett ausschließen.

Leider platziert das Plugin die ähnlichen Beiträge in meinem Theme standardmäßig nicht so, wie ich das gern hätte. Daher hab ich statt der Positionierung über die Plugin-Einstellungen (einfah alle Häkchen rausnehmen) die gewählt, die unter Manual install im FAQ auf der Plugin-Seite zu finden ist (Danke an Peter Müller für den Tipp!).

Außerdem habe ich unter Einstellungen > Ähnliche Beiträge das Original-CSS so verändert, dass es besser zu meinem Layout passt.

4. Autorenkasten anzeigen

Da mein WordPress-Theme Graphy kein eigenes Autorenfeld unter den Blogbeiträgen vorsieht, hatte ich zunächst das Plugin Fancier Author Box verwendet. Leider ließ sich das aber im Layout nicht so anpassen, wie ich es gern gehabt hätte. Deshalb bin ich auch hier auf eine manuell eingefügte Lösung in der single.php des Child-Themes ausgewichen. Wie das geht, wird hier erklärt: http://www.elmastudio.de/wordpress/wordpress-tipp-ein-autorenfeld-einfuegen.

Screenshot des Autorenfelds von Annette Schwindt

Der Text, der im Autorenfeld gezeigt wird, ist der, den Sie im Benutzerprofil Ihres WordPress-Blogs eingegeben haben. Das Foto ist Ihr Gravatar.

 

Soviel zu den aktuellen Änderungen hier in meinem Blog. Sie können sie live hier unter dem Artikel testen. 😉 Welche Helfer oder zusätzlichen Codeschnipsel verwenden Sie in Ihrer WordPress-Installation? Haben Sie Tipps für andere Leser? Ich freue mich auf Ihre Kommentare! 🙂

 

Wie Sie Tweets mit Zitaten aus Blogartikeln ermöglichen (click & tweet)

Haben Sie das auch schon mal gesehen? Manche Blogs haben in ihren Artikeln kleine Kästen oder auf sonstige Weise hervorgehobene Bereiche mit Zitaten oder Kernsätzen, die man direkt nach Twitter weitersagen kann. „Click & Tweet“ oder „Click to tweet“ steht meistens dran. Die meisten werden Plugins dafür benutzen, es gibt aber auch die Möglichkeit, so etwas manuell mit statischem Code in seine Artikel einzubauen:

→ weiterlesen

Facebook-Fanseiten weitersagbar machen (iframe-Tab plus HTML)

Mit den neuen iframe-Tabs kann man ganz bequem individuelle Inhalte in seine Fanseite einbauen, Weitersage-Möglichkeiten inklusive. Damir lässt sich auch eine erweiterte Alternative zum  seit längerem fehlerhaften „Freunden vorschlagen“-Link erstellen. Ich habe das auf meiner Fanseite mal zu Demonstrationszwecken gemacht:

 

Wie das mit den Weitersagebuttons geht, habe ich hier im Blog bereits vor einiger Zeit erklärt:
http://dewww.schwindt-pr.com/2011/01/21/weitersagen-auf-facebook-und-twitter-fuer-fanseiten-static-fbml/

…und sie auch auf meiner Website und den anderen individuellen Unterseiten meiner Fanseite erfolgreich eingesetzt.

Das iframe-Tab-Tutorial von GECKOweb und mir finden Sie unter:
http://www.scribd.com/doc/50039880/Facebook-iframe-Tabs-Tutorial oder
http://www.schwindt-pr.com/iframetabs.pdf

 

 

Buttons zum Weitersagen auf Facebook und Twitter für Fanseiten

Obwohl ich hier schon vor einiger Zeit den Code für Weitersage-Buttons veröffentlicht hatte, bekomme ich trotzdem Rückfragen zur Umsetzung der bei mir verwendeten Buttons. Daher hier der konrekte Code inklusive Layout-Anweisungen von meiner Fanseite:

Anmerkung: (ich schreibe meine Stilanweisungen soweit möglich direkt mit style in die jeweiligen Elemente, weil Facebook das schneller lädt als ein externes CSS-Stylesheet und vorausgestellte Inline-CSS von ie nicht akzeptiert wird. Man kann das aber natürlich auch ins externe CSS setzen.)

<p style=“font-size:1.2em; text-align:right;“>

<a style=“border:1px solid #BED4FF; padding: 2px 10px; background-color:#D8DFEA; font-weight:600;“ href=“http://www.facebook.com/sharer.php?u=WEITERSAGE-URL=WORUM GEHT’S?“ title=“Via Facebook weitersagen“>Teilen</a>

<a style=“border:1px solid #B0E2FF; padding: 2px 10px; background-color:#CAEBFF; font-weight:600;“ href=“http://twitter.com/home?status=TWEETEXT KURZ-URL“ title=“Via Twitter weitersagen“>Tweet</a>

</p>

Auf meiner Fanseite sieht das dann so aus:

Das Layout der Buttons können Sie per HTML beliebig ändern. Ich habe meines an mein Design angepasst und nur mit Blau und Türkis Facebook und Twitter unterschieden.

In der Anwendung sieht das dann z.B. so aus:

Teilen auf Facebook

Anmerkung: Was da als Anhang angzeigt wird, liegt übrigens nicht am Teilen-Button, sondern an der Aufbereitung des Quelltexts der verlinkten Seite.

und so:

Weitersagen auf Twitter

Den Text inkl. @mention können Sie im Code des Weitersagebuttons vorgeben.

 

Meine neuen Buttons werden inzwischen schon eifrig genutzt. 🙂

Wie man Share-Links selbst codiert

Dieser Artikel ist vor längerer Zeit in meinem inzwischen nicht mehr existierenden englischen Blog erschienen. Und da ich heute nach einem dieser Codes gefragt wurde, möchte ich hier alle nochmal online stellen:

Stellen Sie beim Verwenden der folgenden Codes sicher, dass Sie die Anführungszeichen korrekt und manuell setzen (nicht per copy&paste aus diesem Blogpost!) und ein / ans Ende der Blogpost-url setzen  (bzw. .html oder .php oder .htm am Ende der Website-URL. Wenn Sie zu einer index-Seite verlinken, verwenden Sie den kompletten Pfad wie z.B. http://www.schwindt-pr.com/index.html).

Anstelle des Namens des jeweligen Dienstes kann man natürlich auch die entsprechenden icons oder einen ausführlicheren Text einsetzen.

Hier nun also die Codes:

Twitter

<a href=“http://twitter.com/home?status=Text und http://IHREURL“ title=“Auf Twitter weitersagen“>Twitter</a>

Für Twitter sollte man die URL als einen zeitlich unbegrenzt gültigen Kurzlink (z.B. von tinyurl.com) einfügen.

Facebook

<a href=“http://www.facebook.com/share.php?u=http://IHREURL“ title=“Auf Facebook weitersagen“>Facebook</a>

Delicious

<a href=“http://del.icio.us/post?url=http://IHREURL&amp;title=Text+zu+diesem+Link“ title=“Auf  delicious bookmarken“>delicious</a>

Friendfeed

<a href=“http://friendfeed.com/?url=http://IHREURL&amp;title=Text zu Ihrem Link“ title=“Auf Friendfeed weitersagen“>Friendfeed</a>

Stumbleupon

<a href=“http://www.stumbleupon.com/submit?url=http://IHREURL“ title=“Auf Stumbleupon weitersagen“>Stumbleupon</a>

Digg

<a href=“http://digg.com/submit?url=http://IHREURL&amp;title=Text+zu+diesem+Link“ title=“Digg this“>Digg</a>

Google Bookmarks

<a href=“http://www.google.com/bookmarks/mark?op=edit&bkmk=http://IHREURL“ title=“Auf Google bookmarken“>Google</a>

Google Buzz

Siehe http://dewww.schwindt-pr.com/2010/02/13/sharebutton-fuer-google-buzz-codieren/

Myspace

<a href=“http://www.myspace.com/Modules/PostTo/Pages/?l=3&u=http://IHREURL“ title=“Auf Myspace weitersagen“>MySpace</a>

Reddit

<a href=“http://reddit.com/submit?url=http://IHREURL“ title=“Auf Reddit weitersagen“>Reddit</a>

Facebook-Fanseiten: Einbinden von CSS in FBML-Reiter

UPDATE März 2011: FBML-Reiter sind hinfällig. Das Einbinden individueller Inhalte, sollte jetzt über iframe-Tabs gelöst werden. Siehe http://dewww.schwindt-pr.com/2011/03/04/facebook-iframetabs/

*

Die selbständige Webdesignerin Alexandra Steiner aus Wien ist einer der Netzwerkpartner von schwindt-pr. Kürzlich zeigte mir Alexandra folgenden Weg zur Einbindung eines eigenen CSS in einen FBML-Reiter auf Facebook. Ich bat sie daraufhin, diesen in einem Gastbeitrag kurz zu erläutern:

Nichts ist schlimmer, als ein unüberschaubarer Quelltext. Gerne hätte ich eine einfachere Variante genutzt, doch leider lassen sich in FBML-Reitern  weder iframes noch externe Stylesheets  über JavaScript einbinden. Die im folgenden erläuterte Vorgehenseweise scheint also die einzige Möglichkeit zu sein, statische Seiten mittels CSS und HTML darzustellen.

Mit dieser Möglichkeit bleibt der CSS-Teil schlank und unübersichtliche CSS-Deklaration für jedes einzelne Element sind nicht nötig. Somit bleibt der Quelltext übersichtlich und aufgeräumt.

Um den Quelltext innerhalb des FBML-divs zu entschlacken sollte man Folgendes tun:

<style>
<!–
Element {Eigenschaft:Wert; …}
–>

</style>

Danach folgt der übliche HTML-Part.
Innerhalb von <style> … </style> kann man nun problemlos Klassen, ids und Elemente deklarieren. Im HTML-Part werden wie gehabt die Klassen oder ids aufgerufen.
Hier ein kleines Beispiel:

<div>
<h1>FBML als praktische Werbeplattform</h1>
<p>Fbml ist die neue und unkomplizierte Art sein Unternehmen noch effizienter zu präsentieren.</p>
<p><a href=“#“>Werden Sie Fan!</a></p>
</div>

<style>
<!–
div {background:url(http://www.deinewebseite.at/images/bla.gif) top center #fff;}
h1 {color: green; font-size: 25px;}
p {color: red; font-size: 14px;}
a {color: black; text-decoraiton: underline;}
–>
</style>

Der Einfachheit halber sollte man den gesamten CSS-Teil am Ende des HTML-Teil stellen. Das hat den Vorteil, dass man sich keinen Wolf scrollen muss, um die Inhalte zu bearbeiten. Erfahrungsgemäß arbeitet man öfter an den Inhalten als an der CSS.

Empfehlenswert ist es, sowohl den HTML-Part als auch den CSS-Part extern vorzubereiten, also nicht direkt in die FBML-Box reinzuschreiben. Es ist einfach gemütlicher, beide Teile in einem HTML-Editor zu erstellen. Somit vermeidet man Fehlerquellen und muss nicht unnötig rumdoktern. Zumal das FBML-Formularfeld nicht sehr nutzerfreundlich gestaltet wurde.

Erwähnt sei auch, dass komplexe CSS-Strukturen nicht umsetzbar sind. Daher sollte man auf verschachtelte divs verzichten. Hier empfehle ich ausnahmsweise Tabellenkonstrukte – in der konventionellen Webseitengestaltung würde ich diese Technik nicht anwenden. Da ja Facebook an sich schon keinen Wert auf Validität und Barrierefreiheit legt, kann man auch alle beiden Augen zudrücken. Hier geht es wirklich nur um das optische Darstellen und nicht unmittelbar um Barrierefreiheit, Validität oder gar Benutzerfreundlichkeit… Facebook hat viele Möglichkeiten unterbunden, um zu tiefes Eingreifen in den Code zu verhindern. Ob das gut oder schlecht ist, sei mal dahingestellt.

*

Static FBML-Tutorial für individuelle Fanseiten-Reiter (pdf, 910kb)
von Annette Schwindt und Alexandra Steiner

Wie man das Weitersagen Ihrer Inhalte auf Facebook effektiver machen kann

Wussten Sie, dass Sie das Weitersagen von Inhalten auf Ihrer Website oder in Ihrem Blog kann über meta-tags in ihrer Effektivität verbessern können? Die folgenden Tipps beantworten auch die Frage: „Wie bestimme ich, welches Bild mit der Linkvorschau von Facebook angezeigt wird?“

Fügen Sie folgende Zeilen im head-Bereich ihres Quelltextes hinzu:

<meta name=“title“ content=„ÜBERSCHRIFT“>
<meta name=“description“ content=„INHALTBESCHREIBUNG“>
<link rel=“image_src“ href=„BILD-URL“>

(Wenn Sie den Code hier heraus kopieren, müssen Sie in Ihrem Editor die Anführungszeichen nochmal neu setzen, da sie sonst falsch formatiert sind!)

Achten Sie darauf, dass sie innerhalb der Überschrift bzw. der Inhaltbeschreibung keine weiteren Anführungszeichen verwenden( Sie können stattdessen ‚ verwenden). Das Bild sollte vorzugsweise quadratisch oder annähernd quadratisch sein.

Update: mit Einführung des Open Graph kann das Vorschaubild auch über folgenden tag definiert werden:

<meta property=“og:image“ content=“BILD-URL“ />

Für WordPress gibt es dazu auch ein Plugin.

Haben Sie Fragen zu dieser Vorgehensweise?
Dann hinterlassen Sie mir einfach einen Kommentar.

Individuell gestaltete Reiter auf Facebook-Fanseiten dank FBML

UPDATE: FBML ist hinfällig. Individuelle Inhalte müssen jetzt mit eigener Anwendung via iframe oder mit Hilfe von Drittanwendungen wie z.B. iframeWrapper eingebunden werden.

fbml page on schwindt-pr facebook fanpage
Angepasster Reiter auf meiner Facebook-Fanseite

Dank eines Tipps von Andrea Vascellari bin ich auf die Anwendung Static FBML auf Facebook entdeckt. Fügt man diese Anwendung seiner Fanseite hinzu, kann man damit einen neuen Reiter (Tab) auf seiner Fanseite kreieren, der sich per html individuell gestalten lässt.

Bearbeiten lässt sich der Reiter über das Fanseiten-Menü unter dem Profilbild „Seite bearbeiten“. Dann runterscrollen und den Abschnitt FBML suchen:

fbml1

Über den blauen Stift am rechten oberen Ende dieses Abschnitts gelangt man zur Option „Bearbeiten“:

Über „Anwendungseinstellungen“ kann man bestimmen, ob man ein FBML_Feld oder einen eigenen Reiter zu seiner Seite hinzufügen möchte.

Beim Klick auf „Bearbeiten“ erscheint ein Formular, über das man den neuen Reiter mit einem Namen versehen kann („Titel des Feldes“).

Übrigens: Sobald man diesen Titel gespeichert hat, erscheint dieser auch im o.g. FBML-Abschnitt unter „Seite bearbeiten“. Aber das nur am Rande.

fbml

 

Zurück zum Formular: Hier kann man nun im „FBML“-Feld die gewünschten hmtl-Befehle eingeben und über „Änderungen speichern“ veröffentlichen.

Wichtig ist, dass man nur mit div und untergeordneten Elementen arbeitet (da Facebook selbst ja schon einen body, head etc. pro Seite benutzt). Skripte werden laut Anwendungsbeschreibung nicht akzeptiert.

Weitere FBML-Reiter lassen sich übrigens von einem Link unter dem genannten Formular hinzufügen. diese landen jedoch – je nach Anzahl bereits vorhandener Reiter) u.U. auf dem „Felder“-Reiter.

UPDATE: Schritt-für-Schritt-Anleitung zu diesem Thema

Wie finden Sie diese Anwendung? Und falls Sie sie schon verwenden, welche Erfahrungen haben Sie damit gemacht?