Inserire le news di google automaticamente in un ticker

Google News
Riprendiamo l’argomento trattato recentemente su come popolare il nostro sito automaticamente delle news relative ad una parola chiave a nostra scelta, per vedere come si possano anche presentare queste news in un ticker rotante.
Innanzitutto diciamo chee per ticker rotante intendiamo una finestrella delle dimensioni che preferiamo, all’interno della quale faremo scorrere dal basso verso l’alto l’elenco delle news.

Per il nostro scopo avremo bisogno anche di includere nella nostra pagina la libreria jquery ed inoltre un altro breve javascript.


Il modo più efficace di includere la libreria jquery è quello di richiamarla dall’URL ajax.googleapis.com perché essendo richiamata da migliaia di siti in continuazione si trova sempre in cache ed il caricamento risulta più veloce che non richiamandola dal vostro server. Per far questo andrà inserito nella <head> della vostra pagina l’istruzione seguente:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Nella nostra pagina, che, come visto l’altra volta, sarà una pagina php, richiamiamo le news che ci interessa inserire nel ticker col metodo già visto con la sola differenza che le inseriremo momentaneamente in una tabella. Questo sarà il codice:

<?php
	$item_title = array();
	$num_RSS=8; // Numero di news da mostrare nella nostra pagina
        $Keyword="smartphone"; //impostare la keyword di cui cercare notizie
        $lang="it";  
	$url="http://news.google.com/news?q=$Keyword&hl=$lang&gl=$lang&um=1&ie=UTF-8&output=rss";
	$i=0;
	$objDOM = new DOMDocument();
	$objDOM->load($url);
	$note = $objDOM->getElementsByTagName("item");
	for ($i=0; $i<$num_RSS; $i++) {
	 $item_title[$i]=$note->item($i)->getElementsByTagName('title')->item(0)->nodeValue;
	}
?>

Per leggere le news abbiamo usato un ciclo for anziché foreach come l’altra volta, ma la sostanza non cambia. Da notare che in questo caso estraiamo solo i titoli da presentare nel nostro ticker.

A questo punto nell’array $item_title abbiamo i titoli delle news che inseriremo nel ticker.

Il codice a questo punto è semplicissimo perché il lavoro lo fa la funzione javascript che aggiungeremo alla fine. Potrà essere qualcosa di simile:

<div class="news">
	<dl id="ticker">
		<?php
		for ($j=0; $j<$limit; $j++) {
			echo '<dt class="heading">' .  $item_title[$j] . "</dt>";
		}?>
	</dl>
</div>

Magari aggiungeremo anche un bottone che rimanderà alla pagina completa delle News.
Ricordiamo che il tag <dl> è una distribution list e i <dt> i singoli termini della lista. Naturalmente in un css si potranno assegnare le caratteristiche grafiche che vogliamo alla nostra <div> attravrso la classe news.

Come ultima cosa prima della chiusura del tag <html> inseriremo la funzione javascript come segue:

<script type="text/javascript">
	$(function() {
		var ticker = $("#ticker");
		ticker.children().filter("dt").each(function() {
		  var dt = $(this),
		    container = $("<div>");
		  dt.next().appendTo(container);
		  dt.prependTo(container);
		  container.appendTo(ticker);
		});
		ticker.css("overflow", "hidden");  //nasconde la scrollbar
		function animator(currentItem) {
		  var distance = currentItem.height();
			duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;
		  currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
			currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
			animator(currentItem.parent().children(":first"));
		  }); 
		};
		animator(ticker.children(":first"));
		ticker.mouseenter(function() {
		  ticker.children().stop();
		});
		ticker.mouseleave(function() {
		animator(ticker.children(":first"));
		});
	});
</script>

L’aspetto finale sarà come in figura con le news che scorreranno come su un nastro rotante dal basso verso l’alto:

ticker

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.