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

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

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

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é :

[code lang= »php »]
<?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);
?>
[/code]

[code lang= »plain »]
array(2) {
[0]=>
float(-77.03666)
[1]=>
float(38.895000)
}
[/code]

[PHP] Corriger l’erreur de getimagesize() de PHP causée par un .htaccess

L’utilisation de la fonction getimagesize() en php est très pratique pour récupérer les dimensions d’une image passée en paramètre.

Si votre site est protégé par un .htaccess qui restreint l’accès à certaines personnes, vous devez avoir une erreur du type :

 

Warning: getimagesize(http://www.domain.com/images/fleur.png): failed to open stream: HTTP request failed! HTTP/1.1 401 Authorization Required in /home/domain.com/httpdocs/page.php on line 36

 

Comme l’erreur l’indique, il y a un problème d’autorisation pour accéder à l’image. Pour corriger cette erreur, il suffit de spécifier le nom d’utilisateur et le mot de passe nécessaires pour le .htaccess.

 

Remplacez :

 

[code lang= »php »]getimagesize(<a href="http://www.domain.com/images/fleur.png">http://www.domain.com/images/fleur.png</a>);[/code]

 

par

 

[code lang= »php »]getimagesize("nomutilisateur:motdepasse@http://www.domain.com/images/fleur.png");[/code]

[Flash] Player video flash personnalisé

playerDans le cadre d’un projet web, j’avais besoin d’un player video en flash assez beau pour éviter de devoir passer Youtube ou DailyMotion.

Après quelques recherches je suis tombé sur ce site qui propose un player qui prend les videos en .flv et qui est entièrement personnalisable via une multitude de petits paramètres (mode plein écran, liste de lecture, taille du player, etc…).

Il suffit donc de télécharger le player ici, de l’installer sur votre site. Via le « Generator » disponible ici, personnalisez votre player et copier/coller ensuite le code généré sur votre site web.