#Twitter #timeline embed senza immagini? Si può grazie a JQuery

#Twitter #timeline embed senza immagini? Si può grazie a JQuery

Come potete notare, ho inserito, nella mia sidebar, i vari widget sociali (google+, facebook, e twitter)!

Tuttavia, non li volevo eccessivi e se per google+ e facebook ho risolto facilmente (per facebook ho usato l’iframe, per google+ è facile sistemare come più si preferisce), per twitter, invece, non c’è molto da personalizzare e le immagini “toccherebbe” tenersele…

Twitter, infatti, da qualche tempo non permette più di nascondere le immagini dall’embed e questo, inevitabilmente, causa fastidi e problemi grafici a molti webmaster che la timeline la vorrebbero, ma non vogliono incorporare le immagini (spesso grandi, e che quindi occuperebbero troppo spazio nella sidebar).

E allora come fare?

Beh, per fortuna esiste il web, esistono gli smanettoni, esiste JQuery!

Io speravo di cavarmela con un banale “addClass/addStyle – display: none”, ma non riuscivo proprio dato che il codice generato va poi a finire all’interno di un iframe.

Così, dopo una discreta ricerca, vedo che anche altri accusano il problema, e arrivo alla soluzione qui pubblicata:

https://twittercommunity.com/t/auto-expand-photos-always-on-for-embedded-timeline/62510/65

Questo il codice che ho quindi usato nella mia timeline:

<div class="twitter-block">
  <!-- il link è originale, da inserire in un div con classe "twitter-block" -->
  <a class="twitter-timeline"  href="https://twitter.com/****" data-widget-id="****">Tweets by @****</a>
</div>

<!-- anche lo script rimane originale -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<!-- questo il fix -->
<script type="text/javascript">
jQuery('.twitter-block').delegate('#twitter-widget-0','DOMSubtreeModified propertychange', function() {
	hideTweetMedia();
});
var hideTweetMedia = function() {
	jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('display', 'none');
	jQuery('.twitter-block').css('height', '100%');
	jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {
		hideTweetMedia(this);
	});
}
</script>

E, come potete notare, è un po’ complesso come fix, ma fa bene il suo dovere (ovviamente, non serve dirlo, jquery è necessario)!

Conoscete metodi più semplici? Pensate si possa ottimizzare quel fix? Commentate! 🙂

Diversamente, spero possa tornarvi utile questo articolo (in tal caso, condividete) 😉




Lascia un commento