Jusqu’à présent, j’utilisais le bouton Share qui permettais de réaliser un meilleur rendu lorsqu’un lecteur partagait un article, en effet celui-ci affichait un court résumé de l’article ainsi qu’une miniature.

Chaque fois que l’on cliquait dessus, on arrivait sur une page qui nous permettait de choisir la miniature associée à l’article, et pour mon cas, bien souvent, celle par defaut ne correspondait pas souvent à l’article partagé.

Avec l’arrivée du bouton « J’aime » amélioré, on arrive plus sur cette page d’interface, la miniature est générée automatiquement, ne laissant plus aucun choix à l’utilisateur. Ceci est bien en taux de conversion, car on passe d’un partage en deux clics en un partage en seul clic.

Mais quel est donc l’impact réel si la miniature n’image en rien votre article…

Il suffit cependant d’ajouter dans la partie head de votre code une balise link pointant vers votre image source de l’article.

<link rel="image_src" href="mon-image.jpg"/>

Voici donc une modification à intégrer au fichier fonction.php de WordPress pour générer une miniature correspondante à la première image de l’article.

add_action( 'wp_head', 'fb_like_thumbnails' );
function fb_like_thumbnails()
{
global $posts;
$default = 'http://www.monblog.com/mon-image-par-defaut.png';
$content = $posts[0]->post_content;
$output = preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content,
                                      $content, $matches);
if (( $output> 0 ) & is_single())
$thumb = $matches[1][0];
else
$thumb = $default;
echo '<link rel="image_src" href="'.$thumb.'"/>';
}

Personnellement je n’utilise pas la fonction native de thumbnail d’article intégré à WordPress, mais rien ne vous empêche de l’utiliser pour l’affecter à l’image par défaut avec la fonction the_post_thumbnail();

Il faut savoir que si vous voulez tester le résultat final sans pourrir votre profil Facebook et perdre vos amis, vous pouvez tester le resultat sur la page Linker Tool

• WP : Quelques modifications pour mieux intégrer Topsy dans vos commentaires.
• DIY : Le bouton « J’aime » de Facebook en Lego contrôlé par Arduino
• Des voleurs de cartes bancaires qui utilisent la technologie pour pirater les distributeurs de billets
• Resisty : Un captcha avec le code des couleurs des résistances

Le plugin Topsy

Tout d’abord, vous devez disposer du plugin Topsy Retweet Button. Personnellement je ne l’utilise que pour la fonction TrackBack Comments que je configure comme ceci :

Trackback Comments de Topsy Retweet Button est bien pratique mais il présente certaines lacunes :

• Pas d’avatar pour les comptes twitter
• Impossibilité de masquer les commentaires issus de Topsy.

Voici donc comment résoudre ces problèmes simplement sans modifier le plugin.

Ajouter une fonction pour identifier les commentaires de Topsy

Cette fonction est à intégrer dans le fichier functions.php de votre thème

// Test si le commentaire est un commentaire de Topsy
// Basée sur le code source de BackType Connect
//
// @param	int	$comment	 Commentaire a tester
// @param	bool	$ret_ID	 Whether or not to return the comment_ID
// @return	bool	 True          si c'est un commentaire Topsy sinon false
//
function sgk_is_topsy_comment($comment, $ret_ID=false) {
	if (substr($comment->comment_agent, 0, 5) == 'Topsy') {
		if ($ret_ID) {
			return $comment->comment_ID;
		}
		return true;
	}
	return false;
}

Ajouter l’avatar de Twitter aux commentaires Topsy

Pour cela nous allons ajouter la fonction sgk_get_twitter_avatar dans fonctions.php de votre thème, afin de retourner un avatar correct lors de la détection de commentaires en provenance de Topsy.

// Filter avatars pour Topsy comments
// Basée sur le code source de BackType Connect
//
// @uses	sgk_is_topsy_comment()
//
// @param	string	$avatar			avatar courant
// @param	object	$id_or_email	auteur courant du commentaire
// @param	int		$size			taille de l'avatar
// @param	string	$default		        avatar par default
// @param	string	$alt			        Alt tag pour l'avatar avatar
// @return	string					Nouveau avatar
//
function sgk_get_twitter_avatar($avatar, $id_or_email, $size='96', $default='', $alt='') {
	if (!is_object($id_or_email) && $comment_ID = get_comment_ID()) {
		$id_or_email = get_comment($comment_ID);
	}
	if (is_object($id_or_email)) {
		if (sgk_is_topsy_comment($id_or_email)) {
			$alt = '';
			if (preg_match("/^https?:\/\/(?:[-\w]+\.)?twitter\.com\/(\w{1,15})/", $id_or_email->comment_author_url, $match)) {
				$tweeter_username = $match[1];
			}
			$default = 'http://img.tweetimag.es/i/' . $tweeter_username . '_n';
			return "<img alt='{$alt}' src='{$default}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
		}
	}
	return $avatar;
}

Il faut ensuite déclencher le filtre sur chaque appel global de get_avatar de la boucle wordpress, pour cela il suffit d’ajouter cette ligne dans fonctions.php de votre thème

add_filter('get_avatar', 'sgk_get_twitter_avatar', 10, 5);

Vous disposez maintenant d’avatars Twitter pour vos commentaires Topsy.

Masquer les tweets en provenance de Topsy par defaut

Pour masquer les tweets en provenance de Topsy, il faut d’abord les identifier. On va donc rajouter une classe aux commentaires de Topsy, à l’aide la fonction sgk_comment_class à ajouter dans fonctions.php de votre thème.

// ajout de la classe twitter_comment aux commentaires Topsy
// Basée sur le code source de BackType Connect
//
// @uses	sgk_is_topsy_comment()
//
// @param	string	$classes		        Class attribuées aux commentaires
// @param	string	$class			Class attribute du commentaire
// @param	string	$comment_id		ID du commentaire
// @return							class corrigées pour le commentaire
//
function sgk_comment_class($classes, $class=null, $comment_id=null) {
	if ($comment_id == null) {
		$comment_id = get_comment_ID();
	}
	if ($comment = get_comment($comment_id)) {
		if (sgk_is_topsy_comment($comment)) {
			$classes[] = 'twitter_comment';
		}
	}
	return $classes;
}

Il faut ensuite déclencher le filtre sur chaque appel global de comment_class de la boucle wordpress, pour cela il suffit d’ajouter cette ligne dans fonctions.php de votre thème

add_filter('comment_class', 'sgk_comment_class', 10, 3);

Vous disposez maintenant de la classe twitter_comment pour vos commentaires Topsy.

Il va falloir masquer ces commentaires à l’aide d’une feuilles de style css comme par exemple style.css de votre thème où il faudra intégrer

.twitter_comment {
display:none;
}

Pour pouvoir afficher vos commentaires à la demande avec un joli effet toggle jQuery

Télécharger jquery-1.2.6.pack.js et enregistrer le dans un répertoire js dans votre thème

Il faudra alors rajouter dans la partie head votre header.php

<!-- Un peu basé sur la fredzone j'avoue -->
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script text="text/javascript">
	jQuery(document).ready(  function() {
		$('#ToggleTweet').click(function() {
			$(".twitter_comment").toggle("slow");
		});
	});
</script>

Il faut maintenant insérer le déclencheur #ToggleTweet dans votre code pour pouvoir masquer les tweets de Topsy, personnelement je l’ai mis dans comments.php

<h3 id="comments">
	<?php comments_number('Pas de commentaires', 'Un Commentaire', '% Commentaires' );?>
	<span id="ToggleTweet"class="right">Voir les tweets</span>
</h3>

Conclusion

Suite au message « There was a problem registering your plugin with BackType. Please contact support@backtype.com for assistance » dans le plugin BackType Connect, je me suis aperçu que ce plugin n’était plus maintenu au profit d’une utilisation par Disqus. Dommage, ce plugin était bien pratique et assez complet de base.

J’ai donc essayé Disqus et sérieusement, je l’ai trouvé trop lourd et pas assez malléable pour mon utilisation, j’ai donc regardé ce que les autres blogueurs utilisaient, et je suis tombé sur Topsy, cette fois ci un peu trop léger, mais suffisant pour mon utilisation.

Il donc fallut rajouter les quelques fonctionnalités de BackType Connect à Topsy pour les avatars et les classes pour remplir mon besoins.

Les tweets dans les commentaires permettent donc de faire monter le nombres de commentaires sous WordPress, indiquant donc la force d’une information, sans forcement dénaturer la discussions des lecteurs.

That’s All Folks !

• Wordpress : Modifier l’image d’un article associé au bouton « J’aime » de Facebook
• Resisty : Un captcha avec le code des couleurs des résistances
• Tworse Key : Une interface pour twitter vos messages en code Morse
• Résultat du concours XBox Live Arcade.

Le code captcha Resisty a été développé par Adafruit Industries et il est disponible sous la forme d’un plugin pour wordpress disponible sur  wordpress.org/extend/plugins/resisty/

Le plugin génère un image de résistance aléatoire, et il suffit d’indiquer la valeur correcte pour valider son commentaire.

Personnellement je ne suis pas adepte des code captcha, qui sont très lourd pour l’utilisateur qui poste un commentaire, mais ce  plugin qui va surement intéressé les bloggueurs qui utilise le système captcha classique et qui cherchent un alternative plus en symbiose avec leur thème.

• WP : Quelques modifications pour mieux intégrer Topsy dans vos commentaires.
• DIY : Une bougie électronique qui vous indique la température ambiante
• Tworse Key : Une interface pour twitter vos messages en code Morse
• Arduino : Présentation et traduction en Français de ArduBlock.

Depuis peu, beaucoup de personnes se présentent comme Geek sur le net. Est-ce un phénomène de mode ou la reconnaissance de la nouvelle génération. Il est normal que la génération geek, qui a grandit avec le départ du High Tech, mûrisse un peu et cherche enfin une identité. Mais dans tout ce brouillard de blog de Geek, quand est-il réellement ?

Tous les blogs Geek Hight Tech se ressemblent t’il ?

Lors d’une session de tinychat récente, une discussion m’a fortement interpellé. Alors que je présentais mon blog, un intervenant (dont j’ai oublié le pseudo) expliquait que les blogs de geek, principalement high tech, se ressemblaient. Tous avait souvent une même info qui circulait, se relayant de blog en blog.

En effet, il n’a pas tort, il n’y a qu’à voir ses flux RSS pour découvrir l’ampleur du phénomène. Lorsque qu’une information est intéressante et qu’elle risque d’apporter un fort trafic, on va la retrouver de blog en blog durant des jours, et on la verra ressortir encore plus tard.

Mais alors si tous les blogs de geek se ressemblent, on va partir vers une harmonisation du paysage Geek, et on va pouvoir se demander qu’en est il du « pourquoi du comment » de notre blog.

Je ne fais pas forcement exception à la règle, je blogue souvent des informations dont je n’ai pas la primeur. Mais je m’efforce depuis peu de rédiger des billets, un peu plus personnel, un peu plus complet. Même si ces billets ne sont lus que par une part dérisoire de mes visiteurs.

Mais comme l’a dit un grand blogueur, on est parfois obligé de bloguer une grosse info, en sachant qu’elle sera forcement reprise de part en part. D’une part pour pouvoir générer du trafic, et d’une autre parce que si on ne publie pas certaines grosses actus, les visiteurs vont voir ailleurs.

Faut-il toujours citer ses sources ?

Il y a une sorte d’éthique de blogueur hallucinante, il faut (c’est une sorte de devoir) de citer ses sources. En effet lorsque l’on déniche une information intéressante, on cite souvent sa source, histoire de « remercier » le blogueur à l’origine de l’exclusivité.

Mais là, je mets encore un gros bémol, toutes les sources ne sont pas bonnes à citer. Si un Site A publie un billet et un site B la reprend, un site C voit l’info, alors le site C devrait citer le site A et non le B. Et même parfois le site B ne fournira pas sa source et passera comme l’origine pour le site C.

Personnellement, je cite mes sources, histoire de backlinker le travail de recherche effectué par un autre blogueur, par contre je ne me contente pas de copier coller son article. Je vais plutôt survoler un sujet intéressant pour repartir à l’origine, histoire de faire une analyse neutre qui m’est propre.

Alors on peut voir certains blogueurs qui ne citent que rarement leur source, et d’autre comme moi qui les citent souvent mais sans trop remonter l’origine réelle de l’info. Il y a du bon comme du mauvais dans chacune de ses pratiques.

Et dans le temps, ou plutôt dans la durée.

Comme chaque phénomène de mode, il a un effet crescendo de démarrage, mais souvent un blogueur s’essouffle et je le comprends. On démarre tous à fond, plein de motivation, en passant qu’un blog c’est 1 à 2 heures par jour et que c’est simple. Mais on est vite confronté à une spirale infernale, un blog c’est du temps, c’est de la veille techno, il faut être à l’affut de la moindre info et il faut gérer l’aspect technique de celui-ci (problème, mis à jour, modération, statistique, etc…).

Pour durer dans le temps, je pense c’est qu’il faut se donner du temps, du temps pour vivre, et surtout pour décompresser, pêter un bon câble et repartir de plus belle. Ce n’est pas forcement grave de disparaitre du net quelques jours, et l’activité suivante du blog s’en retrouvera beaucoup plus bénéfique.

Conclusion : This is the End

Dans le paysage des blogueurs on va déjà trouver 2 types, les blogueurs amateurs et les professionnels, chacun n’a pas les mêmes contraintes, même si à la base les 2 bloguent par passion. Et c’est une différence fondamentale, car un blogueur amateur aura plus de liberté qu’un pro, il a moins besoin de son blog pour se nourrir.

On retrouve forcement des gens qui cherchent à s’insérer dans la part du gâteau « Blog geek », mais passeront il le cap de la durée, surtout si ils vivent une vraie vie à coté.

• La robe LEGO de Fergie des Black Eyed Peas
• Une boucle de ceinture avec un contrôleur Nintendo NES en argent
• Le piège à souris géré par Arduino.
• Nano Mod : Le catalogue de vitrine interactif.

Introduction :

La plupart des blogueurs sont confrontés à un problème bien connus, le hotlinking.
Le hotlink (traduction littérale : lien à chaud) c’est le fait de poster une image sur site A (le voleur) tout en la laissant sur un site B (en occurrence le votre), la conséquence principale est que c’est le possesseur du site B qui se voit amputé la bande passante liée au trafic de ses images vers le site B, ainsi que les divers frais lié au trafic.
La principale alternative au hotlink, c’est de protégé ses images via une modification du fichier Htaccess. L’avantage est que c’est un filtre robuste qu’il faut sans cesse mettre à jour pour autoriser ou bannir certains sites. En effet certains robots, comme Google Bot Images, utilisent une plénitude d’adresses IP qu’il faut ne faut pas filtrer si l’on souhaite être référencé correctement.

Pictpocket.

Le principe.

Le principe de PictPocket est très simple, à son initialisation il modifie le fichier htaccess afin de rediriger toutes les images vus par une source extérieur au blog vers un moteur générateur d’images en php.
1. Le moteur, dans un premier temps, se contente seulement de lister les hotlink dans la base de données et vous en informe via une page dans la Console d’Admin de WordPress.
2. Il s’offre à vous plusieurs choix :
• Autoriser le site de manière permanente : Le site sera donc inclus dans le fichier htaccess et il ne sera plus filtré par le moteur de PictPocket, l’accès aux images de votre bloc sera débloqué totalement.
• Bloquer le site : Chaque fois qu’un site bloqué voudra accéder à vos images, il affichera une image de remplacement arbitrairement choisit afin de dissuader les hotlinkeurs.

Les avantages.

Par rapport à une méthode brute de filtrage par Htaccess, PictPocket vous informe de la provenance des hotlinks, souvent associé à un vol de contenu total (articles et images). La gestion du filtrage est nettement plus facile que celle du fichier htaccess, car elle se configure entièrement via la console d’Admin.
Installation.
1. Téléchargez le plugin sur http://wordpress.org/extend/plugins/pictpocket/.
2. Décompresser l’archive et copier le répertoire pictpocket dans « /wp-content/plugins/ »
3. Activer le plugin.
4. Lancer la configuration automatique.

Utilisation.

Menu de Pictpocket

Le menu comporte 4 onglet : Overview, Autorisations, Hotlinks, Options, et Donation.

Overview : Synthèse

Cette page sert à configurer le fichier Htaccess et indique un récapitulatif du nombre de hotlinks traités. A l’initialisation du plugin, il faudra lancer une configuration automatique du plugin et le cas échéant, changer les droits d’accès du fichier Htaccess.

Autorisations.

Sur cette page, ce trouve touts les sites autorisés à accéder à votre contenu. Tous ces sites ne seront plus traités par PictPocket. Attention la syntaxe à utiliser est celle employée par les RewriteCond de fichier htaccess.
Vous pouvez ajouter manuellement ou supprimer des droits sur cette page.

Hotlinks : les Voleurs.

Sur cette page sont répertoriés tous les sites ayant accédés à vos contenus images via le moteur PictPocket. Ceux en gras sont les derniers découverts depuis votre dernière visite. Afin de simplifier un peu la liste, vous pouvez regrouper les hotlinks en 4 familles : Défaut, Masqué, Lien de confiance ou Moteur de Recherche.

Options.

Sur cette page, vous pouvez définir une image perso de remplacement pour les contenus bloqué, il suffit juste de donner son url complète (ex: http://monsite.com/download/mon_image.jpg). L’aperçu se fait en 200px par 200px, mais l’image de remplacement sera conservée dans sa taille originale.
Vous pouvez aussi définir un effacement automatique des hotlinks, en effet quand un contenu est bloqué et remplacé par une image de substitution, le site hotlinkeur, ne tarde pas à l’effacer.

Donation.

Et oui, avec tout le trafic et la bande passante que je vous ai fait économiser, vous pourriez me faire une donation.(;

Conclusion.

C’est un projet personnel que je dévelloppe seul, alors soyez indulgent avec les commentaires.

Merci de laisser en en commentaires, vos reports de bugs, vos demandes d’améliorations ou encore vos remerciements.

• WP : Quelques modifications pour mieux intégrer Topsy dans vos commentaires.
• Resisty : Un captcha avec le code des couleurs des résistances
• Quelques optimisations .htaccess pour Wordpress.
• Power Twitter : Un plugin pour Firefox qui améliore Twitter.