Twitter

Wordpress : Affichage des updates protected depuis Twitter

Lorsque j’ai commencé à twitter, le statut de mes updates était public. Je n’ai commencé à les protéger que depuis l’année dernière. Cela ne m’intéressait plus vraiment que des personnes que je ne connaissais pas puissent accéder à des informations sur ma vie. On pourra revenir – ou pas – sur les motivations d’utiliser Twitter pour faire la promotion de son branding personnel, ce n’est pas le débat ici.
Je fais donc en sorte de tenir une following liste limitée tout en bloquant et en refusant des followers. Ce n’est surtout pas pour snober qui que ce soit, mais les relations humaines sont complexes et ne peuvent pas se traduire par à un accès ou non à des messages …
Cependant, il s’avère que certains messages ont leur place sur une timeline publique. C’est une fonctionnalité que n’offre pas Twitter (pour l’instant?), c’est pourquoi j’ai demandé à Damien de développer O2Tweet, un plugin pour Wordpress permettant de sélectionner les updates à extraire. Cela se fait grâce à des tags que l’utilisateur peut définir, pour ma part j’utilise celui-ci : ✍

J’ai ensuite réfléchis à l’intégration des updates sur ce blog. Ne voulant pas passer par un widget et donc charger plus encore les sidebars, j’ai adopté la mise en page que vous découvrez. Ce positionnement permet également aux messages d’être mis en avant de manière efficace. Pour faire défiler ces derniers, on en vient naturellement à l’idée du carrousel.

Les updates sont chargés en fin de page et repositionnés dans l’entête avec les CSS. En effet, l’interrogation de l’API qui se fait server side est dépendante de la charge liée à l’utilisation de l’API, il faut donc privilégier le contenu principal.
J’ai repris le code du widget proposé par le plugin O2Tweet pour l’adapter à mes besoins, à savoir une fonction appelée dans le footer.

function getTweets() {
	global $wpdb;
 
	// Fréquence de mise à jour
	$update = get_option('o2t_update');
 
	if ($update > 0) {
		$last_update = get_option('o2t_last_update');
		if (date('U') - $last_update >= $update * 60) {
			o2t_core::update_last_tweets();
		}
	}
 
	// Récupération des updates
	$tweets = $wpdb->get_results('SELECT * FROM ' . $wpdb->o2t . ' ORDER BY created_at DESC LIMIT ' . get_option('o2t_tweets_count'));
	if (sizeof($tweets) > 0) {
		// Affichage
		echo "\n<div id=\"mytweets_wrapper\">";
		echo '<ul id="' . get_option('o2t_ulid') . '" class="' . get_option('o2t_ulclasses') . '">';
		foreach($tweets as $tweet) {
			echo "\n";
			echo '<li>' . $tweet->content . '</li>';
		}
		echo "\n";
		echo '</ul>
		</div>
		<a href="#" id="mytweets_next"></a>';
	}
	else {
		echo "<span id=\"mytweets\">Le prochain Tweet arrive bientôt!</span>";
	}
}
#twitter_updates {
	background-image: url(img/twitter.png);
	background-repeat: no-repeat;
	background-color: #9AE4E8;
	height: 30px;
	background-position: 8px 2px;
	display: block;
	width: 100%;
}
 
#mytweets_wrapper {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -472px;
	padding: 0;
	width: 944px; // Largeur du conteneur pour un tweet
	overflow:hidden;
}
 
#mytweets {
	margin: 0;
	padding: 0;
	width: 2832px; // Désolé il faut multiplier tweet_width par le nombre de tweet que l'on veut afficher et l'inscrire à la main
}
 
#mytweets li{
	list-style-type: none;	
	margin: 0;
	padding: 5px 0;
	float: left;
	width: 944px;
}
 
#mytweets_next {
	position: absolute;
	top: 0;
	right: 5px;
	width: 25px;
	height: 25px;
	display: block;
	background-image: url(img/arrow_right_twitter.png);
	background-position: 0 2px;
}

Par défaut, seul le dernier message s’affiche, les autres étant positionnés en dehors du conteneur mytweets_wrapper grâce à l’attribut overflow: hidden; . Pour les faire défiler, voici le code du carrousel :

?View Code JAVASCRIPT
// Vérification de l'exitence de tweets	
if (document.getElementById('mytweets')) {
	var tweet_width = 944; // largeur d'une ligne de tweet
	var mytweet_width_px = jQuery("#mytweets").css('width');
	var cur_pos = 0;
	mytweets_width = 2832; // largeur correspondant à l'ensemble des tweets, désolé il faut multiplier tweet_width par le nombre de tweet que l'on veut afficher et l'inscrire à la main
 
	// Affectation de la fonction de défilement des tweets		
	jQuery("a#mytweets_next").click(function(){
		// Calcul de la position suivante
		cur_pos -= tweet_width;
		// Vérification que l'on n'a pas fait défilé tout les tweets
		if (cur_pos <= -mytweets_width) {
			cur_pos = 0;
		}
		// Défilement
			jQuery("#mytweets").animate({opacity: 0.5}, 200).animate({ 
			opacity: 1.0,
	        marginLeft: cur_pos+"px"
      	}, 1000 );
		return false;
	});			
}

4 Comments to Wordpress : Affichage des updates protected depuis Twitter

  1. 21 juin 2009 at 11 h 16 min | Permalink

    Ce qui aurait été encore plus cool est d’afficher tout les tweets si le visiteur est dans tes contacts Twitter. En utilisant l’authentification Twitter, ça devrait être faisable non ?

  2. 21 juin 2009 at 15 h 21 min | Permalink

    J’vois pas bien l’intérêt, si t’es dans ses contacts, tu verras ses tweets en allant sur Twitter, ou en lançant ton client…
    J’veux pas non plus que mon blog devienne un Netvibes :x

  3. 30 juin 2009 at 12 h 29 min | Permalink

    Tiens c’est amusant, il n’y a pas longtemps que je me pose la question de rendre privé mes twits.

    Par contre, ce que j’aimerais faire, c’est les afficher sur mon site aussi. Et comme j’utilise le plugin twitter pour Dotclear, je n’ai pas vu où renseigner l’authentification. Je pense être bon pour une modification de plugin.

    En tout cas, cette idée de bandeau qui défile c’est vraiment sympa. J’y aurais rendu les liens cliquables.

Saisir un commentaire

Vous pouvez utilisez les balises HTML suivantes, ainsi que les attributs associés : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Photographie

Tranches de vie on Facebook