Pubblicato da Qualche settimana fa mi sono dovuto cimentare nella ricerca di un buon social wall.
Come che cos'è un social wall?
Un social wall è un aggregatore di notizie provenienti dai social network, proiettato solitamente su monitor / maxi schermo durante gli eventi.
Praticamente, c'è l'evento della pasta?
Ok, allora potrebbe essere carino proiettare su uno schermo tutte le notizie prese dai social network che parlano della pasta, o che hanno i tag / hashtag del tipo #pasta.
Ma come è fatto un social wall?
Un socialwall è dunque o un applicazione che gira sul browser, o un apposito programma, che prende dei feed/delle notizie da uno o più social network, e le mostra all'interno di una pagina.
Capito dunque cos'è un social wall e cosa significa, va da se che, con una minima conoscenza di html, è anche possibile crearsi il proprio social wall da soli e gratis, con un minimo di impegno.
Come creare un social wall gratis.
Per poter creare un social wall fatto gratuitamente in casa, basta ottenere il codice html dei social network che vogliamo mostrare nella pagina internet che andremo a proiettare sul monitor.
A seconda del social network desiderato infatti (twitter, facebook, instagram, youtube, linkedin, ecc...), esistono dei widget da generare / estrapolare ed incorporare dove si vuole.
Trattasi quindi di codice html da inserire in una pagina web creata da noi partendo da zero, anche usando un semplice notepad.
Quindi, iniziamo con prendere il codice html dei social network che vogliamo inglobare nel nostro social wall.
Ho giusto due post che potrebbero facilitarvi la vita con: twitter e facebook.
Una volta ottenuto il codice da includere, dobbiamo preparare la pagina html.
Un esempio di social wall a 2 colonne potrebbe essere il seguente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Titolo del Social Wall</title>
<META HTTP-EQUIV="Refresh" CONTENT="60;">
</head>
<body bottommargin="0" topmargin="0" marginheight="0" marginwidth="0" rightmargin="0" leftmargin="0">
<div style="float:left;">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Foggieunaltropost%2F&tabs=timeline&width=400&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=194178883929207" width="400" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div style="float:left;">
<a class="twitter-timeline" data-width="400" data-height="500" href="https://twitter.com/oggiunaltropost">Tweets by oggiunaltropost</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</body>
</html>
Noterete che i codici html di twitter e di facebook sono collocati all'interno di 2 <div> posizionati uno affianco all'altro (float:left), inoltre le dimensioni larghezza ed altezza sono modificabili intuitivamente anche a mano nel codice, andando a modificare gli attributi: width, height, data-width e data-height.
Un'ultima nota va fatta per questa riga di codice:
<META HTTP-EQUIV="Refresh" CONTENT="60;">
Che praticamente serve per aggiornare automaticamente la pagina ogni 60 secondi, in modo da mostrare in automatico, in tempo quasi reale, tutti i nuovi tweet e tutti i nuovi post su facebook.
Il risultato finale potrebbe essere una cosa del genere:
Ed ecco fatto, avremo così creato il nostro primo social media wall gratis, fatto completamente a mano in casa :)
PS ovviamente questo è un esempio lampo, dove bisogna andare per tentativi per trovare le giuste dimensioni da dare ai div/frame per essere ben impaginati sul monitor dove deve essere proiettato il social wall. Con un po' più di tempo e calma (e maestria nell'html), potrete comunque crearvi anche un social wall responsive gratis che si adatti ad ogni monitor/risoluzione, in modo da poter esser sempre riutilizzabile.
Piaciuto l'articolo? Lascia un commento!
EmoticonEmoticon