Welcome to Idea R | Branding - Web Agency - Digital Strategies
Switch to the mobile layout

      Idea R - Bring out your brand - Web Marketing strategies
  • HomeHome
  • About UsAbout Us
  • ContactsContacts

Blog

Take a software geek from the 80s, add a new generation graphic designer and dilute with a long time marketing strategist. Shake vigorously and you'll get the Idea R's blog.

Change language... italiano

You may be interested in

Irritated by your blog performance? Boost it using the cloud!

Irritated by your blog performance? Boost it using the cloud!

Are you using the world's fastest hosting? If you have a bad architecture, your blog won't have a great performance. Here is the ultimate solution.

How to dramatically increase social media LIKEs to your web site

Here's a free download that I created some time ago. It's a good tool for increasing engagement, but use with caution.

Last published

Can engineering industry sponsor art without going off topic?

Can engineering industry sponsor art without going off topic?

How to design a page in an exhibition catalog of Biennale in Venice, for a customer who apparently has nothing to do with art.

Milano Design Week 2017, Design Districts

Ventura Lambrate and Tortona, here are the best creations that we discovered in the 2 districts of the Fuorisalone Milan Design Week 2017.

Most popular

Lazy loading and the SEO problem, solved!

Lazy loading and the SEO problem, solved!

The best SEO solution to index your dynamically loaded contents, no more compromises!

Case study: TAV Engineering, branding for B2B services

How to create a brand that keeps distance from the cold and aseptic image of the metal industry, focusing instead on the human aspect.

Editor's pick

Mental marketing secret #1: the fake compromise

Mental marketing secret #1: the fake compromise

Can mentalism influence marketing? As a marketing professional and a long term magician, I will reveal you some tricks.
newsletter

Stay informed on digital strategies

RSS feed

Schede personalizzate in Facebook

Facebook permette di creare pagine di tipo pubblicitario, aziendali o semplicemente dedicate a qualche argomento. Alle schede predefinite che vengono create da Facebook (Bacheca, Informazioni, Foto, ecc.) è possibile aggiungere anche delle schede personalizzate ed interattive.

Facebook tabs

L'approccio originale consisteva nell'usare il sistema FBML (Facebook Markup Language), ovvero delle pagine statiche. Dal 2012 questo metodo è stato dichiarato obsoleto in favore della tecnologia degli iframe, che sostanzialmente permette di racchiudere una propria pagina (dal proprio sito web) direttamente all'interno di un iframe HTML, raggiungendo un livello di dinamicità impossibile col precedente FBML.

Per aggiungere una scheda da alla propria pagina Facebook, innanzitutto creare la pagina sul proprio sito: la pagina dovrà avere larghezza 520 pixel e qualsiasi altezza (vedi più avanti cosa fare se l'altezza è maggiore di 800 pixel).

Andare nella sezione dedicata agli sviluppatori (developers.facebook.com) e creare una nuova applicazione inserendo come minimo le seguenti informazioni:

  • App Display Name: nome dell'applicazione (nel nostro esempio abbiamo usato Idea R).
  • Indirizzo e-mail di contatto: il vostro indirizzo email.
  • Select how your app integrates with Facebook: il tipo di applicazione che si sta creando, nel nostro caso siamo interessati ad aggiungere una pagina dal nostro sito web come scheda di una pagina Facebook, dunque specificheremo:
    • Sezione Website
    • Sezione Page Tab

E' possibile anche cambiare l'icona della scheda, fornendo un'immagine PNG (con canale alfa) di 16x16 pixel.

Nel caso ci si limiti ad una pagina larga 520 pixel e alta al massimo 800 pixel, il lavoro è finito; nel caso la nostra pagina inclusa superi gli 800 pixel di altezza, bisogna procedere come segue:

  1. Nella sezione dedicata agli sviluppatori accedere alla sezione Advanced della nostra applicazione e impostare la Canvas Height (sotto Canvas Settings) a Fluid.
  2. Includere nella nostra pagina un link alle API di Facebook.
  3. Subito dopo il tag body inserire un div con identificativo fb-root.
  4. Prendere nota dell'App ID assegnato da Facebook alla propria applicazione e inserire il codice per il ridimensionamento, come nel codice seguente:

<head runat="server">
  ...
  <script type="text/javascript" src="https://connect.facebook.net/en_US/all.js">
  </script>
</head>
<body>
  <div id="fb-root"></div>
  <script type="text/javascript" charset="utf-8">
    FB.init({
      appId: 'your application ID',
      status: true, // check login status
      cookie: true, // enable cookies to allow the server to access the session
      xfbml: true // parse XFBML
    });
    FB.Canvas.setAutoResize();
  </script>
  ...

Se si conosce a priori l'altezza della pagina (nel nostro caso 997 pixel), si può impostarla in maniera asincrona ed allo stesso tempo abbreviare i tempi di caricamento:

<head runat="server">
  ...
  <script type="text/javascript" src="https://connect.facebook.net/en_US/all.js">
  </script>
  <script type="text/javascript" charset="utf-8">
    window.fbAsyncInit = function ()
    {
      FB.init({
        appId: 'your application ID',
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true // parse XFBML
      });
      FB.Canvas.setSize({ width: 520, height: 997 });
    }
  </script>
</head>
<body>
  <div id="fb-root"></div>
  ...

Ed ecco il nostro risultato finale (per vederlo direttamente su Facebook, clicca qui):

Idea R

You are the reader number 3,928.

Comments

comments powered by Disqus
Creative Commons License

Photographies, videos, graphics and texts by Idea R are licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Previous article

Previous article

A infographic sample with ASP.NET

Next article

Dropdown menus with CSS

Next article
  • Visual Communication, Art DirectionVisual Communication, Art Direction
  • Apps, Cloud, Mobile, Software DesignApps, Cloud, Mobile, Software Design
  • Digital StrategiesDigital Strategies
  • BlogBlog
Touching finger
RSS feed
Blog

Scroll to top