Logo Facebook dans une fenêtre

Supprimer les scrollbars dans un onglet iFrame Facebook

Vous avez créé une page html et vous souhaitez l’embarquer dans un onglet de votre page Facebook grâce à la fonctionnalité iFrame  ? Vous cliquez fébrilement sur « enregistrer vos modifications » et vous vérifiez l’affichage de votre page. Et là, catastrophe : des ascenseurs (ou scrollbars) enlaidissent considérablement votre mise en page.

Sommaire de l’article 

  1. Les paramètres Facebook par défaut
  2. Etape 1 : modifier l’application
  3. Etape 2 : modifier le contenu de votre fichier html

La raison ? Votre page est trop longue (ou trop haute) et Facebook possède et instaure par défaut une hauteur maximale pour les contenus embarqués, qui ne peut être dépassée naturellement. Mais pas de panique ! Il est possible de contourner ces paramètres avec quelques réglages. C’est très simple et on vous dit comment faire dans cet article.

Les paramètres Facebook par défaut

Sur Facebook, la hauteur (height) maximum pour un onglet iFrame est de 800 pixels. Quant à la largeur (width), elle est de 520 pixels. Si on ne peut pas modifier cette dernière naturellement, il est par contre possible de forcer Facebook à augmenter sa tolérance concernant la hauteur grâce à une petite modification.

Faites appel à un community manager

Nous modérons et animons vos pages d’entreprise sur les réseaux sociaux en créant des contenus rédactionnels et graphiques.

Etape 1 : modifier l’application

Lorsque vous ajoutez un onglet personnalisé sur votre page Facebook, vous passez par la page Developers de Facebook qui vous permet de créer une application personnalisée. A ce stade, vous avez théoriquement déjà renseigné tous les champs nécessaires à la mise en ligne de votre onglet. Voici ce qu’il faut faire, dans un premier temps, pour en modifier la hauteur.

1) Cliquez sur le lien Avancé (colonne de gauche en haut)

iFrame-Facebook

2) Dans la partie Canvas Settings

Pour que tout fonctionne correctement, veillez bien à ce que les cases représentées ci-dessous soient cochées, comme sur la capture d’écran qui suit :

iFrame Facebook

N’oubliez pas de sauvegarder vos modifications en cliquant sur « Enregistrer les modifications » afin que tous vos réglages s’appliquent correctement.

Etape 2 : modifier le contenu de votre fichier html

Les paramètres de l’onglet application de Facebook ont été changés, il reste donc à ajouter un peu de code à votre fichier html. Il s’agit d’un code Javascript et d’une fonction complêtement propre à Facebook :

1) Placez le code suivant juste avant la balise </body> de votre code :

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'ID-de-votre-application',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

Important : pensez bien à renseigner le numéro d’identification de votre application ! Vous trouverez ce numéro constitué de 15 chiffres dans la partie Paramètres > Essentiel de votre application.

2) Placez le code suivant juste avant votre balise </head> :

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
}
</script>

Après avoir terminé, n’oubliez pas de sauvegarder votre fichier html et le tour est joué ! Votre onglet est désormais débarrassé de toute scrollbar. Plutôt pratique, vous ne trouvez pas ? Pour aller plus loin sur Facebook, découvrez nos 8 conseils pour réussir une campagne Facebook Ads !

Poursuivez votre lecture avec ces 3 articles :

  1. Créer une publicité Facebook respectant la limite de texte
  2. [Infographie] Publier un post parfait sur Twitter et Facebook 
  3. J’ai testé les formations de Google, Twitter, Facebook et Pinterest

Social Ads

Une génération de traffic, une collecte de données, un ciblage précis ? Editoile vous aide dans ces démarches.

Article mis à jour le 17 mars 2020, rédigé initialement le 16 février 2012.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Retour haut de page