Denis au fil du web

Comme Damien le seesmique, je l’ai aidé à implémenter sous Wordpress ce qu’il avait vu sous Typepad.

A savoir un player Seesmic inclus dans la colonne de son blog. Le challenge, générer un code <embed> de seesmic qui tienne dans 250px de large, qui puisse aussi se retrouver affiché dans le flux RSS du blog (pour bénéficier de l’attention des abonnés) mais dès lors être visible en taille normale à savoir 435 sur 355 pixels.

Pour réaliser ça j’ai repris et étendu les fonctionnalités d’un plugin WP que j’affectionne Easytube qui permet de poster une vidéo dans WP via son URL plutôt qu’en copiant collant son code embed.

Là-dessus un rien de jTabber, un plugins jQuery, qui permet d’afficher du contenu sous forme d’onglets dans WP et ailleurs.

Une catégorie dédiée à la publication des vidéos seesmic, un loop dédié à l’affichage des 3 derniers messages et un constante qui sert de flag pour définir si on est ou pas dans la colonne et le tour est joué.

Pour le détail du code

ID CATEGORY doit être remplacé par la valeur numérique de la catégorie utilisée pour poster vos vidéos

Le code ajouté dans sidebar.php dans le thème

<?php if(!in_category('ID CATEGORY')){
	//a call to include the tabber section
	//ID CATEGORY is "Question du jour"
	//SMALL is a contant used in easytube.php to determine if we are in the sidebar or not
		define("SMALL","true");
		get_template_file('jtabber.php');
	}
?>

Le jtabber.php du thème

<div id="jtabber">
<h2>La question du jour</h2>
	<div id="nav">
		<a href="#" title="divname1">Maintenant</a>
		<a href="#" title="divname2">Avant</a>
		<a href="#" title="divname3">Plus tôt</a>
		<div class="clear"></div>
	</div>
<?php $recent = new WP_Query("cat=ID CATEGORY&showposts=3");
	$my_i = 1;
	?>
	<?php if(have_posts()) : ?>
	<?php while($recent->have_posts()) : $recent->the_post();?>
 	<div id="divname<?php echo $my_i;?>" class="hiddencontent">
	<?php the_content(); $my_i++ ?>
 	</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!--#jtabber end-->

Le code ajouté dans easytube.php (penser à ajouter les hooks aussi!)

/*
 * The Seesmic code
 */
function seesmic_content($content) {
    $regex = '/\[seesmic:http:\/\/seesmic.com\/video\/(.*?)]/i';
	preg_match_all( $regex, $content, $matches );
	$vid = $matches[1][0];
		if(is_feed()){
			$replace = "<a href=\"http://seesmic.com/video/$vid\">La pensée du jour</a>";
		} elseif(defined('SMALL')){
			$replace = '<span style="padding:0px; margin:0px; display:block">
			<object width="250" height="250">
			<param name="movie" value="http://seesmic.com/embeds/wrapper.swf"/>
			<param name="bgcolor" value="#F3F2F2"/>
			<param name="allowFullScreen" value="false"/>
			<param name="allowScriptAccess" value="always"/>
			<param name="flashVars" value="video='.$vid.'amp;version=threadedplayer"/>
			<embed src="http://seesmic.com/embeds/wrapper.swf" type="application/x-shockwave-flash" flashVars="video='.$vid.'&amp;version=threadedplayer" allowFullScreen="false" bgcolor="F3F2F2" allowScriptAccess="always" width="250" height="250">
			</embed>
			</object>
			</span>';
		}else {
			$replace = '<span style="padding:0px; margin:0px; display:block">
			<object width="435" height="355">
			<param name="movie" value="http://seesmic.com/embeds/wrapper.swf"/>
			<param name="bgcolor" value="#F3F2F2"/>
			<param name="allowFullScreen" value="false"/>
			<param name="allowScriptAccess" value="always"/>
			<param name="flashVars" value="video='.$vid.'amp;version=threadedplayer"/>
			<embed src="http://seesmic.com/embeds/wrapper.swf" type="application/x-shockwave-flash" flashVars="video='.$vid.'&amp;version=threadedplayer" allowFullScreen="false" bgcolor="F3F2F2" allowScriptAccess="always" width="435" height="355">
			</embed>
			</object>
			</span>';
		}

		$content = str_replace($matches[0][0], $replace, $content);
	return $content;
}