Créer un onglet (tab) sur votre fanpage Facebook

Vous êtes une entreprise, vous avez une fanpage Facebook et vous souhaitez mettre en valeur un produit, une action de communication ou mettre à disposition de vos visiteurs un outil spécifique : la création d’un onglet est la solution !
Suivez le pas-à-pas pour la création de l’onglet sur votre page fan Facebook.

« Attendez, mais où se trouvent donc ces onglets ? » allez-vous me dire! Réponse en image.

onglet-fanpage-facebook

Étape 1 : créez une nouvelle application

Connectez-vous avec vos login habituels à la page developpeurs Facebook.

Cliquez sur le bouton « Créer une application » et remplissez les champs de la popin qui vient de s’afficher : « Nom de l’application » correspond au nom de l’application qui permettra de créer votre nouvel onglet et « Espace de nom de l’application » sera le nom « technique ».
Puis validez en cliquant sur « Continuer ».

Etape 2 : paramétrez l’onglet Facebook

La nouvelle fenêtre qui s’affiche vous permet de donner le nom officiel de votre onglet, d’indiquer l’emplacement sur votre propre serveur de la page qui s’y affichera, de gérer la largeur du contenu de l’onglet (large ou étroit) et de lui ajouter une icône.
N’oubliez pas de remplir « App Domains » avec votre nom de domaine pour indiquer à Facebook que votre domaine est autorisé à « travailler » avec Facebok.
Dernier point important, indiquez une url sécurisée dans la case « Secure Page Tab URL », sans quoi l’internaute qui naviguera sur votre page en mode sécurisé verra un message d’avertissement et pourrait hésiter à continuer.

creation onglet facebook developper

Étape 3 : ajoutez votre onglet à votre fanpage Facebook

Cette étape est assez simple, il suffit de vous rendre sur la page https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&redirect_uri=YOUR_URL en prenant bien soin de remplacer YOUR_APP_ID par le chiffre donné à l’étape précédente et YOUR_URL par l’adresse de votre site internet (http://www.toto.com par exemple).

A vous de classer votre nouvel onglet dans l’ordre que vous souhaitez en cliquant sur la petite flèche qui apparait au survol de la souris !

onglet-fanpage-facebook
Rien de foncièrement compliqué, pour la simple et bonne raison que la difficulté arrivera dans un prochaine article qui concernant l’intégration totale de facebook au sein de votre nouvel onglet : récupération de l’id de l’internaute, de son nom…

Solutions internet pour agences immobilières

creation-site-internet-immobilier

Vous êtes responsable d’une agence immobilière et vous n’avez pas encore de site internet ? Vous souhaitez refaire le site de votre agence immobilière ou le rendre compatible smartphone ? Vous êtes sur la bonne page !

Site internet pour agences immobilières

Faites créer le site internet de votre agence immobilière par Ornitorinc, au programme :

  • Design unique et moderne,
  • passerelle avec votre logiciel de gestion immobilière pour des mises à jour automatisées (Périclès, Total Immo, AC3 Distribution, Fnaim…),
  • moteur de recherche ergonomique et simple d’utilisation,
  • intégration réseaux sociaux (Facebook, Twitter…),
  • géolocalisation des biens immobiliers grâce à Google Maps,
  • responsive design (compatibilité smartphone et tablettes),
  • référencement naturel et campagnes Google Ads,
  • hébergement et nom de domaine,

Pour plus d’information , consultez la page immobilier d’Ornitorinc ou contactez-moi directement. Et mieux que des paroles, rendez-vous sur le site de démonstration d’une agence immobilière.

 

Quelques outils pour webmaster et webdesigner

outils-pour-webmaster-creation-site

Quand on crée un site internet, il existe plusieurs outils qui permettent d’être beaucoup plus efficace : plugins Firefox, simulateurs de navigateurs, serveurs javascript…
Voici une liste non exhaustive pour les développeurs et webdesigner qui souhaitent gagner du temps!

Plugins Firefox pour webmaster

L’un des plugins les plus connus est Firebug. Il permet de détecter précisément les erreurs javascript, CSS et Html et de modifier en temps réel les styles et différents noeuds Html qui composent la page. Un must pour tous les développeurs et aussi les webdesigner !

Firebug aurait été parfait si il avait été possible de sauvegarder les modifications CSS effectuées en live : gain de temps impressionnant assuré. Pour combler ce manque, il existe 2 autres plugins, malheureusement à moitié opérationnels.
Il s’agit du plugin Firefox Firefile dont le programme Beta n’est plus ouvert, si quelqu’un arrive à contacter son créateur pour savoir où en est l’évolution de son plugin je suis preneur! Et Firefile c’est par ici : www.firefile.at

L’autre plugin ayant la même fonction mais qui a eu quelques ratés lorsque je l’ai utilisé est  cssUpdater qui fonctionne correctement mais qui a mon avis nécessiterait une petite mise à jour. Ma feuille de style a en quelque sorte été réinitialisée une fois et toutes les modifications ne sont pas sauvegardées… A tester plus en profondeur pour les curieux : www.cssupdater.com.

Tester le rendu d’un site sur tous les navigateurs

Le titre de ce chapitre est plutôt clair : comment s’assurer de la bonne compatibilité d’un site que l’on vient de créer sur tous les navigateurs actuels et passés alors que l’on a un Mac ou un PC ? Voici une liste des outils les plus fiables :

  • www.browserstack.com : le must, mais payant au bout d’un moment, permet de tester son site en situation réelle. Existe aussi en mode capture écran : www.browserstack.com/screenshots
  • netrenderer.com : testez le rendu de votre site sur les différentes versions de IE.
  • IeTester : pour PC uniquement ou Mac équipés de Parallels Desktop ou toute autre solution de virtualisation.

Editeurs javascript / html / css en ligne

Autre solution permettant de gagner du temps : les éditeurs en ligne javascript / html / css.
Il en existe 2 plutôt impressionnants, le premier est jsfiddle.net qui permet de tester des petits scripts JS ou des fonctionnalités CSS et de voir le rendu en direct.

Le second est plus complet et plus ergonomique, comme vous pourrez le voir dans l’exemple, on peut tester une page complète avec les CSS et scripts fonctionnels. Le live editing ça a quand même du bon ! jsbin.com/uteloc/1/edit

CSS 3 Generator

Pour ceux qui ne sont pas encore à l’aise avec les CSS3 ou qui veulent des rendus complexes, une seule solution, les générateurs de CSS. Il en existe un qui regroupe les principales fonctionnalités recherchées lors de l’utilisation de CSS3, il s’agit de css3generator.com.
L’autre solution est de rechercher via Google : « CSS3 generator ».