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

      Idea R - Keywords Mixer, the Web Marketing application - Free Download
  • HomeHome
  • About UsAbout Us
  • ContactsContacts

Blog

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

Change language... italiano
Go to the blog summaryGo to the blog summary

You may be interested in

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!

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

A simple but effective SEO strategy: the middleman

A simple but effective SEO strategy: the middleman

Get excellent results in a short time using this SEO trick. Lern how to quickly apply the middleman technique and have many new web pages indexed.

[FREE download] Keywords Mixer: long tail keywords made easy

There's a basic implementation inside Google AdWords Editor, but this tool will give you more control over permutations and long tail keywords.

Most popular

Milano Design Week 2017, Design Districts

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.

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

Case study: branding and marketing for a magician

Case study: branding and marketing for a magician

Singular case study in the world of illusionism. See how we have created a brand and a web marketing campaign with exceptional results.
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

Take a look at the last published articles
RSS feed

Schede personalizzate in Facebook

Published on 1/9/2012
Categories: Social Media

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
      • indirizzo del nostro sito Internet (non della pagina da visualizzare), nel nostro esempio https://www.idea-r.it/
    • Sezione Page Tab
      • Page Tab Name: nome della scheda, nel nostro esempio Home.
      • Page Tab URL: indirizzo della pagina da visualizzare all'interno di Facebook (nel nostro caso https://www.idea-r.it/Facebook.aspx).

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 5,735.

Comments

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