Archives de catégorie : Dev

[Facebook] Voir le contenu d’une fanpage sans avoir à devenir fan

Je sais pas vous (enfin si j’ai quand même une vague idée) mais moi je suis fatigué de voir ce type de pages pulluler sur le réseau social des jeunes. Je veux bien sûr parler des fanpage dont il faut devenir membre pour voir le contenu. Souvent le contenu en question n’est pas des plus intéressant mais le titre est suffisamment aguicheur pour qu’un nombre colossal de pigeons se laissent avoir et oublient de quitter les groupes une fois le « précieux » contenu découvert. Ces listes de pigeons servent ensuite à envoyer de la pub soit via le mur soit directement par messages.

Je me suis un peu penché sur le problème et y ai trouvé une solution très simple et diablement efficace : une seule ligne de javascript (pondue par mes soins un jour de repos !) qui permet d’afficher le contenu caché sans avoir à rejoindre quoi que ce soit.

La ligne en question la voici :

javascript:spans=document.getElementById("tab_canvas").getElementsByTagName("span"); for(var sp in spans){spans[sp].style.visibility="visible"}

Pour que cela fonctionne il faut que vous soyez sur l’onglet de la page qui contient le contenu caché. Souvent il s’agit du premier onglet à être ouvert quand vous cliquez sur un lien. Ensuite vous avez deux solutions : la copier/coller dans la barre d’adresse à la place de l’url et valider avec la touche entrée comme si vous veniez d’entrer une réelle url. Ou, plus simple, ajouter un favoris dans votre navigateur dont l’adresse serait cette fameuse ligne. En plaçant le favoris dans la barre personnelle de Firefox par exemple vous n’aurez plus qu’à cliquer sur le bouton pour que le contenu de la page se mette à jour en direct.

Comment et pourquoi cela fonctionne

Le principe de ces pages est très simple : le créateur ajoute un onglet à sa page pour y faire figurer son contenu et décide de n’afficher le contenu qu’aux membres en le cachant aux autres dans un bête <span> caché par la propriété CSS visibility:hidden. Partant de là il suffit de parcourir tous les spans de la page affichée et de transformer la propriété visibility:hidden en visibility:visible.

Bien sûr cette méthode ne fonctionne que pour les balises <span> et uniquement si celles-ci ont été cachées en utilisant la propriété visibility. Mais jusqu’à présent je n’ai pas trouvé une seule page sur laquelle cela ne soit pas fait comme cela.

Petit conseil aux super développeurs qui ont pondu un concept du genre : utilisez des <div> ou d’autres balises et les propriétés display ou opacity pour continuer à ferrer du pigeon ! Et quand ça ne suffira plus il faudra songer à cacher le contenu côté serveur et à le faire apparaître en Ajax ^^

Retrouver le créateur d’une fanpage sur Facebook

Cette méthode ne fonctionne plus et je n’ai pas de solution à vous proposer sur la nouvelle version de facebook.

Je sais j’écris beaucoup à propos de Facebook ces derniers temps. Mais là j’ai trouvé un truc assez intéressant pour retrouver le créateur d’une page fan sur le réseau social le plus utilisé du moment.

Je vous préviens tout de suite, la technique est assez compliquée et implique de trifouiller un peu plus que d’habitude.

L’idée est assez simple à la base : lorsque l’on affiche la liste des fans d’une page, ceux-ci sont affichés par ordre d’inscription – les derniers inscrits étant affichés en premier. Aussi, en toute logique, le créateur de la page doit-être le dernier de la liste aka le premier inscrit.

Lorsque la page n’a qu’un faible nombre de fans il est assez simple de tous les parcourir à la main – Mais si l’on s’attaque à un sujet hautement intellectuel tel que « Obliger un agent de la SNCF à travailler et le regarder pleurer » (exemple pris au hasard parmi les derniers statuts de mes amis facebook), on ne va pas s’amuser à parcourir xx pages à la main.

De quoi a-t-on besoin ?

Pour trouver cette astuce je me suis basé sur Firefox ainsi que deux de mes extensions préférées : Tamper Data et Firebug.

Avec Tamper Data on va modifier la requête envoyée par Facebook pour choisir d’afficher la dernière page – ceci va générer un bug et les données, bien que transmises, ne seront pas affichées – il faudra donc les lire à l’aide de Firebug.

Tamper Data

Tamper Data permet de modifier tous les paramètres d’une requête envoyée au serveur – qu’elle soit synchrone ou asynchrone. Cette extension est très pratique pour faire des essais en Ajax et avait déjà été utilisée dans un précédent hack qui permettait de visionner tous les profils Facebook, qu’ils soient publics ou non. Télécharger

Firebug

Je n’ai même pas envie de présenter cette extension tant vous auriez tort de ne pas déjà la connaître ! En l’occurrence elle va nous servir à analyser le retour d’une requête Ajax que le script côté client a du mal à rendre… C’est pas grave, on est plus fort que Chuck Norris, on lit directement le code source ! Télécharger

Continuer la lecture →

Redimensionner plusieurs éléments du DOM en jQuery

Je vois souvent la question se poser un peu partout sur le web : avec cette manie (bonne manie, mais manie tout de même) de structurer les pages à grand renforts de <div> (en y ajoutant le plus souvent la propriété float) là où nos ancêtres (ou juste nous il y a quelques années) utilisaient une grande quantité de <table>, les présentations en plusieurs colonnes souffrent d’un défaut majeur : elles n’ont plus nécessairement la même longueur.

Il existe un certain nombre de solutions pour remédier à cela. Celle que je vous propose aujourd’hui se base sur un bête code javascript (ignoré des Serps donc, mais peu importe vu qu’il s’agit de mise en page) et plus précisément sur du jQuery.

L’idée est d’attribuer le même nom de classe à tous les éléments du DOM que l’on veut voir de la même taille et ensuite d’appeler, à la fin du chargement de la page, une fonction javascript qui va redimensionner tous les éléments correspondants à un sélecteur jQuery que l’on basera sur la fameuse classe ajoutée à tous les éléments à redimensionner.

L’avantage, par rapport aux autres solutions, est qu’elle ne nécessite presque aucun code supplémentaire et par conséquent, que l’on garde la logique sémantique de la page. Et, après tout, c’est là tout le but de l’abandon des <table> au profit des <div>.

Trêves de blabla, voici le code javascript, à ajouter de préférence dans un fichier séparé :

function redimensionner(selecteur){
var hauteur=0;
$(selecteur).each(function(){
if($(this).height()>hauteur) hauteur = $(this).height();
});

$(selecteur).each(function(){ $(this).height(hauteur); });
}

Il suffira ensuite d’appeler, au chargement de la page, ladite fonction en lui passant en argument le sélecteur jQuery qui matche nos éléments à redimensionner. Le code se chargera de déterminer la taille du plus grand élément et de mettre les autres à l’échelle.

Concrètement, il vous faudra ajouter le morceau de code suivant :

$(document).ready(function(){
redimensionner(‘div.toSize’);
});

Pour redimensionner tous les <div> ayant la classe toSize à la taille du plus grand de ces éléments. Pour plus de détails sur les sélecteurs jQuery, je vous renvoie à l’excellente doc en ligne.

Créer et installer un outil pour surveiller le passage de Google sur son site

Il peut être utile, dans bien des cas, de surveiller l’activité de notre cher Google (ou de ses amis SERPs divers et variés) sur son(/ses) sites. Pour ce faire je n’ai pas trouvé mieux qu’un outil, fait maison et installé sur la quasi-totalité de mes sites.

Comme je ne suis pas avare de mes idées je vais vous détailler un peu le fonctionnement dudit outil et vous en donner les sources afin que vous puissiez l’installer éventuellement sur votre site.

Se baser sur l’user-agent

Comme souvent quand on cherche à définir un comportement spécifique pour un type de visiteur particulier il suffit de se baser sur le user-agent de celui-ci. Pour rappel le user-agent d’un navigateur (ou d’un bot d’ailleurs) est une chaine de caractères qui identifie l’outil utilisé pour accéder à un site.

En PHP on peut le récupérer simplement avec la variable super globale $_SERVER et plus précisément avec $_SERVER[‘HTTP_USER_AGENT’].

Par exemple, si vous utilisez Firefox 3.6 sous Windows le user-agent envoyé à tous les sites que vous visitez sera : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.2) Gecko/20100115 Firefox/3.6

A partir de là, et sachant que chaque Crawler (les bots qui visitent inlassablement le net pour indexer le contenu) utilisent des user-agent bien connus il est simple de les surveiller.

Continuer la lecture →

Corriger le bug de l’extension firefox LongURL

Si vous utilisez twitter ou si vous surfez régulièrement sur des forums, vous êtes forcément tombé sur des liens «réduits». C’est d’ailleurs un service que je propose avec mon réducteur d’url : Yoplink.

Sauf que parfois on veut savoir sur quoi on clic, avant de cliquer. Ne serait-ce que pour éviter de se faire rick-rolled…

C’est là qu’intervient la superbe (oui je pèse mes mots) extension firefox LongURL Mobile Expander.

Sauf que depuis la dernière mise à jour, lorsque vous ouvrez un fichier local ou que vous allez sur un site local (http://localhost par exemple) vous avez le droit à une superbe erreur javascript à peine gênante :

Error: current_domain is null

La bonne nouvelle c’est que j’ai réussi à isoler la source du problème (la fameuse extension LongURL Mobile Expander) et que, du coup, j’ai corrigé quelque peu cette extension pour qu’elle continue à fonctionner sans pour autant m’empêcher de bosser en local…

Pour cela il suffit de chercher le dossier de l’extension dans votre profil firefox. Sous Linux par exemple :

cd
cd .mozilla/firefox/s54sdf454.default/extensions
rgrep -iFlr « longURL » .

Où s54sdf545.default est votre dossier de profil. Si vous ne savez pas ce que c’est, j’ai une bonne nouvelle : vous ne devriez en avoir qu’un.

Grâce à ces commandes vous devriez avoir retrouvé le dossier d’installation de l’extension. Il vous suffit ensuite d’ouvrir le dossier et d’éditer le fichier content/script-compiler.js

Juste avant la ligne 101 de ce fichier (alert(e2);) vous allez rajouter la condition suivante :

if(e2!= »Error: current_domain is null »)

Ce qui donnera :

if(e2!= »Error: current_domain is null »)
alert(e2);

En gros : si l’erreur est celle qui nous embête : on ne l’affiche pas !

Il suffit ensuite de redémarrer firefox, et d’apprécier la différence !