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

En Octobre 2018

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

=> Mon patron, c'est Internet !

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.

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

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 :

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

=> Comment créer une boucle virale sur internet...

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

=> Je partage 20% de mes commissions affilié 1TPE

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">';


Voilà ce que ça donne :

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

 

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

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 :

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

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

=> L'affiliation 1TPE sous stéroïdes !

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

=> Des milliers de produits numériques ici !

Voilà c'est tout, A+

=> Ma Formation en Webmarketing

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