Contenu principal

Modifier l’embed de Twitter

WordPress dispose d’une fonctionnalité plutôt pratique : les intégrations automatiques de contenu (embeds). Pour résumer son fonctionnement, on colle l’URL d’un contenu spécifique dans l’éditeur et WordPress va afficher ce contenu directement dans votre article.

C’est par exemple le système utilisé pour intégrer des tweets.
L’embed de Twitter ne me plait pas trop par contre, un format m’est imposé, et il ne colle pas forcément au design de mon site. Bref, on peut trouver plusieurs raisons de vouloir modifier cet embed : design, sécurité, accessibilité, performance, tracking des visiteurs.
Et il est possible de le modifier… Mais il y a un MAIS (un gros). L’embed en lui-même n’est qu’une balise <blockquote>, un script JavaScript vient ensuite la remplacer par une iframe. Il faut donc en premier lieu se débarrasser de ce script, ce qui veut dire « Au revoir les boutons de retweet et favoris, l’avatar, etc ».

Bref, voici ce que je vous propose :

  1. La dernière ligne, contenant le nom de l’auteur, ne contient aucun marquage, nous allons ajouter une balise <cite> (et un <p> aussi).
  2. Il y a aussi un &mdash; : on le vire, pour y mettre ce qu’on veut via CSS plus tard.
  3. La balise <blockquote> contient un attribut width : on le vire.
  4. La date, avec le lien vers le tweet, est en anglais : on la traduit.
  5. On supprime la balise <script>.
010203040506070809101112131415161718192021222324252627282930313233343536373839404142434445

// !Twitter embed: remove the width attribute, add `<p>` tags, change the date in the good language.

add_filter( 'oembed_dataparse', 'sf_improve_twitter_embed', 10, 3 );

function sf_improve_twitter_embed( $return, $data, $url ) {

	if ( strpos( $url, 'twitter.com' ) !== false ) {
		$locale = get_locale();

		// Si vous voulez respecter les guidelines de Twitter, il faut supprimer la ligne suivante (voir en fin d'article).
		$return = str_replace( "\n" . '<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>', '', $return );

		$return = str_replace_once( '</p>&mdash; ', '</p><p><cite>', $return, true );
		$return = str_replace_once( '</a></blockquote>', '</a></cite></p></blockquote>', $return, true );

		if ( ! empty( $data->width ) ) {
			$return = str_replace_once( '" width="' . $data->width . '"', '"', $return );
		}

		if ( $locale && $locale !== 'en_US' && preg_match_all( '@<a href="' . $url . '">((?:(?!</a>).)*)</a>@', $return, $matches, PREG_SET_ORDER ) ) {
			$match  = end( $matches );
			$link   = str_replace( $match[1], date_i18n( __( 'F j, Y' ), strtotime( $match[1] ) ), $match[0] );
			$return = str_replace( $match[0], $link, $return );
		}
	}

	return $return;
}


if ( ! function_exists( 'str_replace_once' ) ) :
function str_replace_once( $search, $replace, $subject, $rev = false ) {
	if ( ! $rev ) {
		if ( false !== ( $pos = strpos( $subject, $search ) ) ) {
			return substr_replace( $subject, $replace, $pos, strlen( $search ) );
		}
	}
	else {
		if ( false !== ( $pos = strpos( strrev( $subject ), strrev( $search ) ) ) ) {
			return strrev( substr_replace( strrev( $subject ), strrev( $replace ), $pos, strlen( $search ) ) );
		}
	}
	return $subject;
}
endif;

Côté CSS, c’est à vous de voir. Voici en exemple ce que j’utilise ici (copié/collé sauvage) :

001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103

/* !Blockquote */
blockquote {
	position: relative;
	max-width: 100%;
	height: auto;
	padding: .5em 0 .5em 1em;
	border: 0;
	margin: 0 0 1.5em 3em;
	font-style: italic;
	font-size: inherit;
	line-height: inherit;
	quotes: none;
}
blockquote:before {
	content: "\e60f";
	float: left;
	margin: .1em 0 0 -1.5em;
	opacity: .3;
	display: inline-block;
	width: 1em;
	height: 1em;
	font-size: 1.1429em;
	line-height: 1.05;
	font-family: 'mashicon'; /* Utilisez votre propre police. */
	font-weight: 400;
	font-size: 1.6em;
	font-style: normal;
	font-variant: normal;
	line-height: .4;
	vertical-align: bottom;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	text-indent: -.01em;
	word-wrap: normal;
	-epub-hyphens: manual;
	hyphens: manual;
	speak: none;
	-moz-osx-font-smoothing: grayscale;
	 -webkit-font-smoothing: antialiased;
}
blockquote:after {
	content: none;
}
blockquote p {
	margin: 0;
}
blockquote p + p {
	margin-top: 1.5em;
}

/* !Cite */
cite {
	position: relative;
	font-style: italic;
	quotes: "\201C" "\201D" "\2018" "\2019";
}
cite:before,
cite:after {
	font-weight: bold;
	font-size: 1.6em;
	line-height: .4;
	vertical-align: bottom;
}
cite:before { content: open-quote; margin-right: .2em; }
cite:after  { content: close-quote; margin: 0 .1em; }

blockquote cite {
	display: block;
	text-align: right;
	margin: 1em 3em 0 0;
	font-size: .875em;
	font-style: italic;
}
blockquote p cite {
	margin-top: -.571em;
}
blockquote cite:before {
	content: '\2014 ';
	font-weight: normal;
	line-height: 1;
	vertical-align: middle;
}
blockquote cite:after {
	content: none;
}

/* !Tweets */
.twitter-tweet {
	clear: both;
	padding: .5em 1em .5em 3em;
	border-left: solid 4px #55acee;
	margin-left: 0;
	background: #fff;
	box-shadow: 0 3px 6px rgba(0,0,0,.1);
}
.twitter-tweet:before {
	content: "\e617";
	text-indent: .02em;
	line-height: 1.1;
	opacity: .8;
	color: #55acee;
}	

Résultat :

Dernier point. Les embeds sont mis en cache automatiquement, vous aurez donc besoin de ceci pour supprimer ce cache et voir apparaitre les modification :

010203040506070809101112

if ( ! function_exists( 'sf_delete_oembed_caches' ) ) :
function sf_delete_oembed_caches( $post_ID = 0 ) {
	global $wp_embed, $wpdb;

	if ( $post_ID ) {
		$wp_embed->delete_oembed_caches( $post_ID );
	}
	else {
		$wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key LIKE '_oembed_%'" );
	}
}
endif;

Nota : même sans enlever le script JavaScript, ces modifications amélioreront l’affichage du tweet pour les lecteurs sans JS et dans les flux RSS.

See ya!

EDIT : on me fait remarquer que Twitter impose des guidelines quant à l’affichage des tweets, donc faites comme vous voulez :°