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!

Verfasst von: Lars

Hallo, ich bin Lars, IT-Systemkaufmann und Wordpress Fan. Ich arbeite im Bereich Social Media und Webdesign. Mein liebstes Hobby sind meine Kinder, die ich über alles liebe und mit denen ich jede freie Minute nutze. Google+ » Facebook » Twitter

Tags | Facebook