Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!
Achtung! Dieser Artikel wurde nach dem Relaunch von wpsnippets.de noch nicht überarbeitet und kann fehlerhaft in der Formatierungen sein.

Facebook „Follow Button“ für Autoren in WordPress einbinden

Es gibt diverse Blogs oder WordPress basierte Seiten, da muss es einfach keine eigene Fanpage sein, zum Beispiel der eigene kleine private Blog. Dennoch möchte man den Traffic über das soziale Netzwerk Facebook mitnehmen. Oder größere Seiten, wo jeder Autor seinen „Fans“ etwas mitteilen möchte. Über eine Fanpage wäre das natürlich auch nicht so leicht machbar. Was hilf? Der Facebook „Follow Button“ für den Autor implementieren und unter jedem Artikel anzeigen. Ich zeige euch heute wie ihr das in wenigen Minuten selbst hinbekommt, ohne Plugins zu verwenden.

Der Facebook „Follow Button“

Der „Follow Button“, früher bekannt als „Subscribe Button“ (z.dt. Abonnenten oder Abonnieren) funktioniert ähnlich wie der allseits bekannte Like Button. Aber anstelle den aktuellen Artikel zu „liken“, folgt der Nutzer nach einem Klick nun dem Autor des jeweiligen Beitrags.

1. Facebook für Abonnenten aktivieren

Bevor wir los legen, müssen wir zunächst sicher gehen, dass unser Profil so eingestellt ist, dass andere Facebook Benutzer uns abonnieren (followen) können. Hierzu müssen wir unter Facebook oben rechts auf das kleine Zahnrad klicken um zu den Einstellungen zu gelangen. Im dort erscheinenden Dropdown-Menü klicken wir nun auf Privatsphäre-Einstellung › Abonnenten und dort den Haken bei Abonnieren aktivieren anklicken. Optional könnt ihr die Einstellung auch unter https://de-de.facebook.com/about/follow aktivieren. Hier findet ihr auch noch weitere Informationen über die Funktionen.

2. Follow Button generieren

Facebook Follow Button Code GeneratorNachdem wir nun sicher gehen können, dass uns andere Benutzer folgen können, müssen wir nun den Code für den Follow Button generieren. Hierzu gehen wir unter https://developers.facebook.com/docs/reference/plugins/follow/ und haben direkt die passenden Eingabefelder vor uns.

1. Profile URL: Dieses Feld ist relativ selbst erklären. Hier tragen wir unsere Profil URL ein. In meinem Fall wäre das dann https://www.facebook.com/endgeek.

2. Layout Style: Hier könnt ihr zwischen 3 Werten auswählen. Der erste („standard“) zeigt den Follow Button und eine Reihe von Gesichtern (freunden die diesem Profil ebenfalls folgen). Die zweite Einstellung ist ein schmaler Button mit einem Counter dahinter (sieht genauso aus wie der Like Button) und die dritte Einstellung (box-count) ist ebenfalls ein Button mit einem
Counter, diesmal jedoch übereinander dargestellt. Hier alle 3 Beispiele zur Demonstration:
Facebook Follow Button: Layout Style

3. Show Faces beschreibt ob bei dem „standard“-Layout die Gesichter der Freunde erscheinen sollten oder nicht.

4. Colorsheme: Diese Einstellung braucht auch keine großartige Erklärung. Es gibt 2 unterschiedliche Farben zur Auswahl. Light: das ist der weiße Stil wie in dem obigen Screenshot und Dark: das Ganze in einem dunklerem grau.

5. Font: Hier könnt ihr die Schriftart auswählen des Buttons wählen. Zur Auswahl stehen Arial, Lucida Grande, Segeo UI, Thaoma, Trebuchet MS, Verdana.

6. : Die breite festlegen ist nur für den Layout Stil „standard“ relevant und legt die max. Breite der Box fest.

Sobald ihr all eure Einstellungen getroffen habt, klicken wir zum Abschluss noch auf Code generieren und erhalten nun die Möglichkeit zwischen HTML5, XFBML, IFRAME und der URL. Hier gibt es in dem Sinne keine wirklichen Vor- oder Nachteile. Und wir nehmen bei diesem Beispiel nun einfach mal das iFrame, da wir hierbei keine zusätzlichen Dateien/Scripte implementieren müssen und es für Anfänger die einfachste Methode ist.

Facebook Follow Button Code

Zuletzt müssen wir noch eine APP ID auswählen. Solltet ihr bisher mit eurem Account keine App erstellt haben, fällt dieser Punkt weg.

3. Follow Button implementieren

Nun geht es ans Eingemachte. Der obige Code muss nun an die entsprechende Stelle in das WordPress Theme geladen werden. Bei Twenty Twelve wäre das z.B. Beispiel in der content.php (unter Design » Editor) hinter der folgenden Zeile:

[php]<?php the_author_meta( ‚description‘ ); >[/php]

Setzt unter diese Zeile einfach ein neues

-Tag mit dem soeben generierten Code.

[html]<p> -Der kopierte Code- </p>[/html]

Und der Button erscheint unter der Beschreibung des Autoren.

Was auch ganz schick aussieht ist den Button unter Das Avatar zu setzen. Hierzu muss der Code, wie oben beschrieben, zwischen die folgenden Zeilen eingefügt werden. So haben wir es z.B. auch hier auf WPSnippets.de gelöst.

[php]<?php echo get_avatar( get_the_author_meta( ‚user_email‘ ), apply_filters( ‚twentytwelve_author_bio_avatar_size‘, 110 ) ); >

<!– .author-avatar –>[/php]

Bei mehrere Autoren gerne auch dynamisch

Wer mehrere Autoren auf seinem Blog / seiner Seite hat und somit immer einen anderen Follow Button benötigt, der kann das Ganze natürlich auch dynamisch in WordPress implementieren.

Hierzu müssen wir zunächst für die Benutzerkonten ein Zusatzfeld definieren. Dazu dient uns das folgende Snippet, welches wir in die functions.php setzen:

[php]function wps_add_extra_user_fields($user) { >
<h3>Zusätzliche Informationen</h3>
<table class="form-table">
<tr>
<th>
<label for="fb_user_name">Facebook Name</label></th>
<td>
<input type="text" name="fb_user_name" id="fb_user_name" value="<?php echo esc_attr(get_the_author_meta(‚fb_user_name‘, $user->ID)); >" class="regular-text" /><br />
<span class="beschreibung">http://www.facebook.com/<mark>wpsnippets.de</mark></span>
</td>
</tr>
</table>

<?php }

function wps_save_extra_user_fields($user_id) {
if (!current_user_can(‚edit_user‘,$user_id)) return FALSE;
update_usermeta($user_id, ‚fb_user_name‘, $_POST[‚fb_user_name‘]);
}

add_action(’show_user_profile‘, ‚wps_add_extra_user_fields‘);
add_action(‚edit_user_profile‘, ‚wps_add_extra_user_fields‘);
add_action(‚personal_options_update‘, ‚wps_save_extra_user_fields‘);
add_action(‚edit_user_profile_update‘, ‚wps_save_extra_user_fields‘);[/php]

Das Ergebnis sieht dann in etwa so aus:

WordPress Benutzerfelder erweitern

Nachdem dieser Schritt nun erledigt ist (und der Facebook-Benutzername zwischenzeitlich hinterlegt wurde) kommen wir nun, wie bereits oben, zum Bearbeiten der content.php unter Twenty Twelve (bei anderen Themes kann sich das Ganze u.A. in einer anderen Datei befinden).

Anstelle des generierten Codes von Facebook kommt nun folgendes an die von euch ausgesuchte Stelle:

[php]<?php if(get_the_author_meta(‚fb_user_name‘, $userID)!="") { ?> <p><iframe src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2F<?php echo esc_attr(get_the_author_meta(‚fb_user_name‘, $userID)); >&amp;layout=button_count&amp;show_faces=false&amp;colorscheme=light&amp;font&amp;width=100&amp;height=21&amp;appId=%%%%%DEINEAPPID%%%%%" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></p><?php } ?>[/php]

Das war’s dann auch schon. Bei Fragen oder Problemen wie immer gerne in den Kommentaren melden.

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

11 Kommentare

Avatar von Nane

Nane 9. Juli 2013 um 9:00

Hey!
Ich komme nicht weiter.
Was mache ich da genau? –>m Nun geht es ans Eingemachte. Der obige Code muss nun an die entsprechende Stelle in das WordPress Theme geladen werden. Bei Twenty Twelve wäre das z.B. Beispiel in der content.php hinter der folgenden Zeile:
Wo muss ich hin, um das einzubinden?

Liebe Grüße.

Antworten
Avatar von André Köbel

André Köbel 9. Juli 2013 um 10:37

Hallo Nane,

du findest die „content.php“ unter Design » Editor (Habe es mal im Artikel ergänzt.)

Dort suchst du nach der folgenden Stelle:
<?php the_author_meta( 'description' ); >

Erstellst darunter ein neues Tag, z.B. <p>…</p>

Und fügst dort den Code ein, den du bei Facebook kopier hast.

Hoffe ich konnte dir weiterhelfen. :)

Gruß
André

Antworten
Avatar von Nane

Nane 9. Juli 2013 um 15:25

Vielen lieben Dank.
Aber bei mir gibt es den Punkt ‚editor‘ unter ‚Design‘ nicht :(

Antworten
Avatar von André Köbel

André Köbel 9. Juli 2013 um 15:30

Welches Theme benutzt du denn?

Und was kommt wenn du an deine URL /wp-admin/theme-editor.php anhängst?

Antworten
Avatar von Nane

Nane 9. Juli 2013 um 15:35

Dann kommt das hier –>
Lost?
Our server sentries tell us you should probably not be here. Maybe you are lost?
If you are sure this is the place you are trying to go, please contact us and we will be happy to help.

Ich benutze den Theme „Comet“
Habe schon einmal gelesen, dass es evtl. am Theme liegen könnte….hm…..

Und nun?

Ich danke schon einmal für die ausdauernde Hilfe ;)

*edit*
Und ich hoste übrigens nicht selbst. Kann das daran auch liegen?

Antworten
Avatar von André Köbel

André Köbel 9. Juli 2013 um 15:46

Also wenn ich in einem Testsystem die Comet Theme (http://wp-themes.com/comet/?) installiere, erhalte ich einen Editor.

Dein Blog liegt bei wordpress.com? Dann hast du leider keinen Zugriff auf die Themefiles. Außer ein paar kleinen Einstellungen am Design, kannst du da glaube ich nicht allzuviel machen und bist sehr eingeschränkt. In dem Fall müsstest du auf das WordPress Facebook Plugin (http://wordpress.org/plugins/facebook/) zurückgreifen.

Antworten
Avatar von Nane

Nane 9. Juli 2013 um 15:47

Oh je. Dann funktioniert das leider erst mal nicht.
Vielen Dank für die Info :)

Liebe Grüße

Avatar von André Köbel

André Köbel 9. Juli 2013 um 15:49

Nichts zu danken. :) …und sorry, dass es nicht geklappt hat. :/ Aber ein selbstgehosteter WordPress Blog ist meistens die beste Lösung. :)

Avatar von Andreas Pichelmayer

Andreas Pichelmayer 30. August 2013 um 13:12

Hallo André,

ich habe folgendes Problem dabei:

Wenn ich den Button in die Seite eifüge, dann kommt folgende Fehlermeldung:
Following is not enabled for https://www.facebook.com/a.pichelmayer.

Kannst du mir bitte helfen, wie ich das ermögliche? Früher war das ganz einfach möglich.

lg, Andreas

Antworten
Avatar von André Köbel

André Köbel 30. August 2013 um 17:24

Hey Andreas,

du musst zuerst bei Facebook festlegen, dass dich andere abonnieren können. Das findest du im Artikel unter „1. Facebook für Abonnenten aktivieren“.

Gruß
André

Antworten
Avatar von Heike

Heike 1. Mai 2015 um 15:58

Hallo! Sitzen seit laaangem über einem WordPress-Blog und versuchen, die like-Buttons zu implementieren. Das funktioniert… nicht. Deine Anleitung liest sich gut bis zu dem Punkt „hier erscheint die Auswahl zwischen HTML5,…“ – die erscheint nicht. Hier nur JavaScript SDK. Was tun??? Danke für jeden sachdienlichen Hinweis…;-)) Gruß Heike

Antworten

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*