Pubblicato il 10/03/16e aggiornato il

Come incorporare post e video di Facebook in un sito.

Come implementare post e video di Facebook in un sito (Blogger, Wordpress) con o senza aver creato una applicazione.
Dopo una breve pausa ritorno a parlare delle sinergie che si possono creare tra Facebook e un sito web con un particolare riguardo a quelli situati su piattaforma Blogger. Se siete dei frequentatori di quotidiani online avrete certamente visto che in alcuni articoli sono presenti dei contenuti importati direttamente da Facebook con i quali gli utenti possono interagire direttamente dalla pagina.

Tale importazione è piuttosto semplice di per sé ma la si può facilitare ulteriormente se nel nostro sito è stato già installato il javascript SDK di Facebook. Ricordo che lo si può fare dopo aver creato una applicazione o senza averla creata. In entrambi i casi in riferimento a un blog su Blogger,  dopo aver salvato il template, si va su Modello > Modifica HTML e si cerca la riga

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

Subito sotto si incolla il javascript SDK di Facebook che sarà diverso con o senza app.

CODICE DA INCOLLARE SENZA AVER CREATO L'APPLICAZIONE


<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 = &#39;//connect.facebook.net/it_IT/all.js#xfbml=1&#39;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>

 

CODICE DA INCOLLARE SE È STATA CREATA UNA APPLICAZIONE


<!-- Facebook SDK Start -->
<script>
//<![CDATA[
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '116894568356960',
      xfbml      : true,
      version    : 'v2.5'
    });
  };
  (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/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook SDK End -->

Si salva il modello. In entrambi i codici si può scegliere una lingua del bottone diversa dall'italiano (it_IT) mentre nel secondo si deve sostituire l'ID univoco della applicazione del sito evidenziato di verde. Istruzioni più dettagliate per queste operazioni possono essere consultate nei post seguenti:


Con queste aggiunte l'implementazione dei post e dei video di Facebook sarà più semplice. 

 

COME INCORPORARE UN POST DI FACEBOOK


Dopo aver individuato il post si va nel menù in alto e si sceglie Incorpora post   

incorporare-post-facebook

Se non fosse visibile si clicca su su Altre Opzioni per poi poterlo visualizzare. Si aprirà una finestra

implementare-post-facebook

in cui sarà visibile l'Anteprima del post implementato. In alto dovremo selezionare e copiare il codice. Se non avessimo inserito il javascript di Facebook nel modello dovremo incollarlo tutto. Nel caso in cui invece lo avessimo fatto lo incolleremo in un file del Blocco Note

image

Il codice da copiare sarà solo quello successivo al tag di chiusura </script> come mostrato nello screenshot precedente. Il codice rimasto lo si può incollare in un post aprendo l'Editor e incollandolo in Modalità HTML esattamente nel punto in cui si vuole che si visualizzi. 

post-facebook

Si potranno modificare le sue dimensioni agendo sul parametro 500 in data-width="500"e si potrà anche centrarlo nel layout aggiungendo la riga <div align="center"> all'inizio e la riga </div> alla fine. I lettori potranno cliccare sul bottone Mi Piace, su quello dei Commenti e sulla icona del Condividi rispettivamente per commentare e per condividere il  post.

COME INCORPORARE DEI VIDEO DI FACEBOOK


Per i video presenti su Facebook vale un discorso analogo a quello fatto per i post nel senso che se già avete nel modello il javascript di Facebook non sarà necessario aggiungerlo di nuovo. Bisogna aprire la pagina del video e copiare il suo URL dalla barra del browser

image

Tale URL si incolla nell'apposito campo del Video Code Configurator 

video-configurator-facebook

Nel campo accanto si può digitare la larghezza desiderata che di default è 500. Si va su Get Code.

codice-video-facebook

Si visualizzeranno due codici. Il primo è da incollare sotto alla riga <body....> solo se non sia stato ancora aggiunto il codice javascript SDK mentre il secondo dovrà essere copiato e incollato in un post in Modalità HTML. Eventualmente potrà essere centrato con gli stessi tag usati per il post

video-facebook-post

Il lettore cliccando sulla icona f di Facebook potrà aprire la pagina originale del video.




Nessun commento :

Posta un commento

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.