• Blog
    • Electronique
      • Arduino
      • POV
      • Raspberry PI
    • Divers
      • Gadget
      • Geekeries
      • SteamPunk
    • Do It Yourself
    • High Tech
      • IHM
      • Innovation
      • Réalité Augmenté
    • Imprimante 3D
    • Informatique
      • Hardware
      • Internet
      • Multimedia
      • Software
    • Robotique
    • Test et expertise
  • Boutique
    • Cartes Arduino
    • Raspberry PI
    • Cartes de développement
    • Capteurs
- Annonce -
  • Blog
    • Electronique
      • Arduino
      • POV
      • Raspberry PI
    • Divers
      • Gadget
      • Geekeries
      • SteamPunk
    • Do It Yourself
    • High Tech
      • IHM
      • Innovation
      • Réalité Augmenté
    • Imprimante 3D
    • Informatique
      • Hardware
      • Internet
      • Multimedia
      • Software
    • Robotique
    • Test et expertise
  • Boutique
    • Cartes Arduino
    • Raspberry PI
    • Cartes de développement
    • Capteurs
Accueil » Divers Informatique Internet Wordpress

WP : Quelques modifications pour mieux intégrer Topsy dans vos commentaires.

Semageek Publié le 3 octobre 2010
12
8.2K Vues


  • Partagez sur Facebook
  • Twittez

Depuis quelques temps je chercher à optimiser la gestion des tweets en provenance de twitter dans mes commentaires de WordPress. Je souhaitais garder la présence des tweets sans pour autant perturber les discussions. Voici donc quelques optimisations à rajouter à Topsy pour réaliser cette fonctionnalité.

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 !

Vues : 8 178
  • Partagez sur Facebook
  • Twittez


- Annonce -
avatarbacktypeboucleclasscodecommentcommentairesconnectcssfilterjavascriptjQuerymodificationmodifieroptimiserphppluginslowtoggletopsyTopsy Retweet ButtonTrackBack CommentstrickstwitterWordpress


Auteur

Semageek

La trentaine et passionné par l’électronique et l’informatique. Le DIY et l'univers geek est une vocation que j’ai depuis tout petit, bercé entre les StarWars et les Mac Gyver. J’ai toujours eut une passion très forte pour l’informatique, depuis l’âge de 7 ans où j’ai eu mon premier ordinateur, un Tandy TRS-80 pour les connaisseurs. Et depuis, je suis assez autodidacte et je me forme à l’aide d’internet dans les divers langage de programmation. Actuellement je souhaite prendre un tournant dans ma vie et essayer de travailler à 100% à mon compte sur le web, alors j’essaie de lancer des sites, des idées des concepts dont Semageek fait partie.

Vous aimerez aussi
DIY : Transférer les données d’accès WiFi à un ESP8266 en LiFi
14 juin 2018
DIY : Un système d’alarme à base d’Arduino simple à réaliser
18 janvier 2017
Quaver : Le piano multi-joueurs à base de Raspberry PI
7 septembre 2015
Murata Girl : Le robot qui a vraiment de l'équilibre sur courbe
A lire en suivant

Murata Girl : Le robot qui a vraiment de l'équilibre sur courbe

  • - Annonce -
  • Articles Populaires

    • 1
      Fabriquer un brouilleur de téléphone mobile.
    • 2
      Les 42 commandes les plus utiles sur Raspberry PI
    • 3
      DIY : Une machine CNC de gravure laser fabriquée avec une diode laser de graveur DVD

  • SEMAGEEK : Actualités High Tech, Robot, Électronique, DIY et Arduino.

    Mentions Légales

    Annonceurs

    À propos

    Contact

  • Articles Récents

    • STAR : Un robot modulable à base d'arduino qui se faufile partout
    • DIY : Fabriquer un robot mangeur de pièces avec une boite de Pringles et un arduino
    • Un robot imprimé en 3D qui dessine dans le sable.
  • Articles Populaires

    • 1
      Fabriquer un brouilleur de téléphone mobile.
    • 2
      Les 42 commandes les plus utiles sur Raspberry PI
    • 3
      DIY : Une machine CNC de gravure laser fabriquée avec une diode laser de graveur DVD

© Copyright Semageek® 2009 - 2020
Appuyez sur Entrée pour lancer votre recherche
Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considérerons que vous acceptez l'utilisation des cookies.Ok