[Facebook SDK] Unable to get value of the property ‘closed’: object is null or undefined lors du login en local avec Internet Explorer

By Aymeric on septembre 13th, 2012

Si vous souhaitez développer un site qui met en place de l’authentification Facebook, vous allez surement être confronté à ce problème sous Internet Explorer.

 

En effet, la configuration par défaut d’Internet Explorer pour les sites intranet pose problème lors de l’authentification via le SDK Javascript de Facebook.

 

Le code :

 

<div id="fb-root"></div>
<pre>
<script type="text/javascript">// <![CDATA[
    window.fbAsyncInit = function () {
        FB.init({
            appId: 'VOTRE_APPID',
            channelUrl: '//CHANNEL_URL', // Channel File
            status: true, // check login status
            // enable cookies to allow the server to access the session
            cookie: true, 
            xfbml: true // parse XFBML
        });

        // whenever the user logs in, we tell our login service
        FB.Event.subscribe('auth.login', function () {
            alert('OK');
        });
    };

    (function () {
        var e = document.createElement('script');
        e.src = document.location.protocol + 
                '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    } ());
// ]]></script>

<fb:login-button perms="email" size="large"></fb:login-button>

 

Sous Firefox ou encore Chrome, lorsque vous cliquez sur le bouton de connexion, un pop-up apparait vous demandant de vous authentifier sur Facebook. Après la connexion le pop-up se ferme et le message "OK" apparait à l’écran.

 

Sur Internet Explorer, le pop-up de login fonctionne aussi mais après l’authentification, une fenêtre blanche s’ouvre avec pour URL

 

http://www.facebook.com/plugins/close_popup.php?reload=…

et l’erreur javascript :

 

SCRIPT5007: Unable to get value of the property ‘closed’: object is null or undefined

 

Pour corriger cette erreur, rendez-vous dans les options internet d’Internet Explorer > onglet Sécurité > Séléctionner Local intranet et cochez la case "Enable Protected Mode".

 

 

A noter que ce problème ne se produit que parce que l’URL de votre site en développement est http://localhost…. Après livraison sur un environnement de production, cette configuration n’est plus nécessaire.

 

Le bug original sur le site Facebook : https://developers.facebook.com/bugs/342690645808882?browse=search_500fe1cbd36290f86778869

[VS 2010] Ajouter l’intellisense pour jQuery dans Visual Studio 2010

By Aymeric on novembre 22nd, 2010

jQuery, la bibliothèque javascript créée par John Resig, choisie par Microsoft pour embellir ASP.NET est désormais intégrée à Visual Studio 2010 avec l’intellisense (auto-complétion).

Cette auto-complétion fonctionne avec les fichiers xxxx-vsdoc.js disponibles sur le site de jQuery.

 

 

Le lien "Visual Studio" pointe vers le fichier jquery-1.4.1-vsdoc.js correspondant au fichier javascript de la librairie jquery-1.4.1.js. Ces 2 fichiers doivent être placés dans le même dossier et respecter le même format comme décrit ci-dessous :

 

 

Le fichier script.js contient notre code utilisant jQuery. C’est dans ce fichier que nous souhaitons bénéficier de l’intellisense. Cependant par défaut, aucune complétion n’est disponible pour jQuery. Afin d’activer la complétion dans notre fichier script.js, glisser-déposer depuis l’explorateur de solution le fichier jquery-1.4.1.js dans la fenêtre de code du fichier script.js.

 

 

Une fois cette opération effectuée un commentaire apparaît dans le code :  l’intellisense est disponible :

 

 

Note : Si le fichier xxx-vsdoc.js est renommé ou ajouté ultérieurement, un redémarrage de Visual Studio 2010 peut être nécessaire pour obtenir l’intellisense.

[GMaps] Géolocaliser une adresse grâce au webservice de l’API Google Maps

By Aymeric on février 4th, 2010

Il est habituel d’utiliser l’API Google Maps en javascript pour générer des cartes Google Maps.

Voici une utilisation en PHP de l’API Google Maps pour récupérer les coordonnées (x et y) d’un point à partir d’une adresse.

Par exemple en spécifiant : « Washington, DC, USA », on obtiendra un tableau (array) contenant les coordonnées -77.036667 et 38.895000.

Avant de de pouvoir utiliser le code ci-dessous, il faut se procurer une clé Google Maps API disponible ici.

Voici le code utilisé :

<?php
define('KEY', 'votre_cle_google');
$webService = 'http://maps.google.com/maps/geo?q=' . urlencode($location) . '&output=csv&key=' . GOOGLE_API_KEY;

// Lieu à géolocaliser
$location = 'Washington, DC, USA';

// Récupération des données
$data = explode(',', file_get_contents($webService));

// Test du résultat
$coord = 200 === (int)$data[0] ? array((float)$data[2], (float)$data[3]) : null;

// Affichage des coordonnées
var_dump($coord);
?>
array(2) {
    [0]=>
        float(-77.03666)
    [1]=>
        float(38.895000)
}

[Mootools] Faire un joli calendrier avec Mootools

By Aymeric on septembre 29th, 2009

Pour mon nouveau site (qui devrait sortir sous peu), j’avais besoin d’un champ texte pour entrer une date dans un format précis (jj/mm/aaaa) avec un petit calendrier permettant de choisir cette date.

Après de multiples recherches sur Google, je suis tombé sur le site de Aeron Glenmann et sur son script de calendrier utilisant Mootools :

calendrierPour l’installer ajouter le fichier Mootools ou utiliser Google API ainsi que le fichier calendar.js dans les balises <head></head> de votre page.

Dans un fichier javascript à inclure également ajouter le code suivant :

window.addEvent('domready', function() { myCal = new Calendar({ date: 'd/m/Y' }); });

De multiples petites options sont disponibles pour changer le comportement du calendrier sont disponibles sur le site de l’auteur.

Dans le HTML, ajouter simplement un input de type texte portant l’id date :

<input id="date" name="date" type="text" />

Par défaut le calendrier n’a pas de CSS attaché, mais l’auteur explique sur son site comment le mettre en forme.

Par défaut le script utilise la balise <button> pour afficher le petit bouton à coté du champ texte. Sous Safari 4 sur mac, le bouton envoie le formulaire, j’ai donc remplacé la ligne suivante dans calender.js :

button: new Element('button', { 'type': 'button' }),

par

button: new Element('span' ),

[JavaScript] Charger dynamiquement les frameworks javascript (Mootools, JQuery, etc…) grâce à Google API

By Aymeric on septembre 27th, 2009

Petite astuce que j’ai découvert il y a quelques jours : la possibilité de charger grâce à Google API les fichiers javascript nécessaires au fonctionnement des frameworks javascript comme Mootools, jQuery, DoJo, etc… (liste complète disponible ici).

Pourquoi utiliser Google plutôt qu’une copie du fichier .js sur votre serveur ?

  • Les serveurs de Google sont surement plus rapides que celui qui héberge votre site web
  • Le poids de la page est diminué
  • Economie de la bande passante
  • Même si Google API prévoit un système de versionning dans son appel aux libraires, il permet de toujours avoir la dernière version sortie de la librairie.

L’inconvénient que beaucoup avanceront sera le fait que vous dépendez de Google, si il connait une défaillance, la librairie sera indisponible. Même problème si Google décide d’arrêter ce système ou de le modifier.

Comment ça fonctionne ?

Il suffit d’inclure entre les balise <head></head> de votre site le code suivant :

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

afin de charger l’API Google.

Pour charger la librairie javascript que vous souhaitez (ici Mootools par exemple), ajouter toujours entre les balise <head></head> :

<script type="text/javascript">
    google.load("mootools", "1.2.3");
</script>

La list des codes à ajouter est disponible ici.