NeoSting.net » bouton

Le Clickjacking, la fraude au référencement ? #Actualité #NeoSting

NeoSting — Thu, 02 Jun 2011 20:39:34 +0000

Il y a quelques jours, le nouveau bouton Twitter apparaissait. Celui-ci permet en fait et simplement de proposer aux internautes de venir vous suivre. Un bouton, qui pour ma part n'a pas vraiment beaucoup d'intérêt, puisque celui-ci peut être réalisé soi-même avec un simple lien html et un peu de css ; ce qui évite en passant, d'alourdir ses pages inutilement. Google, ensuite, lui a emboîté le pas, avec son bouton +1. Celui-ci a tout de même beaucoup plus d'intérêt, puisqu'il revêt une fonction sociale de recommandation et qu'il permet (probablement) à Google de prendre en compte dans son algorithme, les pages et les sites que les internautes aiment le plus.

Seulement, avec le succès incontestable de ses services par l'intermédiaire de ces boutons relais, de petits malins pourraient être tentés de vous inciter plus que fortement à cliquer sur ces boutons pour gagner en référencement et en "popularité", et ce, contre votre gré. C'est ce qui s'appelle le clickjacking. Littéralement, on vient vous voler un clic. J'ai eu l'occasion de voir ça, parfois sur certains sites pas très honnêtes proposant des vidéos. Pour les voir, en cliquant sur le bouton PLAY, vous ajoutiez alors automatiquement un "j'aime" sur le compte ou la page facebook cible. la même méthode est appliqué pour ouvrir des pages publicitaires à votre insu.

Ici, nul doute que sans vous en rendre compte, vous allez finir par donner aussi, avec cette méthode, de nombreux points à des sites, eux non plus pas très honnêtes. La question que l'on peut se poser c'est : si Google avec son PlusUN (+1) prend en compte le nombre de votes dans son algorithme, que va-t-il advenir du référencement "naturel" des sites qui ne pratiquent pas cette méthode frauduleuse ?

Le clickjacking, ce n'est quand même pas nouveau, mais avec Google, il pourrait devenir un véritable fléau si la firme ne trouve pas rapidement une solution. Toutefois, nul doute que la firme saura rapidement repérer les abus et prendre les mesures qui vont bien.

P1erz, sur son site SERPHacker, vous fait même la démonstration pour vous montrer comment ça fonctionne et vous faire voir à quel point ça marche bien. Il a commencé par le faire sur le nouveau bouton Twitter, et en a profité pour faire subir exactement le même sort au bouton Google. Avec un petit peu de javascript, qui permet de compter le clic, et qui permet aussi d'adapter le niveau de transparence dudit bouton, vous n'y verrez que du feu. Dans ses exemples, vous voyez encore un peu les boutons, mais avec une totale transparence, ce ne sera bien sûr plus le cas.

Partager ça sur Twitter.
Article rédigé sur le blog de NeoSting à cette adresse.

Articles en relation :

Lancement officiel du bouton +1 de Google #Actualité #NeoSting

NeoSting — Wed, 01 Jun 2011 19:58:37 +0000

Ce sera le petit cadeau de Google en ce 1er juin 2011, un cadeau social pour tout le monde qu'il faudra surement marquer dans les annales de la firme. Comme annoncé sur son blog officiel (en anglais), il est désormais possible pour tous les sites et blogs d'ajouter le fameux bouton +1 servant à recommander aux autres ce que vous aimez.

Pour l'insérer dans votre site / blog c'est là. il faut copier coller une partie du code entre les balises HEAD et une seconde petite partie là où vous voulez le voir apparaître. Pour le moment 4 formats sont disponibles, avec le compteur qui va bien. Une fois cliqué sur ce bouton, une popup s'ouvrira (la première fois) pour vous signaler (en gros) que vous allez rendre public votre recommandation.

Ce bouton est bien sûr un moyen idéal pour Google de toujours mieux cerner ce que vous aimez, et ainsi vous bombarder de publicités ciblées. C'est de bonne guerre, n'est-ce pas ? Il servira aussi à recommander ce que vous aimez à vos amis qui sont en contact avec vous. Il est aussi fort probable que ces recommandations finissent par se ressentir directement sur ses résultats de recherches. En effet, ceux qui ne le mettent pas sur leurs sites se verront surement - et logiquement - pénaliser dans les résultats de recherche sur le long terme. En tout cas, ce sera forcéement une nouvelle donnée à prendre en compte dans sa recette secrète de son algorithme. Une manière aussi et indirectement de forcer les webmasters et les influents à l'insérer et à le populariser.

Si vous voulez un équivalent d'un bouton j'aime pas ou "-1", vous pouvez aussi utiliser cette extension officielle de Google afin de faire disparaître les mauvais sites des résultats de recherches.

La belle vidéo promotionnelle

Faut-il le mettre ce bouton ?
Bien, si vous avez inséré le bouton j'aime de facebook, vous n'êtes vraiment plus à ça près, non ?

Partager ça sur Twitter.
Article rédigé sur le blog de NeoSting à cette adresse.

Articles en relation :

Tous vos favoris dans un seul bouton avec Google Chrome #Aides et Tutoriels #NeoSting

NeoSting — Mon, 02 May 2011 12:07:06 +0000

Vous utilisez Google Chrome, comme navigateur Internet ? Je dois avouer que vous n'êtes pas le seul. Je suis dans ce cas, même si je préfère nettement la philosophie de la fondation Mozilla avec son Firefox. Passons.

Vous utilisez et affichez la barre des favoris de Chrome / Chromium dans laquelle vous collectionnez de nombreux sites, et vous ne pouvez pas vous défaire de cette habitude ? Mais vous aimeriez bien aussi réduire cette barre de navigation à sa plus simple et stricte apparence, pour ne pas perdre bêtement de la hauteur ? Puis, il faut avouer, c'est pas très sexy non plus...

J'ai ce qu'il vous faut : une petite extension au doux nom de Neat Bookmarks, et réalisée par cheeaun. Elle va installer un nouveau bouton et va vous afficher tous vos favoris (en cliquant dessus) dans une petite fenêtre. Du coup, vous les aurez que lorsque vous en aurez vraiment besoin et vous éviterez le raccourci clavier. Toutes les options habituelles pour éditer, effacer, ouvrir dans un nouvel onglet sont là. Le clic droit fonctionne aussi parfaitement sur les favoris.

Bon à savoir : si vous voulez chercher uniquement au sein de vos favoris un site, vous pouvez le faire via la Omnibox (la barre à tout faire de Chrome) en tapant * et espace suivi de votre mot clé.

Merci / image

Partager ça sur Twitter.
Article rédigé sur le blog de NeoSting à cette adresse.

Articles en relation :

Un bouton Send sur Facebook ? Mais pourquoi faire ? #Actualité #NeoSting

NeoSting — Sun, 01 May 2011 21:48:11 +0000

Cela fait quelques jours maintenant que le buzz est passé. Un buzz ? Celui du fameux et nouveau bouton "Send" sur facebook qui est récemment apparu (en test) comme une seconde option de partage en parallèle de celui du bouton "j'aime". Cette seconde option, du plus grand réseau social mondial, ne propose toujours pas la fonction du tant attendu "j'aime pas". Au contraire, même, elle permet d'envoyer, de cibler, et de partager les informations intéressantes seulement et uniquement à des groupes restreints ou à une personne en particulier. Exit donc l'envoi massif de spams involontaires dont tout le monde se fiche, ce qui n'est pas un mal.

Mais finalement, ce bouton, qui apporte une certaine flexibilité, ne sera surement pas un reflex pour tout le monde. Le problème, c'est que pour qu'il soit efficace, il faut connaître vraiment toutes les personnes qui vous suivent, et connaître surtout leurs goûts. J'ai alors imaginé un petit scénario qui vaut ce qu'il vaut, et que mon ami et talentueux Kreiion s'est chargé de retranscrire au travers de cette BD. Alors, quelle utilisation et quelle véritable utilité peut avoir ce nouveau bouton "Envoyer" ? J'ai peut-être mon petit élément de réponse...

Image et surtout la BD de Kreiion

Partager ça sur Twitter.
Article rédigé sur le blog de NeoSting à cette adresse.

Articles en relation :

Installer un bouton twitter officiel + wordpress #Aides et Tutoriels #NeoSting

NeoSting — Fri, 13 Aug 2010 11:31:14 +0000

Twitter progresse. Depuis hier, le petit oiseau bleu apporte son nouveau et propre bouton officiel à disposer sur son site afin de permettre aux visiteurs de partager ses articles directement sur les branches du net. Son petit plus, par rapport à une version classique, apporte la possibilité de le configurer un peu plus en profondeur. Que vous le vouliez en version horizontale, verticale, avec votre propre raccourcisseur d'url, tout ou presque est possible grâce à son API.

Même si, je suis assez fan d'une version ultra classique comme celle décrite dans ce tutoriel, le fait que ce soit officiel et avec un compteur de (re)tweet peut faire la différence. Enfin, même si c'est négligeable, ce bouton fait forcément appel un du javascript, ce qui pourrait ralentir un peu l'affichage de votre blog.

Mais vous connaissant, je suis sûr que vous êtes venu pour savoir, justement comment le modifier en profondeur, ce bouton. Pour ma part, je choisirais volontiers la version avec les modifications "data", mais je ne peux que vous conseiller de vous reporter à cet excellent article de Twoutils.

Voici tout de même une version d'un bouton compatible avec wordpress réalisé à la volée. le principe est simple : dans la balise de lien HTML A, il suffit d'ajouter les options DATA

<a href="http://twitter.com/share" class="twitter-share-button"
data-url="http://neosting.net/"
data-via="NeoSting"
data-text="Installer un bouton twiiter officiel"
data-related="twitter,button"
data-count="vertical"
data-lang="fr">Tweeter</a>

Il faudra ensuite ajouter tout en bas du code de son blog, pour ne pas gêner son chargement, l'appel du javascript.

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Pour que le bouton soit générique dans son thème WordPress, on mettra plutôt

data-url="(); ?>"
data-text="(); ?>"

Si vous voulez utiliser votre propre raccourcisseur d'url, vous avez déjà probablement installé Simple URL Shortener, qui au passage, crée un cache pour ne pas avoir à reconstruire une nouvelle URL à chaque lecture d'un article.

 $permacourt = simple_url_shortener('','service=VOTRESERVICE+key&apikey=VOTRECLE&login=VOTRELOGIN'); ?>
/* On écrira comme DATA */
data-url=" echo $permacourt ?>"

Ça devrait fonctionner, mais si ce n'est pas le cas, n'hésitez pas à le faire savoir.

Partager ça sur Twitter.
Article rédigé sur le blog de NeoSting à cette adresse.

Articles en relation :

Modifier et déplacer le bouton orange de Firefox #Logiciels #NeoSting

NeoSting — Sat, 10 Jul 2010 18:45:52 +0000

Vous venez de tester la version 4 Beta 1 de Firefox ? Vous avez même fait les premières manipulations pour obtenir le fameux nouveau bouton orange, mais vous le trouvez extrêmement mal placé, comme tout le monde ? Encore mieux, vous voulez aussi le modifier pour lui appliquer de la transparence et un changement de couleur ? Et bien sachez que c'est possible ! Voici donc un petit hack qui devrait remédier à ces quelques lacunes, simplement grâce aux feuilles de style !

Reste à espérer que Mozilla prenne en compte dans ses futures versions les attentes de ses clients, car face à Chrome, la fondation va avoir du mal redonner l'envie de revenir à son navigateur à ceux qui ont migré d'impatience..

Le tutoriel

Trouvez le fichier userChrome-exemple.css dans votre profil

Vous pouvez chercher ce fichier dans votre système. Les parties en gras ne seront pas les mêmes. Il se peut aussi que votre dossier de profil ne soit pas tout à fait là, si vous avez d'anciennes versions installées. Faites un test puis redémarrez Firefox. Mon profil était dans cet emplacement :

C:\Users\pseudo\AppData\Roaming\Mozilla\Firefox\Profiles\twpupghg.default\chrome

Copiez-le sur le bureau et modifiez cette "nouvelle" version en ajoutant ceci (avec notepad ou un éditeur) :

#appmenu-button-container{
position: fixed !important;
}
 
#appmenu-button{
padding: 3px 18px 3px 18px !important;
margin-top:3px !important;
background-color: rgba(54, 121, 166, 0.2) !important;
}
 
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 95px !important;
}
 
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 105px !important;
padding-top:1px !important;
padding-right:98px !important;
}

Sauvegardez votre fichier en le renommant userChrome.css dans le dossier de votre profil

Il est à noter que si sous Windows, vous utilisez l'interface classique, à la "Windows 2000", alors le bouton de firefox est automatiquement placé sur la même hauteur que les onglets, placés aussi en haut. Mais, avec l'interface Aéro, ce n'était pas le cas d'où ce hack. Désormais, avec, il va placer ce bouton sur la même hauteur, lui appliquer de la transparence, des marges et une autre couleur.

Si vous vous y connaissez un peu en CSS, vous pouvez modifier vous-même les marges (MARGIN) autour du boutons en pixels. Pour la transparence, c'est le dernier chiffre entres parenthèses (ici, 0.2). Pour la couleur, c'est au même endroit (les 3 chiffres avant exprimés en RGB - max. 255)

Puisque c'est si simple à modifier, il faudrait qu'une extension soit créée afin de proposer différents modèles tout en permettant de le modifier à sa convenance via des options à remplir dans une interface GUI. Enfin, sauf si Mozilla reprend cette grave erreur de placement.

source et code

Partager ça sur Twitter.
Article rédigé sur le blog de NeoSting à cette adresse.

Articles en relation :

Faire un bouton pour twitter avec le choix du service d’URL #Aides et Tutoriels #WordPress #NeoSting

NeoSting — Tue, 01 Dec 2009 19:06:13 +0000

Je vous en avais déjà parlé ici, et je vous avais expliqué comment créer ce genre de bouton, mais j'avais choisi un raccourcisseur, certes, connu, mais qui n'optimise pas le nombre de caractères utilisés, et qui, par la même occasion, envoyait une requête à chaque demande d'envoi.

J'ai donc voulu palier à ces deux petits problèmes. En effet, chaque utilisateur de Twitter sait à quel point 140 caractères peut vite s'avérer facile à atteindre. Côté optimisations, vous allez voir qu'on ne peut guère faire mieux puisque le plugin que je vous présente ici, propose à la fois un système de cache, mais en plus, nous donne le choix quant au service à utiliser. L'avantage du cache, c'est qu'il évite de redemander (par le biais de vos lecteurs qui cliquent) à créer les urls déjà raccourcies.

Ce plugin, c'est Simple URL Shortener de David Artiss (Blog, twitter), dont voici son post officiel.

Comment ça marche ? C'est vraiment simple, mais sachez que vous n'aurez aucune gestion possible du plugin depuis votre interface privée de WordPress. En fait, comme d'habitude, vous vous contentez de télécharger son plugin, et de l'installer comme les autres (copie, activation). Ensuite, voici ce qu'il faut faire : dans votre thème, où vous voulez voir apparaitre votre bouton, vous appelez la fonction qui va bien avec deux arguments (dont un obligatoire) à donner :

 echo simple_url_shortener('urldelarticle','service'); ?>

Sachez que ne rien mettre en premier forcera le plugin à utiliser l'adresse de la page en cours ; un très bon moyen de tout automatiser. Ensuite, dans le second paramètre, il faut juste mettre le nom du service parmi la liste suivante :

a.gd -> ndlr : à éviter
a.nf
buk.me
bit.ly
chilp.it
li.gs
fwd4.me
hex.io
is.gd
idek.net -> ndlr : à éviter
j.mp
kissa.be
pic.gd
r.im
safe.mn
sai.ly
short.to
sl.ly
su.pr
tinyurl
tr.im
u.nu
unfake.it
vtc.es
xr.com -> ndlr: à éviter
zz.gd

Comme un exemple vaut mieux qu'un long discours, voici un lien qui balancera votre article sur twitter :

 the_title('', ' '); echo simple_url_shortener('','u.nu');?>">Tweeet

Enfin, pour créer le bouton autour du simple lien, il faut aller faire un tour du côté des feuilles de style. Dès lors, les solutions sont nombreuses pour obtenir un peu ce que l'on veut. Sur l'exemple précédent, on appelle la classe bouton dans laquelle on définira l'image de fond, la bordure, la taille, etc.

Si vous avez des soucis, ou des remarques à faire, les commentaires sont ouverts !

Partager ça sur Twitter.
Article rédigé sur le blog de NeoSting à cette adresse.

Articles en relation :

Bouton pour Tweeter un article avec TinyURL #Aides et Tutoriels #WordPress #NeoSting

NeoSting — Mon, 16 Mar 2009 01:52:51 +0000

Bien, bien, en ces temps d'incertitudes sur la liberté des droits d'auteurs, cf cet article, où même la gratuité est remise en cause par notre propre ministre des finances ; imaginons un peu les dérives de cette loi ici, je vais vous expliquer comment insérer un petit bouton simple, qui va permettre de proposer à vos lecteurs de tweeter vos articles très facilement.

On va de plus lui faciliter la tâche puisque le lien sera automatiquement mis en adresse raccourcie sous la forme TinyURL, grâce à un plugin WordPress.

Je dois quand même remercier John pour m'avoir ouvert la voie des sages.

Le plugin servant comme vous pouvez le voir en bas de chacun de mes articles à créer une adresse raccourcie sous la forme d'une TinyURL se trouve chez Brajeshwar ou bien encore dans le Plugin directory ici.

L'installation est une formalité, passons aux choses sérieuses. La fonction qui donne la nouvelle adresse s'appelle de la manière suivante. A vous de la rendre jolie en l'entourant comme il faut dans un lien, afin de permettre à vos visiteurs d'avoir à faire juste un clic droit pour copier le lien (attention copier, n'est pas jouer, et c'est illégal !)

 TinyLink(); ?>" title="description du lien">
Lien super court TinyURL de l'article trop long

Si vous préférez afficher clairement le lien en entier, il suffit juste de mettre à la place du texte la même fonction mise dans la balise href="...."

Bien, vous allez me dire, oui, mais je m'en fou, je veux mon bouton pour tweeter sur twitter ! Ok, c'est bon, voici comment faire. La méthode est la même qu'au dessus, le code à écrire est de cette forme :


 TinyLink(); ?>" target="_blank" >
Tweetez-moi

Voilà, ici, on propose un simple lien, qu'on pourra décorer avec les CSS pour en faire un joli bouton qui déchire. On prévient que le lien sera ouvert dans une nouvelle fenêtre avec target="_blank", et dans la création du lien après status= on met ce que l'on veut dans la limite de 140 caractères, en n'oubliant pas de rappeler à nouveau notre fonction Tiny qui mettra l'adresse de l'article en mode "pas long parce que sinon j'ai plus de place pour écrire"

A la place du texte, rien ne vous empêche de mettre une image, mais je préfère arrêter là, parce que sinon ça va vous couter trop cher, avec les img src="..." alt="..." / à déclarer.

Afin de ne pas avoir de problème, je vous demande de bien vouloir passer en caisse chaque fois que vous lirez cet article, et n'oubliez pas que si vous recopiez plus de 5 caractères de ce code, il faudra rajouter un supplément afin que je puisse redistribuer à tous les ayant-droits ce qui leur revient. Bon, là, j'avoue, je ne sais pas où vous allez, mais pensez à relever la tête parce que d'une vous n'êtes pas à un coureur, et de deux, vous risquez de ne pas voir le mur...

La caisse est ici : la somme est à payer par Paypal. Merci de votre soutien !

Partager ça sur Twitter.
Article rédigé sur le blog de NeoSting à cette adresse.

Articles en relation :