Liomans Blog

42 ist die Antwort – aber wie lautet die Frage?


hovercard

Gravatar Hovercards einbinden

| 0 comments

  • Update2: Einfacher geht es in WordPress mit dem Plugin: Jetpack
  • Update: Der Minimierte Code geht noch nicht!!! Nur die ungepackte Version funktioniert!!!

Schon länger ist der Dienst Gravatar in diversen Blogs eingebaut. Sowohl bei wordpress.com als auch in vielen Privaten. Hat man also ein Bild mit einer Emailadresse verknüpft erscheint es überall wo man kommentiert (und der Dienst eingebunden ist).  Seit einiger Zeit konnte man ein Erweitertes Profil gestalten und ein klick auf das Bild neben einem Kommentar führte zu diesem. Wenn man also möchte kann man so sein Facebook-Profil – Twitterstream oder andere Konten bekannt machen und verbreiten. Nun gibt es die Möglichkeit eben jene Informationen aus dem Profil schon beim mit der Maus über das Bild gehen sich kompakt anzeigen zu lassen.

Das Ergebnis sieht man oben im Bild und eingebaut ist es in ein Theme mit wenigen Klicks.

So wird es eingebaut.

Einfach in die functions.php des Themes folgende Zeile einfügen:

Möchte man das ganze noch mehr gestalten muss man sich ein kleines Plugin schreiben. Eine genaue Anleitung dazu gibt es hier. Daher habe ich auch die oben beschriebene Anleitung.

Verbessern

In den Kommentaren hat Thomas Scholz geschrieben, dass das Skript erstens groß und zweitens mit einem WordPresstracker versehen ist. Möchte man das umgehen, kann man sich das Skript herunterladen und bearbeiten. Ohne Tracker sieht es dann so aus (Wenn ich alles erwischt habe):

Want a better profile? Click here.

\

\

\

‘ + GProfile.get( ‘displayName’ ) + ‘

\\ ‘ + description + ‘ \

\

\

‘; if ( Object.size( urls ) || Object.size( services ) ) { card_class += ‘ gcard-links'; } card += ‘

Personal Links

\

    ‘; url_count = 0; for ( var u in urls ) { if ( !urls[u][‘value’] || !urls[u][‘title’] ) continue; if ( url_count > 2 ) { card += ‘

  • + ‘ + ( urls.length – url_count )  + ‘ more
  • ‘; break; } card += ‘

  • ‘ + urls[u][‘title’] + ‘
  • ‘; url_count++; } card += ‘

‘; // console.log( ‘Services to include in card:’ ); // console.log( services ); if ( Object.size( services ) ) { card_class += ‘ gcard-services'; } card += ‘

    ‘; services_out = 0; for ( var s in services ) { if ( !services[s][‘url’] ) continue; if ( services_out >= 6 ) break; card += ‘

  • ‘; services_out++; } card += ‘

‘; card += ‘

‘; // right col if ( Object.size( photos ) > 1 ) { card_class += ‘ gcard-gallery'; } card += ‘

\ Previous \

\

    ‘; for ( var p in photos ) { if ( !photos[p][‘value’] ) continue; card += ‘

  • ‘; } card += ‘

\

\ Next \

‘; // gallery card += ‘

\

\

‘; card += ‘Turn off hovercards

‘; card += ‘

\.\

X

Minimiert man das ganze noch mit einem JSMinifier wie diesem, schrumpft das ganz noch einmal deutlich ein.
Die so erhaltene Datei (Hier zum Download: Hovercard.js.gz )
Läd man z.B. in MEINBLOG/wp-includes/js und trägt folgendes in die funtions.php des Themes ein:

flattr this!

Diesen Artikel weiterempfehlen:



Leave a Reply

Required fields are marked *.


This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg