Facebook business, promuovi il tuo brand – ebook gratuito
Pubblicato in Social Network, Un eBook al mese
Rieccoci con la rubrica “un eBook a settimana“, il consueto appuntamento che sta ricevendo tanti consensi sia da dai visitatori del blog che da parte degli autori delle risorse segnalate. Questa settimana vi consiglio un e-book scritto da Daniele Ghidoli e intitolato “FACEBOOK BUSINESS“, una guida di ben 80 pagine con consigli utili su come promuovere il proprio brand su Facebook. Continua »
[ 6 Commenti ]
Personalizzare stile e grafica del Fanbox di Facebook
Pubblicato in Social Network
Fan Box è un widget di Facebook che, incorporato su un sito web, mostra informazioni relative alla nostra fanpage, tipo i post inseriti, il numero e la foto dei fan, e il tasto ”Become a Fan” .
Inserirlo è semplicissimo basta andare sulla Pagina Fan di Facebook, cliccare sul link “Aggiungi riquadro dei fan al tuo sito”, copiare il codice che è stato generato ed incollarlo sul sito dove volete far comparire il Widget.
Il codice da inserire sarà simile a questo:
<script type="text/javascript" src="http:...................../it_IT"></script> <script type="text/javascript">FB.init("e7cd4ad4e769e764c0c5b84f7a");</script> <fb:fan profile_id="TUOID" stream="" connections="10" width="300"></fb:fan> <div style="font-size:8px; padding-left:10px">
Molto semplice e veloce.
Lo scopo di questo tutorial però è mostrarvi come fare a modificarlo.
Per modificare la larghezza basterà operare qui:
<fb:fan profile_id="TUOID" stream="" connections="10" width="300"></fb:fan>modificando il valore del parametro width, per modificare il numero di foto di fan da visualizzare invece basterà modificare il parametro connections, mentre discorso a parte va fatto se siete intenzionati a cambiarne il design. Per farlo avete bisogno di crearvi un foglio di stile ad hoc.
Per prima cosa nel codice va inserito il parametro “CSS” al quale va assegnato l’url del foglio di stile.
Ecco un esempio:
<fb:fan profile_id="VOSTRO ID" stream="" connections="10" width="287" css="http://www.yeswebcan.it/fbstyle.css"></fb:fan>
Ora non ci resta che creare il css. Per conoscere i nomi dei blocchi da modificare vi occorrerà uno strumento come la Barra Web Developer di Firefox.
Questo è il foglio di stile che ho creato per yesWEBcan. Per me non ho dovuto modificare moltissimi parametri.
@charset "utf-8"; /* Facebook Fanbox */ .fan_box .full_widget .connect_top { display: block; background-color: #e19238; /* Cambio il background al blocco connect */ background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: center; } a { cursor: pointer; color: black; /* Cambio il colore del link col nome della fanpage */ outline-style: none; text-decoration: none; } .fan_box .connections { border-top-width: 1px; border-top-style: solid; border-top-color: #d8dfea; padding-top: 10px; padding-right: 0pt; padding-bottom: 4px; padding-left: 5px; /* Riduco i margini per far comparire più foto */ min-height: 150px; } .fan_box .full_widget { margin:2px; /* Imposto margine 2 */ margin-bottom:10px; border:1px solid #455c6c; /* Aggiungo un bordo di un pixel */ }
Potete scaricarlo anche qui.
IMPORTANTE: Una volta pubblicato, il css rimane in memoria, quindi se successivamente vorrete effettuare altre modifiche queste non saranno a voi visibili neanche cancellando o disattivando la cache del browser. Il problema è facilmente risolvibile e ne parlo in quest’articolo
L’occasione è gradita per invitarvi a iscrivervi alla fanpage di yesWEBcan.it 
[ 19 Commenti ]
Forzare l’aggiornamento della cache in automatico
Pubblicato in Programmazione
Durante la personalizzazione di un widget ho dovuto affrontare un problema davvero noioso. Modificando il CSS, questo non veniva memorizzato nella cache del browser ma veniva come incorporato nell’API .
Il risultato? Il widget, anche cancellando o disattivando la cache del browser, veniva visualizzato sempre con la vecchia versione del CSS, nascondendo le modifiche che di volta in volta effettuavo.
Il problema è molto noto, può presentarsi anche caricando immagini con script, oppure lavorando con filmati flash, con ajax, con Javascript ecc…
Sono stato costretto a correre ai ripari, e ho cominciato a cercare qualche soluzione.
La prima soluzione a cui ho pensato è stata cambiare ogni volta nome al foglio di stile. Il Problema veniva così risolto ma ogni volta dovevo rinominare il css via ftp e modificare il link che lo richiamava nella pagina.
Visto che il procedimento era molto lento sono stato costretto a cercare un alternativa. Grazie a Google ho scoperto che Stephen Hayden ha proposto un trucchetto per ovviare il problema. Il trucco consiste nell’aggiungere una variabile GET alla fine del richiamo del file CSS, proprio come accade per le pagine dinamiche;
Il codice sarebbe tipo questo:
<link rel="stylesheet" href="http://yeswebcan.it/style.css?version=1" type="text/css" />
In questo modo non è più necessario rinominare il CSS, basta cambiare il valore alla variabile version ad ogni modifica. Procedura più veloce della precedente ma pur sempre macchinosa.
Allora ho pensato di aggiungerci un piccolo accorgimento. Niente di più semplice, mi sono limitato a generare in modo casuale (random) il valore della variabile GET tramite PHP. In questo modo sono riuscito a dare automaticamente un valore diverso alla variabile, costringendo il browser a richiedere ogni volta il file CSS al server.
Ecco il codice di esempio:
http://www.sito.it/style.css?version=<?php $code=rand(5,130); echo"$code";?>
Viene generato un numero random compreso tra 5 e 130 (ho scelto tali numeri senza alcun criterio, potete utilizzare una qualsiasi coppia di numeri interi)
L’esempio per un immagine sarebbe:
<img src=”img.jpg?visual=<?php $code=rand(5,130); echo “$code”;?>alt=”prova”/>
[ 3 Commenti ]
