Astuce pour afficher des vignettes (thumbnails ou browser screenshots en anglais) sur ton site

En Août 2017

Visitez Mon Site
Cet article a été lu 123 fois avant toi... Il y a eu 213988 visiteurs sur le blog depuis qu'il existe.
vignettes de site

=> Le catalogue de toutes mes vidéos exclusives !

Salut,

si tu cherches un moyen gratuit d'afficher des vignettes de pages web (browser screenshots ou thumbnails) tu vas galérer car tous les services sont payants, leur version limitée est vraiment trop basse (du style 100 ou 1000 nouvelles urls par mois) avec des watermarks sur les images ou pire certains ne font que le nom de domaine ou sous domaine, pas les pages.

Bref, après avoir cherché, shrinktheweb, robothumb, browsershots, browshot, screenshotlayer, url2png, urlbox.io, screenshotmachine, thumbalizr, snapito, etc... finalement il y a wordpress qui laissent leur outil en libre service gratuitement, depuis plusieurs années déjà, et il est très simple à utiliser :

=> Affiche ton lien sur toutes les pages de mes sites y compris celui-ci !

Pour composer l'url de l'image en HTML il faut juste mentionner le service :

https://s.wordpress.com/mshots/v1/

=> La façon la plus simple de gagner de l'argent en affiliation !

puis y ajouter l'url de la page qu'on veut afficher (urlencodée)

puis y ajouter au minimum ?w=XXX pour la largeur de la vignette, il calcule la hauteur pour un format 4x3, on peut ajouter un parametre h pour varier un peu, par exemple faire du 16/9

Donc au final en php :

$url = 'http://www.forttrafic.com/astuce-pour-afficher-des-vignettes-thumbnails-ou-browser-screenshots-en-anglais-sur-ton-site'; // l'url de la page que je veux afficher
$imglink = 'https://s.wordpress.com/mshots/v1/'.urlencode($url).'?w=800'; // si on veut la hauteur on ajoute &h=XXX
echo '<img src="'.$imglink.'" alt="le blog forttrafic.com">';

=> Des milliers de produits numériques ici !


Voilà ce que ça donne :

 

=> Mon Club Affiliation Facile pour Affiliés et Vendeurs 1TPE !

L'image est en JPG (environ 100ko pour du 800x600) et avec un cache navigateur de 12 heures, je ne sais pas quel est la durée de leur cache serveur, mais bon c'est déjà très bien comparé à ce qu'on trouve en gratuit en cherchant un peu partout.

Et oui si on veut faire une vignette au format 16/9 et ben on ajoute l'argument &h=XXX (on calcule soi-même pour du 800 ca donne 450 en hauteur, voilà le résultat :

=> Vends ces 10 Ebooks, tu peux les modifier comme tu veux !

Allez pour montrer que ça marche bien en petit aussi, du 200x150 (sans mettre l'argument h) :

Et du 16/9 (ca donne 200x112,5 donc 112 ou 113 au choix)

=> Ma Formation en Webmarketing

Voilà c'est tout, A+

PS: en fait c'est pas tout..

Voilà un truc à ajouter dans le code de ton image afin que la vignette soit bien affichée la première fois :

<img id="mshots" onload="setTimeout(function() { var monimage = document.getElementById('mshots'); monimage.src = monimage.src + '&rand=' + Math.random(); monimage.onload = null; }, 7000);" src="blablabla">

Voilà je pourrais t'expliquer pourquoi mais bon.. Disons que la première fois que le service de wordpress rencontre une nouvelle url il affiche une image noire qui dit "Generating Preview..." et donc pour éviter ça, je recharge l'image 7 secondes après, comme ça la bonne vignette est affichée même si le service de wordpress n'a pas encore généré la vignette.. L'image noire s'affiche 7 secondes et puis elle est remplacée par la bonne vignette.

Allez cette fois A+ de toutes façons si tu as vraiment une question sur le sujet tu peux me contacter, je ne vais pas écrire un roman pour rien si ça n'intéresse personne.

J'aimerais bien que tu cliques sur ces boutons, parce que ça apportera plus de gens sur mon blog, merci :

Et si tu me laisses ton email, je peux t'aider avec ton blog/site...

Enfin, les commentaires Facebook si tu veux spammer ou poser une question :-)