Inserire popup Mi Piace di Facebook sul blog


Facebook è il principale metodo di guadagno di molti webmaster che hanno ha disposizione pagine popolose e per questo motivo sono nati i popup di Facebook
Vedo che ormai tramite Facebook si riesce ad accumulare un gran numero si visite, queste se sommati anche ai lettori tramite i feed ed ai visitatori provenienti dalle ricerche di Google fanno sì che il nostro sito o blog abbia molto successo. Ma ottenere fans soprattutto di un sito specifico è alquanto difficile, anche se ci sono metodi per aumentare i fans delle pagine di Facebook questi in teoria non sono veramente interessati ai nostri argomenti e quindi difficilmente si renderanno utili per soddisfare le nostre necessità e quindi non metteranno mai mi piace ai nostri post, non li condivideranno e neanche visiteranno il sito o forum che abbiamo linkato e nel peggiore dei casi tolgono anche il loro Mi Piace, per questo motivo ultimamente vengono usati sempre più spesso i popup per introdurre il Likebox di Facebook come popunder del proprio spazio web.


1. Che cos'è?
Il popup è quella applicazione studiata principalmente per mettere ben visibile qualcosa che il lettore non si sarebbe mai messo in testa di leggere, tranne se forzatamente, difatti queste visualizzazioni sono studiate per le pubblciità (overlay) o per messaggi di benvenuto o come nel nostro caso per incrementare fans nella nostra pagina facebook: Fans utili e interessati.


2. Perché i fans dovrebbero essere interessati?
Tramite questa applicazione che consiglio di usare solo nella homepage, oppure per brevi periodi anche nei singoli post, è come un suggerimento per i lettori a mettere mi piace.
Loro non sono obbligati a farlo per vedere i contenuti difatti dopo pochi secondi la funzione scomparirà,  ma a mio parere se il vostro spazio web è basato su un unico argomento che sia il gossip, che sia l'informatica o le news, il lettore che vedrà ciò se pensa che un giorno gli possa servire mettere volentieri il Mi Piace, e magari risulterà un buon fans attivo per la vostra pagina.


3. Quanti fans si possono accumulare con questo popup?
All'incirca 3-5 ogni 1000 visite uniche se questi è posizionato su tutte le pagine del sito, è vero non sono tanti ma sono persone interessate anche al vostro sito e quindi non è una cosa da sottovalutare. Meglio pochi ma buoni diceva un vecchio saggio...


4. Come inserire il codice (Guida per Blogger-Blogspot)
Andate nel modello, modifica HTML, cercate </head> e appena sopra incollate questo codice:

<!-- EFFETTO SHADOWBOX INIZIO -->
<link href='https://sites.google.com/site/scriptperilblog/effetti/shadowbox1.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/scriptperilblog/effetti/shadowbox.js' type='text/javascript'/>  <script type='text/javascript'>
Shadowbox.init({
overlayColor: &quot;#000000&quot;,
overlayOpacity: &quot;0.8&quot;,
});
</script>
<!-- EFFETTO SHADOWBOX FINE -->

5. Istallare lo script tramite Facebook
Bisogna creare un applicazione con Facebook developers Apps.
Nella finestra che si apre inserire il nome della applicazione, mettere la spunta sull'accettazione dei termini e delle condizioni quindi cliccare su Continua.
Dopo aver superato il controllo visivo di una captcha, si aprirà la pagina della applicazione in cui inserire l'URL del nostro blog. 
Quando ci chiede ID del profilo bisogna prendere l'url del nostro profilo, se invece abbiamo personalizzato l'url vi apparirà non il numero bensì il vostro nome e cognome allora dovete recarvi nel vostro album fotografico e selezionare una vostra immagine a caso e copiare il numero che viene dopo a fbid= nella barra degli indirizzi.

Si tratta dell'ID del nostro Profilo. In questo modo potremo creare due righe di codice di metadati come queste:

<meta content='ID UTENTE' property='fb:admins'/> 
<meta content='ID APPLICAZIONE' property='fb:app_id'/>

dove al posto di ID UTENTE e ID APPLICAZIONE sostituiamo i due numeri ottenuti con il procedimento appena illustrato. E' il momento di andare su Modello > Modifica HTML > Procedi, espandiamo i modelli widget e cerchiamo la riga </head>. Subito sopra incolliamo le due righe di metadati. Adesso cerchiamo la riga <body> se abbiamo un vecchio modello oppure, se abbiamo un template più recente, il seguente codice:


<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Immediatamente sotto a una di queste due righe incollate il seguente script di Facebook

<!-- Facebook Open Graph --> <div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = &quot;//connect.facebook.net/it_IT/all.js#xfbml=1&quot;; fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script> <!-- Facebook Open Graph -->


6. Prelevare il codice Iframe di Facebook
Andate nella pagina dei plugin delle pagine di facebook, selezionate la vostra pagina e prelevate solo il formato Iframe e salvatelo temporaneamente in un blocco note. Per poi inserirlo nel codice all'interno del codice sottostante.

7. L'ultimo codice da inserire (con durata del tempo)

Si va su Modello > Modifica HTML > Procedi e si cerca il tag </head>. Subito sopra si incolla il codice


<b:if cond='data:blog.url == data:blog.homepageUrl'> <script type='text/javascript'> // <![CDATA[ Shadowbox.init({ language: "it", players: ['html'] }); function AlertMessage() Shadowbox.open({ player: 'html', content: 'METTERE QUI IFRAME DI FACEBOOK<br/><center><h3><font color="#f2a136">Se ti piace questo blog diventa fan su Facebook</font> </h3></center>', height: 314, // Altezza della finestra width: 468 // Larghezza della finestra }); setTimeout('Shadowbox.close()', 20000); // Durata del tempo di apertura // ]]> </script> </b:if>

Rosa: con il colore rosa ho evidenziato la parte che serve per farlo visualizzare solo in homepage, se lo volete in tutte le pagine va tolta.
Grassetto: in grassetto ho evidenziato i codici vanno sostituiti o modificati a secondo delle necessita.
Misura: le misure del codice devono essere di almeno 5px superiori al IFRAME di Facebook.
Durata: è possibile variare la durata del popup, attualmente impostato a 20000.


8. Per completare il popup
Un altro codice da sostituire è l'alert Message. Adesso cerchiamo il tag

 <body>

nel caso avessimo un vecchio modello, oppure quest'altra riga

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

se abbiamo invece un template del Designer Modelli. Nel primo caso il tag va sostituito con

<body onload='AlertMessage();'>

mentre nel secondo caso al posto della riga si mette la seguente

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='AlertMessage();'>



Copyright dei Codici: I codici non sono stati studiati da me, ma sono stati ripresi da Ideepercomputer e SauroBlog.


5 comments :

  1. Ciao come mai non funziona ho provato e riprovato

    RispondiElimina
    Risposte
    1. I codici sono funzionanti, strano che non ti funzionano. Gli errori che puoi aver commesso riguardano gli ID magari li hai copiati in modo sbagliato specialmente ID Utente, se vuoi dai un occhiata qui:
      http://www.scuolissima.com/2013/03/creare-un-applicazione-su-facebook.html

      Oppure hai sbagliato i passaggi evidenziati in arancione. Comunque controlla anche con un browser diverso (sia Chrome, sia Internet Explorer), controlla anche che non hai il blocco popup attivato.

      Elimina
  2. Risposte
    1. se non riesci a farlo funziona non significa che dico cazzate... però detto tra noi il popup di Facebook è ormai una cosa vecchia, se il sito va bene basta un semplice Like Box per ottenere fans.

      Elimina

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail.


© Scuolissima.com - appunti di scuola online! © 2021, diritti riservati di Andrea Sapuppo
P. IVA 05219230876

Policy Privacy - Cambia Impostazioni Cookies