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 :
// 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; }); } |
