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

Custom Facebook tabs

Published on 1/9/2012
Categories: Social Media

Facebook allows to create advertising pages, company pages or simply pages dedicated on any sort of argument. To the default tabs that are automatically created by Facebook (Wall, Info, Photos, ecc.) it is possible to add also custom and interactive tabs.

Facebook tabs

The original method was using FBML (Facebook Markup Language), that is static pages. Starting from 2012 this method was marked as obsolete in favor of the new iframe technology, that substantially allows to directly embed in an HTML iframe a page from your web site.

To add a tab to your Facebook page, first create the page on your web site: the page should have a width of 520 pixels and whichever height you want (see later if the height is higher than 800 pixels).

Go to the developer section (developers.facebook.com) and create a new application setting at least the following information:

  • App Display Name: application name (in our sample Idea R).
  • Contact EMail: your email.
  • Select how your app integrates with Facebook: the application type you're creating, in our case we're interested in adding a new page tab:

It is also possible to change the default tab icon, specifing a PNG image (with alpha channel) of 16x16 pixels.

If our page is less than 800 pixels tall, the job is done; if the embedded page is higher, proceed in the following way:

  1. In the developers section access the Advanced section of our application and set the Canvas Height (under Canvas Settings) to Fluid.
  2. In our pae include a link to the Facebook APIs.
  3. Immediately after the body tab insert a div with fb-root identifier.
  4. Take note of the App ID assegned by Facebook to our application and add the following code to resize the tab:

<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>
  ...

If we already know the height of the page (in our case 997 pixels), we can set it asynchronously and at the same time shorten the load time:

<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>
  ...

That's the final result (to see it directly on Facebook, click here):

Idea R

You are the reader number 5,748.

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