Vor ein paar Tagen haben wir unseren Blog bei Facebook angemeldet und anschließend auch das Widget hier im Blog eingebaut. Ergänzend zum Widget haben wir auch den Like-Button unter jedem Beitrag eingebaut.

Nach wenigen Tagen flog das Widget bereits wieder raus, da es den Blog erheblich verlangsamte und so den Content vom Laden abhielt.

Mittlerweile ist beides wieder eingebaut – mit der ansyncronen Lademethode und mit einem CSS welches zum Blog passt, wie das geht will ich kurz erläutern.

Facebook Fan Widget

Zuerst bei Facebook eine Applikation anmelden (Wichtig: nicht das / hinter der URL vergessen!) und anschließend folgenden Code in ein neues Text-Widget in die Sidebar einpflegen.

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '000000000000000',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
  };

  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/de_DE/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Unter appId die Nullen ersetzen mit der ID welche ihr bei der Facebook App Anmeldung bekommen habt.

Anschließend kommt noch in das Text-Widget das Fan Widget so wie ihr es wollt.

<fb:fan profile_id="116045195124246" stream="0" width="200px" connections="6"
logobar="0" css="http://URL/wp-content/themes/THEMENAME/fb.css?10"></fb:fan>

- profile_id hier noch mit der ID eurer Fan-Seite ersetzen (in der URL zu finden).
– stream auf 0 (keine Neuigkeiten) oder auf 1 (mit Neuigkeiten) setzen
– connections Die Zahl gibt an wieviele Fans im Widget angezeigt werden sollen
– logobar 0 ohne Facebooklogo oder  1 mit Facebooklogo
– css Angabe der css-Datei welche ihr für das Widget verwenden wollt

Wie die CSS Datei aussehen soll und wo diese hingehört könnt ihr im Blog von admartinator.de finden. Danke an dieser Stelle.

Ich habe hier die Höhe im CSS nicht definiert da ich sonst Darstellungsprobleme mit der Sidebar gehabt hätte.

Facebook Like Button

Um auch den Facebook Button asyncron einzubauen und unter jedem Beitrag anzeigen zu lassen, ist es wieder nötig das Script von oben in die Datei single.php des aktuellen Themes einzupflegen. Genauer gesagt an die Stelle unter dieser Zeile.

<?php the_content('<p>Weiterlesen &raquo;</p>'); ?>

Gleich dahinter folgt der Code für den Like Button zum Beispiel dieser hier.

<fb:like layout="button_count" show_faces="false" width="150"
action="recommend" colorscheme="light"></fb:like>

Dabei kann man folgendes einstellen.

- layout versteht die Werte standard (Anzeige des Names in Textform) oder button_count (Anzahl wie oft der Button gedrückt wurde)
– show_faces um einzustellen ob man Gesichter anzeigen will 1 oder nicht 0
- width um die Weite anzugeben
– action versteht die Werte recommend (Empfehlen) oder like (Gefällt mir)
– colorscheme versteht die Werte light (hell) oder dark (dunkel)

Somit habt ihr die volle Facebookintegration und das auch noch ohne euren Blog aufzuhalten.

Nachfolgend will ich noch sagen, dass ich mir sehr freuen würde wenn ihr ein Fan unseres Blogs auf Facebook werdet.