Lange Zeit habe ich darauf gewartet, dass endlich die Google+ Kommentare, die zu einem geteilten Beitrag abgegeben wurden, auch im Blog selber angezeigt werden können. Bisher sind diese immer an den Lesern vorbei gegangen, die auf andere Weise meine Beiträge gefunden haben. Für Facebook gibt es solch eine Variante schon länger, nur habe ich weniger „Freunde“ als „Kreislinge“, wodurch sich diese Variante für mich als nicht praktikabel erwiesen hat.

Seit letzter Woche kann man auf Blogger.com die Google+ Kommentare einbinden und einige findige Coder haben sich der Sache angenommen und eine Möglichkeit gefunden, dies auch auf selbst gehosteten WordPress Installationen verfügbar zu machen. Vielen Dank dafür im Namen aller Blogger.

Wie funktioniert das überhaupt?

Im Prinzip wird über ein Script, oder einen iFrame eine Box eingebunden, die sich über eine Variable (dem Permalink) den auf Google+ geteilten Beitrag holt. Dazu werden dann die selbstverfassten und von anderen Nutzern abgegebenen Kommentare angezeigt. Zusätzlich verfügt die G+ Box aber auch über eine Textbox. Wenn nun ein Kommentar verfasst wurde, passiert folgendes:

  • Verfasst ein Nutzer auf Google+ einen Kommentar, wird dieser sowohl auf Google+, als auch in der Box angezeigt.
  • Verfasst ein Nutzer einen Kommentar über das Textfeld, in der auf dem Blog eingebundenen Box, erscheint dieser auf dem Blog und wird gleichzeitig als neuer Beitrag auf Google+ durch den Verfasser geteilt. So verbreitet sich der Artikel immer weiter, weil man nicht darauf angewiesen ist, dass dieser auf Google+ geteilt werden muss.
  • Verfasst ein Nutzer einen Kommentar in dem WordPress eignen Kommentar-System (sofern man dieses parallel laufen lässt, erscheint der Kommentar nur auf derm Blog und nicht auf Google+, was ja durchaus verständlich ist, da es sich um zei verschiedene Kommentar-Systeme handelt.

Google+ Kommentare als iFrame einbinden

Dazu hat Torben Leuscher ein interessante Anleitung geschrieben, auch wenn iFrames nicht mehr der Stand der letzten Internettechnik sind.

Im Prinzip ist es recht einfach. Man bindet folgenden Code an der Stelle in seinem Theme ein, an der die Kommentare erscheinen sollen:

<iframe width="800" height="600" src="https://plusone.google.com/_/widget/render/comments?bsv&href=<?php echo urlencode(get_permalink()); ?>&first_party_property=BLOGGER&view_type=FILTERED_POSTMOD&width=750&hl=de">

Google+ Kommentare als Javascript einbinden

Die Vorgehensweise ist die gleiche, wie beim iFrame, nur dass hier die lästigen Scrollbalken wegfallen:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div id="plusonecomments"></div>
<script type="text/javascript">
  window.setTimeout(function() {
    var id = 'plusonecomments';
    var divWidth = document.getElementById(id).offsetWidth;
    var width = !!divWidth ? Math.min(divWidth, 750) : 600;
    var url = "<?php the_permalink(); ?>";
    var moderationUrl = "";
    var moderationMode = "FILTERED_POSTMOD";
    gapi.comments.render(id, {
        'href': url,
        'first_party_property': 'BLOGGER',
        'legacy_comment_moderation_url': moderationUrl,
        'view_type': moderationMode,
        'width': width
    });
  }, 10);
</script>

Google+ Kommentare als HTML5 einbinden

Wie voher, unterscheidet sich hier nur der Code voneinander. Der Ort, an dem man sie einbaut, bleibt der gleiche:

<script src="https://apis.google.com/js/plusone.js">
</script>
<div class="g-comments"
    data-href="<?php the_permalink(); ?>"
    data-width="642"
    data-first_party_property="BLOGGER"
    data-view_type="FILTERED_POSTMOD">
</div>

Quelle +Michael Schilling

Google+ Kommentare als Plugin einbinden

Das einfachste ist natürlich, einfach ein Plugin zu nutzen, um sich so Arbeiten an den Quelldateien zu sparen. Das Plugin Google PlusOne Comments ist im WordPressverzeichnis verfügbar. Zu beachten ist hier jedoch, dass dieses die WordPress Kommentare vollständig ersetzt und vorausgesetzt wird, dass eine comment.php, also ein eigenes Template für die Kommentare vorliegt. Die meisten aktuelleren WordPress Themes nutzen dieses ohnehin schon. Ansonsten hier eine Vorlage:

Diese Codezeile ersetzt den Aufruf der Kommentare in der single.php:

< ? php comments_template(); ? >

Die Leerzeichen um die „?“ bitte vorher entfernen.

Die comments.php aus dem Theme Twentytwelve sieht dann so aus:

HIER DEN CODE EINFÜGEN
<?php
/**
 * The template for displaying Comments.
 *
 * The area of the page that contains both current comments
 * and the comment form. The actual display of comments is
 * handled by a callback to twentytwelve_comment() which is
 * located in the functions.php file.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

/*
 * If the current post is protected by a password and
 * the visitor has not yet entered the password we will
 * return early without loading the comments.
 */
if ( post_password_required() )
    return;
?>

<div id="comments" class="comments-area">

	<?php // You can start editing here -- including this comment! ?>

	<?php if ( have_comments() ) : ?>
		<h2 class="comments-title">
			<?php
				printf( _n( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'twentytwelve' ),
					number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
			?>
		</h2>

		<ol class="commentlist">
			<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>
		</ol><!-- .commentlist -->

		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
		<nav id="comment-nav-below" class="navigation" role="navigation">
			<h1 class="assistive-text section-heading"><?php _e( 'Comment navigation', 'twentytwelve' ); ?></h1>
			<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentytwelve' ) ); ?></div>
			<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentytwelve' ) ); ?></div>
		</nav>
		<?php endif; // check for comment navigation ?>

		<?php
		/* If there are no comments and comments are closed, let's leave a note.
		 * But we only want the note on posts and pages that had comments in the first place.
		 */
		if ( ! comments_open() && get_comments_number() ) : ?>
		<p class="nocomments"><?php _e( 'Comments are closed.' , 'twentytwelve' ); ?></p>
		<?php endif; ?>

	<?php endif; // have_comments() ?>

	<?php comment_form(); ?>

</div><!-- #comments .comments-area -->

Ich persönlich möchte gerne beide Varianten auf meinem Blog zu Verfügung stellen, da erstens einige Beiträge bereits kommentiert wurden und die bisherigen Kommentare somit bei der Verwendung des Plugins verloren gewesen wären, zweitens möchte ich den Besuchern auch nicht zumuten, zwangsweise bei Google+ registriert zu sein. Da Kommentare auf Google+ in meinem speziellen Fall aber häufiger als Kommentare im WordPress sind, habe ich die Einbindung vor den WordPress Kommentaren vorgenommen. Das Ganze habe ich dann einfach in die comments.php vor dem Aufruf < ? php if ( have_comments() ) : ?> eingefügt.