Seit einigen Tagen bietet der Dienst von Automattic Gravatar eine neue Funktion an: via MouseOver erhält man Informationen zu der Person, insofern sie bei Gravatar registriert ist und sie die Zusatzinformationen hinterlegt hat, genannt Hovercard. Hier ein Beispiel im Screenshot.

hovercard

Die Hovercards lassen sich natürlich im eigenen Blog verwenden. Dazu muss lediglich ein Script des Dienstes inkludiert werden, welches allerdings jQuery als Voraussetzung hat. Wer als im Theme jQuery nicht braucht, sollte über den Mehrwert im Verhältnis zum Ladeverhalten nachdenken. Die folgende Zeile gehört in die functions.php des Themes oder ihr erstellt ein kleines Plugin, was dies für euch tut, siehe die zweite Möglichkeit.

wp_enqueue_script( 'gprofiles', 'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), 'e', TRUE );

Das Script ist knapp 40kByte groß und braucht jQuery als Bibliothek, daher das Array mit der Verwendung jquery, welches durch die Angabe von WordPress hinzugefügt wird. Auch hier muss jeder Einzelne sein Theme prüfen, wie die Scripte benutzt bzw. inkludiert werden.

Alternativ ein kleines Plugin, welches das Script registriert und so von anderen Plugins oder Themes genutzt werden kann.

<?php
/**
 * Plugin Name: Hovercards
 * Description: Include the Hovercards from Gravatar
 * Author: Gravatar
 * Author URI: http://gravatar.com
 */

wp_register_script( 'gprofiles', 'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), 'e', TRUE );
wp_enqueue_script( 'gprofiles' );
?>

Will man die Cards formatieren, so kann man im ersten Schritt mit der Klasse gcard arbeiten. Es gibt weitere Selektoren in der Hovercard; dazu das Markup im Anschluss von dem obigen Screenshot. Es kann weitere Elemente geben, die dann aber vermutlich jeder selber heraus finden kann; via Firebug o.ä. zum Beispiel.

<div class="gcard grofile pos-right" id="profile-ba546bf447a6ae200f0e93968e7eada8" style="top: 1951.82px; left: 139.5px; opacity: 1;"> 
	<div class="grav-inner gcard-about gcard-links gcard-services gcard-gallery"> 
		<div class="grav-leftcol">
			<h4><a target="_blank" href="http://gravatar.com/username">bueltge</a></h4> 
			<p class="grav-about">Webworker by passion, works with priority in WordPress, developing Plugins, themes and solutions with a great eam on Inspyde.com. I writes in German language on my private blog bueltge.de and also on <a target="_blank" href="http://gravatar.com/username">â¦</a></p>
		</div> 						
		<div class="grav-rightcol">
			<h5 class="grav-links">Personal Links</h5>
			<ul class="grav-links">
				<li><a target="_blank" data-hmac="undefined" href="http://wpengineer.com">Weblog (en)</a></li>
				<li><a target="_blank" data-hmac="undefined" href="http://wpbasis.de">WP Basis Theme</a></li>
				<li><a target="_blank" data-hmac="undefined" href="http://inpsyde.com">Inpsyde GmbH</a></li>
			</ul>
			<ul class="grav-services">
				<li class="gcard-share-link"><a target="_blank" data-hmac="undefined" title="bueltge" class="accounts_flickr" href="http://www.flickr.com/people/bueltge/"></a></li>
				<li class="gcard-share-link"><a target="_blank" data-hmac="undefined" title="bueltge" class="accounts_linkedin" href="http://www.linkedin.com/in/bueltge"></a></li>
				<li class="gcard-share-link"><a target="_blank" data-hmac="undefined" title="@bueltge" class="accounts_twitter" href="http://twitter.com/bueltge"></a></li>
				<li class="gcard-share-link"><a target="_blank" data-hmac="undefined" title="bueltge" class="accounts_vimeo" href="http://vimeo.com/bueltge"></a></li>
				<li class="gcard-share-link"><a target="_blank" data-hmac="undefined" title="bueltge.de" class="accounts_wordpress" href="http://bueltge.de/"></a></li>
			</ul>
		</div>
		<div class="grav-gallery">
			<a class="grav-gallery-prev" href="" style="background-position: -13px 0pt;">Previous</a> 					
			<div class="grav-gallery-container"> 						
				<ul style="margin-left: 0px;">
					<li><a href="http://2.gravatar.com/avatar/ba546bf447a6ae200f0e93968e7eada8?size=600&axis=y"><img alt="Grav" src="http://2.gravatar.com/avatar/ba546bf447a6ae200f0e93968e7eada8?size=50&axis=y"></a></li>
					<li><a href="http://1.gravatar.com/userimage/3132111/025e33b82d12a8402785aa2fa4364ddf?size=600&axis=y"><img alt="Grav" src="http://1.gravatar.com/userimage/3132111/025e33b82d12a8402785aa2fa4364ddf?size=50&axis=y"></a></li>
				</ul> 				
			</div> 				
			<a class="grav-gallery-next" href="" style="background-position: -39px 0pt;">Next</a> 			
		</div>
		<div class="grav-cardarrow" style="height: 52.5px; right: auto; left: -7px; background-position: 0px 15px;"></div>
		<div class="grav-tag"><a target="_blank" title="Powered by Gravatar.com" href="http://gravatar.com/"> </a></div>
		<div style="clear: both;"></div>
		<p class="grav-disable"><a onclick="Gravatar.disable(); return false" href="#">Turn off hovercards</a></p>
	</div>
</div>

via Otto on WordPress