Stracciafabrizio’s Weblog

Just another WordPress.com weblog

Integrare riquadro fan box facebook nel proprio sito tramite iframe

with 6 comments

L’integrazione del fan box della propria pagina di Facebook puo’ essere fatta tramite javascript o iframe. Con explorer 8 l’intgrazione tramite javascript porta ad un errore di apertura della pagina, rendendo il sito inaccessibile (il problema puo’ essere generato da qualsiasi script inserito in maniera anomala nelle div come riportato in questo post).

Tramite l’utilizzo di iframe il problema viene risolto alla radice.

ecco come fare ( dal wiki di fb):

Using an IFrame instead of JavaScript
We highly recommend using JavaScript to add a Fan Box, as it allows your site to add more social widgets (other Fan Boxes or Live Stream Boxes) easily in the future.If you are unable to use this method for some reason, you can use add a Fan Box using an HTML iframe tag, like this:

<iframe scrolling=”no” frameborder=”0″ src=”http://www.facebook.com/connect/connect.php?id=YOUR_PAGE_ID&connections=10&stream=1&css=PATH_TO_STYLE_SHEET&locale=your_LOCALE”   allowtransparency=”true&#8221; style=”border: none; width: 300px; height: 550px;”></iframe><div style=”font-size:8px; padding-left:10px”><a href=”URL_TO_YOUR_PAGE”>PAGE_NAME</a> on Facebook</div>


You need to specify your Page ID in the iframe src attribute You also must specify the URL to your Page in the anchor tag in the div.You can choose to hide the stream from the Fan Box by changing 1 to 0 in the stream URL parameter.You can modify the number of fans to display by changing the setting for the connections URL parameter. Setting connections to 0 hides your fans. You cannot specify more than 100 fans.You can reference a style sheet by passing css, a URL-encoded GET parameter, to the iframe src. Your style sheet can modify the Fan Box’s colors and fonts, but it cannot delete, obscure or modify:Your Page title and iconThe Become a Fan buttonThe order of the elements (button, stream, fans)You can specify the language in which you want the Fan Box to appear by including the locale parameter. See Facebook Locales for the list of locales currently available.

CODICE ESEMPIO:

<iframe scrolling=”no” frameborder=”0″ src=”http://www.facebook.com/connect/connect.php?id=367265708099&connections=16&stream=1&css=_&locale=it_IT&#8221;

allowtransparency=”true” style=”border: none; width: 500px; height: 550px;”></iframe>

<div style=”font-size:8px; padding-left:10px”><a href=”http://www.facebook.com/pages/Roma/Salseri-Dentro-wwwkarelsavrycom/367265708099″>Salseri Dentro ! http://www.karelsavry.com</a&gt; on Facebook</div>

Written by stracciafabrizio

March 16, 2010 at 5:41 pm

6 Responses

Subscribe to comments with RSS.

  1. Scusa, ma la pagina id e la pagina tag di ancoraggio sono la stessa cosa?

    Non sono riuscito…
    Mi aiuti?
    Grazie..

    Nico

    May 5, 2010 at 12:36 am

    • Ciao ti rispondo direttamente con un codice nel post d’esempio (Della serie una linea di codice vale più di mille parole :D).

      Sostituisci il tuo ID a questo codice .L’ID della tua pagina lo trovi nella url, è quel numero dopo l’ultima “/”.

      Nella voce href=”…Link tuo pagina fb…”

      Fammi sapere

      stracciafabrizio

      May 5, 2010 at 10:16 am

  2. Ciao! ho recentemente aperto un blog qui su WP, e mi piacrebbe inserire un riquadro FANBOX facebook…puoi spiegarmi come fare? grazie, buona serata🙂
    ps: nella home di WP posso scegliere la lingua, mentre nella Dashboard no…si può e sono io storita e non trovo l’opzione oppure non è possibile e rimane solo in inglese?

    Laura

    November 26, 2010 at 4:15 pm

    • Ciao Laura
      Per integrare un fan box nel tuo sito devi avere accesso al codice della pagina, ovvero devi poter scrivere a mano i tag necessari per inserirlo. Il blog che hai aperto, se non erro, è un classico blog hostato sulla piattaforma wordpress.com. Semplice e facile come soluzione per i meno pratici, ma quando devi modificare e inserire cose a piacimento hai delle limitazioni. Tutti i semplici blog hostati su wordpress.com non hai la possibilità di inserire codice javascript a piacimento, puoi limitarti ad aggiungere i widget che trovi sotto la voce Aspetto del tuo menu di amministrazione.
      In definitiva per poterlo aggiungere, devi avere un tuo dominio con installato il CMS WordPress, e non un blog hostato su wordpress.com.

      Ho cercato di non addentrarmi in termini tecnici particolari e spero di aver risposto alla tua richiesta😉

      Saluti

      stracciafabrizio

      November 26, 2010 at 6:42 pm

  3. Ho capito! Grazie!
    Nuova domanda: le limitazioni valgono anche per la grafica? Cioè, posso inserire un banner personalizzato (dove praticamente ora ci sono gli alberelli di Natale)? Grazie per le tue delucidazioni, buone feste!!!

    Laura

    December 23, 2010 at 9:49 pm

    • Scusa ma ho letto la risposta solo ora🙂.
      Rispondo comunque alla domanda anche se credo tu abbia già risolto.
      Puoi inserire dell’HTML personalizzato utilizzando l’apposito modulo chiamato “testo”. Perdonami qui su WordPress vengono chiamati Widget, faccio confusione con altri CMS🙂.Quindi ricapitolando, devi utilizzare il Widget Testo per inserire dell’HTML personalizzato. Lo trovi sul tuo pannello di controllo sotto la voce ASPETTO –> WIDGET .
      Sappi che la posizione è legata al template che utilizzi.
      Esistono altri modi ma più lunghi da spiegare, se ti basta questo fammi sapere.

      Saluti

      stracciafabrizio

      January 12, 2011 at 11:51 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: