Interessant, wie weit Facebook sich schon ausgebreitet hat. Immerhin kann man durch viele Soziale Plugins von Facebook das Portal in die eigene Webseite oder das eigene Blog einbinden – Genial wenn viele Besucher auch auf Facebook sind ;). Vor allem der “Like Button” ist sehr beliebt und wird von vielen Webseitenbetreibern eingebunden. Richtig persönlich wird es dann, wenn das zeigen der schon vorhandenen Fans aktiviert ist. Ist man bei Facebook angemeldet und besucht eine externe Webseite, erscheinen dort dann sofort die passenden Bilder der eigenen Freunde, welche Fan der Webseite sind. Einfach aber effizient: Denn wer schaut nicht gerne, welche Freunde und Bekannte auch schon mal das Blog oder die Webseite besucht haben? 😀

Was mich persönlich jedoch immer dran gehindert hat das Plugin auch auf IT-Runde.de zu installieren war die Tatsache, dass das Layout der Box gar nicht ins Design passte (Das Standard-Blau beißt sich ja eher mit der grünen Navigation :D). Doch nun habe ich eine Lösung gefunden, und das Ergebnis könnt ihr in der rechten Navigation bewundern:

Von einer tristen blauen Standard-Facebook-Box zu einer individuell mit CSS gestalteten und ans Design angepassten Darstellung, gefunden bei Jeriko. Das alles hört sich vielleicht schwer an, ist es aber gar nicht. Mit zwei Hauptcodes, könnt auch ihr in eure Sidebar als Widget die individuelle Fanbox integrieren. Dazu müsst ihr als erstes unter WordPress ganz einfach ein neues Text-Box Widget anlegen. In dieses fügt ihr dann folgenden Code ein:

Widget Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'DEINE ID', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
<fb:fan profile_id="DEINE ID" connections="ANZAHL BILDER" stream="0" width="215" height="200" logobar="0" css="DEIN PFAD/facebook_widget.css?3">
</fb:fan>

Ihr müsst den Code natürlich an eure Verhältnisse anpassen, die Hauptvariablen die auf jeden Fall geändert werden sollen sind:

• DEINE ID: Hier muss die Fanseiten- oder auch Gruppen-ID eingefügt werden. Diese sieht man beim aufrufen der Gruppe in der Adresszeile. Bei der IT-Runde Gruppe z.B. “123552934322401“
• DEIN PFAD: Hier kommt der Pfad zum Ordner rein, wo die CSS Datei liegt. Zum Inhalt der .css-Datei gehe ich gleich näher ein ;).
• ANZAHL BILDER: Standardmäßig werden beim Script 10 Fans mit Bild angezeigt. Wer jedoch mehr oder wie ich weniger benötigt, kann durch dieses Attribut die Anzahl der angezeigten Fans festlegen.
• en_US: Viele mögen es ja auf der eigenen Seite den original “Like” Button stehen zu haben, wer jedoch wie ich in Deutschland lieber alles übersetzt haben will, tauscht das “en_US” in Zeile 10 mit “de_DE” aus.

Das Widget ist nun schon soweit fertig, um jedoch die Anpassungen auch individuell definieren zu können, brauchen wir noch die oben schon erwähnte .css-Datei. Diese habe ich als Beispiel nun mal “facebook_widget.css” genannt und mit folgendem Code gefüllt:

CSS Code:

1
2
3
4
5
6
7
8
9
10
11
12
13

.fan_box a:hover { text-decoration: none; }
.fan_box .full_widget { height: 200px; border: 0 !important; background: none !important; position: relative; }
.fan_box .connect_top { background: none !important; padding: 0 !important; }
.fan_box .profileimage, .fan_box .name_block { display: none; }
.fan_box .connect_action{ padding: 0 !important; }
.fan_box .connections{ padding: 0 !important; border: 0 !important; font: normal 12px Arial, Helvetica, sans-serif; color: #666; }
.fan_box .connections .connections_grid { padding-top: 10px !important; }
.fan_box .connections_grid .grid_item{ padding: 0 5px 10px !important; }
.fan_box .connections_grid .grid_item .name{ font: normal 11px Arial, Helvetica, sans-serif; color: #666 !important; padding-top: 1px !important; }
span.total{ color: #666666; font-weight: bold; }
.fan_box .connect_widget{ position: absolute; bottom: 0; right: 0; margin: 0 !important; }
.fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important; }
.fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important; }

Wahrscheinlich wird bei euch erstmal alles ein wenig komisch aussehen, da ich den Code an die IT-Runde Sidebar angepasst habe. Durch Änderungen in der Höhe/Breite könnt ihr aber den “Gefällt mir”-Button an eure gewünschte Stelle verschieben und alles an die eigenen Vorstellungen anpassen. Aber Vorsicht!: Facebook cached die .css Datei, Änderungen an ihr werden also nur wirksam, wenn ihr den ganzen Pfad ändert oder ihr im Widget-Code hinter dem Pfad die Zahl ändert ([..].css?3) :cool:.

So einfach ist das schon, nach ein bisschen gespiele mit der CSS Datei habt ihr die Box schnell und einfach in euer Design integriert! Seit gestern gibt es diese Box nun auch auf IT-Runde, gerne darf jeder der IT-Runde.de Gruppe beitreten um über die neusten Updates immer sofort informiert zu sein ;).

Tweet