Erst muss direkt nach dem Öffnen des <body>-Tags das JavaScript SDK von Facebook eingebaut werden – es bietet eine Vielzahl clientseitiger Funktionalitäten, die für den Zugriff auf serverseitige Facebook-API-Aufrufe gebraucht werden. Das Skript kann man über einen Hook einbauen, im Thematic-Framework geht das über diese Funktion, die in die functions.php des (Child-)Themes kommt:
[php]add_action(‚thematic_before‘, ‚fb_code‘);
function fb_code() { ?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, ’script‘, ‚facebook-jssdk‘));</script>
<?php }[/php]
Dann geht es zur Facebook-ntwickler-Site, wo es Widget-Generatoren für allerlei Zwecke gibt. Wir generieren uns eine Like-Box. Die Chose ist selbsterklärend, hier geht es lang:
developers.facebook.com/docs/reference/plugins/lik…
Den erhaltenen Code übergeben wir in WordPress an ein einfachens Textwidget, das wir dor einbauen, wo wir die Like-Box sehen wollen. Ach ja: um das Widget-div von Facebook gehört ein zweites div, mit dem wir den unschönen Footer des Widgts maskieren können. Das könnte dann so aussehen:
[html]<div class="facebook-kasten">
<div
class="fb-like-box"
style="margin:-3px 0 0 -1px"
data-href="www.facebook.com/hansjoachim.heist"
data-height="250"
data-width="190"
data-show-faces="true"
data-stream="false"
data-header="false">
</div>
</div>[/html]
Wir geben diesem div-Behälter die klasse .facebook-kasten mit und formatieren ihn in der Theme-CSS, etwa so:
[css].facebook-kasten {
position:relative;
left:-2px;border:1px solid #3B5998!important;
background-color:#F5F5F5;
width:180px;
max-height:220px;
margin-bottom:20px;
overflow:hidden
}[/css]