Facebook “like” Button ohne Plugin in validem HTML in WordPress integrieren

Um einen Facebook “Like”-Button in die WordPress Installation zu integrieren braucht man nicht unbedingt ein Plugin. Mit ein wenig PHP Kenntnissen ist dies problemlos möglich.

 
 
 
1.Schritt: Eigene Facebook User-ID ermitteln

Dazu bitte bei Facebook einloggen!

• Eigene User-ID: apps.facebook.com/whatismyid

2.Schritt: App-ID ermitteln

Dazu auf folgenden Link klicken developers.facebook.com/setup/ und dort eine neue Anwendung anmelden sofern noch nicht geschehen. (Wichtig: Am Ende der eingetragenen URL muss ein Schrägstrich ( / ) angefügt werden damit es funktioniert. Nach klicken auf “erstellen” kann es ein wenig dauern – Also nicht die Gedult verlieren oder abbrechen.)

Wer bereits eine entsprechende App-ID erstellt hat kann diese hier abrufen: facebook.com/developers

3.Schritt: Meta Tags in die header.php des WordPress Themes einfügen:

USER-ID und APP-ID durch die eigenen Werte ersetzen

 
<?php if ( is_single() ) : ?>
        <meta name="fb:admins" content="USER-ID" />
        <meta name="fb:app_id" content="APP-ID" />
        <meta name="og:site_name" content="<?php bloginfo('name'); ?>" />
        <meta name="og:title" content="<?php echo get_the_title(); ?>" />
        <meta name="og:type" content="article" />
<? endif; ?>

4.Schritt: Notwendigen Java-Scripts einfügen

Den folgenden Code kopiert man inneralb des body-Tags. Am Besten in die footer.php vor </ body>
Auch hier nicht vergessen die eigene App-ID einzufügen!

<div id="fb-root"></div>
<script type="text/javascript">
/* <![CDATA[ */
        window.fbAsyncInit = function() {
                FB.init({appId: 'APP-ID', status: true, cookie: true,
                                                 xfbml: true});
        };
        (function() {
                var e = document.createElement('script'); e.async = true;
                e.src = document.location.protocol +
                        '//connect.facebook.net/de_DE/all.js';
                document.getElementById('fb-root').appendChild(e);
        }());
/* ]]> */
</script>

5.Schritt: XFBML Tags in die footer.php einfügen

Die Plazierung erfolg “nach” dem Facebook JavaScript.

<?php if (is_single()) { ?>
<script type="text/javascript">
/* <![CDATA[ */
        document.getElementById('fb-like-button').innerHTML = '<fb:like width="520" action="recommend"><\/fb:like>';
/* ]]> */
</script>
<?php } ?>

6.Schritt: DIV zur Anzeige des Like Button in die single.php einfügen

Den folgenden Code an die gewünschte Stelle in der single.php einfügen.

<div id="fb-like-button"></div>

So, das war´s auch schon!

Viel Spaß damit!