Pubblicato il 01/07/12e aggiornato il

Recommendations Bar Plugin di Facebook per Blogger.

Come installare il plugin ancora in Beta Recommendations Plugin in un blog della piattaforma Blogger attraverso la creazione di una applicazione e l'utilizzo di Open Graph.
Il Team di Facebook, oltre ai Social Plugins più conosciuti, sta sviluppando anche un altro strumento che per adesso è ancora in versione Beta. Se infatti scorrete la colonna di sinistra dell'elenco, nella sezione Beta Plugins visualizzerete la Recommendations Bar che in italiano potrebbe tradursi come "Box dei Consigli" o qualcosa di simile.

Si tratta di una finestra che si apre dopo un certo numero di secondi che si è caricata tutta la pagina e che mostra i titoli di alcuni articoli correlati alla pagina che si sta leggendo corredati di miniature e di link. L'algoritmo con cui vengono visualizzati non è noto ma vengono certamente privilegiati quei post che hanno ricevuto un maggior numero di Mi Piace da parte degli utenti.

In questo blog il plugin Recommendations Bar funziona perfettamente con Firefox, ha uno strano effetto trasparenza con Internet Explorer che permane nonostante l'inserimento di uno z-index mentre con Chrome gli articoli consigliati da Facebook non si aprono proprio in alcuni post.

Non si può dire nulla sul funzionamento di questo plugin senza prima averlo testato sul nostro blog su Blogger. Ci possono essere anche delle differenze di comportamento tra i vari browser con un diverso settaggio delle opzioni di configurazione che comportano modifiche del codice come vedremo alla fine

recommendations-bar-plugin-facebook

Per installare il Recommendations Bar Plugin occorre usare Open Graph e creare una apposita applicazione per il nostro sito. Seguite quindi le istruzioni dell'articolo
Dopo aver creato l'applicazione e averne acquisito l'ID occorre incollare in Modello > Modifica HTML > Procedi il seguente codice subito sopra la riga </head> 

<!-- Facebook Open Graph Start -->
<meta content='ID_UTENTE' property='fb:admins'/>
<meta content='ID_APPLICAZIONE' property='fb:app_id'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
        <b:else/>
        <meta content='URL_LOGO_BLOG' property='og:image'/>
        </b:if>
<b:else/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
</b:if>
<meta expr:content='&quot;it_IT&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Facebook Open Graph End -->

mentre subito dopo la riga

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

oppure il tag <body>, nei modelli vecchi, va incollato

<!-- Facebook Open Graph Start -->
<div id='fb-root'/>
<script>
//<![CDATA[
(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 = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=ID_APPLICAZIONE";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook Open Graph End -->

in cui vanno inseriti la lingua prescelta e l'ID della applicazione. Con questo sistema come abbiamo visto si possono installare tutti i plugin di Facebook senza caricare nuovamente il javascript. Dopo aver salvato il modello si clicca su Espandi i modelli widget e si cerca la riga <data:post.body/>. Subito sotto si incolla quest'ultimo codice che mostrerà il plugin Recommendations Bar

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='fb-recommendations-bar' data-action='like' data-num-recommendations='3' data-read-time='10' data-side='right' data-trigger='onvisible' expr:data-href='data:post.url' expr:data-site='data:blog.homepageUrl'/>
</b:if>
</b:if>

Le quattro righe colorate di blu rappresentano i tag condizionali e servono per mostrare il plugin solo nei post e non nelle pagine statiche. Come al solito dovrà essere salvato il modello. Per il codice vero e proprio del plugin ci sono da fare delle considerazioni generali che riguardano la piattaforma Blogger e delle osservazioni più specifiche sulle configurazioni del plugin.

CONSIDERAZIONI SUI TAG DI BLOGGER

Se nella pagina di Recommendations Bar cercate di configurare il plugin per il vostro sito, andando su Get Code si visualizzeranno dei tag simili a questi

data-href="URL_DELLA_PAGINA" data-site="URL_DEL_SITO"

Su Blogger è opportuno sostituire le doppie virgolette con la virgoletta semplice, i link generici per funzionare devono essere preceduti da expr: inoltre, secondo quelli che sono i tag di Blogger, l'URL di un singolo post è rappresentato da data:post.url mentre la home ha come URL data:blog.homepageUrl. In questo modo il codice precedente diventa 

expr:data-href='data:post.url' expr:data-site='data:blog.homepageUrl'

quando si deve inserire in un modello di Blogger.

CONFIGURAZIONE DEL RECOMMENDATIONS BAR DI FACEBOOK

Nella finestra di configurazione del plugin ci sono i campi per il Trigger, per il Read Time, il verbo da mostrare e la posizione oltre agli URL della pagina e del dominio che abbiamo già trattato

recommendations-bar-plugin-facebook
  1. Il tag trigger serve per decidere quando espandere la finestra popup del plugin. De default c'è l'opzione onvisible che lascia aprire la finestra dopo il numero di secondi che si sono settati. Si può anche inserire per esempio data-trigger='30%' per far espandere il plugin dopo che il visitatore abbia fatto lo scroll del 30% della pagina, ovviamente si può scegliere anche una percentuale diversa. Se invece si inserisce data-trigger='manual' il popup si espanderà solo quando il lettore cliccherà nel quadratino sulla destra di Mi Piace.
  2. Il tag Read Time serve per scegliere il numero di secondi dopo i quali si debba comunque espandere il plugin. Di default è su 30 e non si può mettere un numero di secondi inferiore a 10.
  3. Il tag data-num-recommendations='3' serve per il numero di post correlati da visualizzare
  4. Il tag data-side='right' serve per mostrare il plugin sulla destra e right può essere sostituito da left 
  5. Il tag data-action='like' può essere sostituito da data-action='recommend' con ovvio significato
  6. Si può anche inserire il tag data-max_age='100' per visualizzare nei post consigliati da Facebook solo quelli che si sono pubblicati negli ultimi 100 giorni. Il numero si può scegliere tra 1 e 180 mentre di default è data-max_age='0' che non considererà l'anzianità dei post.




15 commenti :

  1. ciao Ernesto, dal momento che sulla pagina fb ho altri contenuti rispetto al blog, volevo chiederti se è possibile inserire con gli stessi criteri della reccomendation bar (posizione, red trigger, read time...) la like box con show stream

    RispondiElimina
    Risposte
    1. @ViviTaranto
      Ho appena pubblicato un post sull'OPen Graph
      http://www.ideepercomputeredinternet.com/2012/10/open-graph-facebook-modello-blogger.html
      mentre le istruzioni su come inserire i vari plugin le puoi trovare qui
      http://www.ideepercomputeredinternet.com/2012/06/facebook-blogger-plugin-open-graph.html

      Elimina
    2. installato grazie. un dubbio, ma la recommendation bar pesca i post solo dal blog o anche dalla pagina? a me raccomanda sempre gli stessi 2 post dal blog purtroppo

      Elimina
    3. @ViviTaranto
      Dalla pagina? Quale pagina, quella FB? Ovviamente raccomanda i post del blog. Ci vuole qualche giorno perché i server di FB indicizzino tutto il sito e comincino a raccomandare pagine diverse da quelle iniziali.

      Elimina
    4. hai ragione, cercavo uno show stream dei post pubblicati sulla pagina fb che si posizionasse nel blog coi criteri della recommendation bar x mostare anche altri contributi. ho provato a inserire il like box allo stesso modo ma se va sotto al post. scusa non so se riesco a spiegarmi

      Elimina
  2. Ciao Ernesto,
    sono ancora qui :) Sto cercando di mettere la Bar e ci sono riuscito... Ho, però, delle domande.

    1) Ho messo tutto l'Open Graph e anche l'SDK come spiegato da te; poi ho incollato anche il codice specifico del widget che hai suggerito. Tutto questo nel modello HTML. Non è andato nulla, però. Pensandoci, ho incollato lo stesso codice che hai suggerito in una sezione del sito (quindi inserisci codice Javascript) e l'ho messo in alto nel layout... La Bar è andata... Vorrei sapere se ho fatto bene o se hai altre proposte

    2) Ho notato che la Bar si espande in modo molto lento, anche se metto X=5% e tempo=10... C'è qualche motivo?

    Grazie per la risposta e grazie per le continue spiegazioni :)

    RispondiElimina
  3. @MicheleRaionone
    Se va bene in quel modo non ci sono controindicazioni. La lentezza è anche dovuta agli altri elementi presenti nel blog.

    RispondiElimina
    Risposte
    1. Grazie, Ernesto :) Comunque alla fine ci rinuncio non perché è lenta, ma perché ho notato che privilegia i contenuti con più "mi piace" e non fa proprio per me :) Il tuo blog è sempre più bello... Un consiglio, ma da utente (oltre che da blogger)... Non hai mai pensato di cambiare l'intestazione?

      Elimina
    2. @MicheleRainone
      L'intestazione l'ho fatta da solo in 5 minuti e non sono un grafico. Francamente l'aspetto estetico del blog mi ha sempre interessato poco.

      Elimina
  4. la bar è correttamente a destra, quando si apre però mi viene molto più al centro, c'è un'istruzione da modificare forse?

    RispondiElimina
    Risposte
    1. @ ViviTaranto
      E' molto complicato modificare questo widget :(

      Elimina
  5. ciao Ernesto, da qualche giorno la recommendation consiglia solo il blog e non i post correlati a quello aperto, può essere cambiato qualcosa o si tratta di chissà quale problema col mio template? grazie

    RispondiElimina
  6. Non te lo dire. Può darsi dipenda da Facebook che ha cambiato le API. Mi informerò
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.