Astuce “Webmarketing” Facebook - Simuler un partage vidéo avec un lien
Je partage avec vous, une petite astuce à laquelle j’ai pensé et que j’utilise pour un site de vidéo qui a une page sur Facebook. Cette astuce vous permettra, de générer un peu de trafic supplémentaire et ce simplement, avec Facebook.
Note : Pour le titre de cet article si vous avez une autre idée je suis preneur j’ai eu du mal à trouver autre chose que… “webmarketing” qui par définition colle plus ou moins à la thématique de l’article…
Si vous comptez vous servir de cette astuce ou si vous trouvez ça.. inutile dites le en commentaire votre avis m’intéresse toujours !
Pourquoi ?
Les biens fait de cette astuce Facebook :
- Les utilisateurs de Facebook sont férus de vidéos et sont plus tenté de regarder une vidéo en restant sur FB (grrr) qu’en sortant du site via un lien.
- Ils sont (Nous sommes) habitués à avoir la petite vignette cliquable qui affiche la vidéo en player Facebook
- Il n’y a quasiment aucune différence entre une vidéo cliquable et lisible directement sur Facebook et le partage de lien avec cette astuce
- Nous développeur on aime (ou pas) Facebook parce qu’il fait trop de choses (des fois dans notre sens des fois non), et il est parfois bon de pouvoir récupérer par le biais de quelques “erreurs” (ici des similitudes notoires, entre deux types de partage) des visiteurs.
- Bah pourquoi pas ? Si vous avez un avis contraire sur la question je suis preneur (hormis le fait que ce type de lien peut vite blaser les utilisateurs parce qu’ils se sentent trompés…)
- Pour les vilains : Cette astuce est réutilisable pour des pages ne proposant aucune vidéo suffit juste d’avoir une image a montrer avec un bouton Play
Comment ?
Nous allons ici nous intéresser à deux types de partages :
- Les vidéos
- Les liens
Les vidéos sont bien souvent partagées depuis des sites comme YouTube, Google vidéo et compagnie. Facebook mange ces vidéos pour les intégrer dans son propre player et devient donc hébergeur. Son système assez bien fait lorsque l’on partage une vidéo qui est déjà intégré dans Facebook (autrement dit qui a déjà été mangée). En effet, si le lien viens de site hébergeur de vidéo connus, Facebook appose une miniature à gauche du texte et titre descriptif de la vidéo (même si cette vidéo n’est pas hébergée par FB).
Ci-dessous deux exemples de vidéos visible au clic :
Et voici le résultat obtenu en partageant un lien non sponsorisé, avec un simple bouton sharer Facebook, que vous mettez sur les pages de vos sites. Ca donne vraiment l’impression que si l’on clique sur l’image un player va se lancer dans Facebook… alors que l’utilisateur va être redirigé sur votre site (url) 
Et techniquement parlant ?
Vous l’aurez surement déjà tous compris cette astuce est simplissime à mettre en place. Lorsque l’on publie un lien sur facebook, le système va chercher automatiquement les images de la page et les proposer en miniature (thumb) vous devez donc placer une image (que vous aurez créer) le plus haut possible dans la page pour qu’elle soit la première. En effet si un utilisateur autre que vous partage ce lien, il ne prendra surement pas le temps de changer l’image si la première n’est pas la bonne ! Il faut donc que cette vignette soit la première.
Je partage de bon coeur avec vous un fichier zip contenant :
- 1) Un fichier vectoriel
- 2) Le bouton play seul en Png
- 2) Le “patron” aux bonnes dimensions avec fond png transparent de la vignette
Le vectoriel qui va vous permettre simplement de créer les miniature vidéo Facebook, pour cela vous pouvez utiliser inkscape, et utiliser la profondeur de champs pour faire passer le bouton par dessus votre image. Ensuite selectionner le noir qui sera derrière l’image puis exporter la selection. Les png qui sont utilisable avec n’importe quel logiciel de graphisme. La taille de la miniature ne peut être changée en effet facebook limite la largeur de ces miniature pour lien ainsi toute déformation du “patron” sera pénalisante pour son affichage.
>>TELECHARGER LE ZIP (via la plateforme google code imagika)
Récapitulatif :
- Prendre un screen du player vidéo ou de n’importe quelle image
- La copier/coller dans un éditeur graphique (inkscape si vous utilisez mon fichier Vectoriel)
- Mettre le bouton play par dessus l’image à la position qu’il a sur le vectoriel
- Exporter le carré de dimenssion 130*97 (L*H)
- l’uploader sur votre site
- Le mettre le plus haut possible dans le HTML (ou tout du moins en première image)
- Le mettre en “display:none” pour qu’il ne soit pas visible sur le site (éviter de mettre un alt
c’essst pas bien) - Facultatif : Utilisez votre robots.txt pour bloquer l’indexation des images d’un dossier spécifique ne contenant que ces miniatures par exemple : http://mickaelbertrand.imagika.fr/web/protectiondesimages-empecher-lindexation-des-images-par-google-1191
Voilà il ne vous reste plus qu’à partager votre lien via : http://www.facebook.com/sharer.php?u=MONURL
Mon Twitter : http://twitter.com/mbimagika
Le Rss du blog : http://feeds2.feedburner.com/MickaelBAlexandreBlog
A bientôt !
Blog Référencement (SEO), Graphisme, Web, Communication et compagnie…
août 24th, 2009 at 17:58
[...] pas a critiquer/commentez cette Astuce Facebook. Aucun tag pour cet articleNEW CALLS FOR PROJECTS SOON AVAILABLE Pendant la fermeture des bureaux [...]
septembre 2nd, 2009 at 11:45
Bonjour, cela est interessant, mais le plus interessant serait d’intégrer directement ton player dans la page facebook, je sais que c’est fesable, mais je ne sais pas comment, si vous avez une idée
septembre 2nd, 2009 at 12:15
On a pas la même vision des choses ou le même but ^^
Mon but n’est pas simplement de générer une vidéo à partir d’un lien mais de générer des visites sur un site ! Le fait d’intégrer la vidéo sur FB est totalement contraire au but même de l’article
Oui tu peux mettre ton lecteur, mais il faut avoir un lecteur flash perso et/ou uploader une vidéo au format vidéo accepté par la plateforme FB.
novembre 24th, 2009 at 20:59
Hello,
Merci de ton astuce, mais je rencontre un autre probleme plutot lié au partage de la video elle même, en effet le robot facebook surtout avec IE je crois, recupère les images de mes pubs plutot que de ma miniature alors que je l’ai mis tout en haut dans le code.
Si ta une idée ou solution, tu as mon mail ou si tu as la flemme tu peux me répondre ici, je tacherais de venir jetter un coup d’oeil !
Merci pour l’astuce !
novembre 30th, 2009 at 17:06
Meme problème…. je mets mon image le + haut possible mais facebook me propose en 1er une image de mon graphisme ! Je test sous firefox …
une idée pour “forcer” la 1ère image proposée ??
décembre 5th, 2009 at 0:43
@val : C’est que l’image de ton graphisme est au dessus de ton image… normalement il n’y a pas de problème si vous mettez votre image tout en haut du body
@vidéo drole : tes pubs sont tout en haut du body ! Comme je l’ai dit il faut mettre l’image tout au début
février 25th, 2010 at 11:46
Tu as l’air de bien t’y connaitre. Alors à tout hasard, j’ai un souci avec la page Facebook que j’ai crée, la miniature de la photo de profil ne veux pas s’enregistrer correctement. J’ai beau la recadrer, la réenregistrer, ect… Elle reste plantée ! Du coup au llieu d’afficher un petit logo sympa (le coté droit de la photo de profil de la page), ça affiche les 2 lettres du milieu, c’est nul ! Une astuce ?
février 25th, 2010 at 23:47
Salut Myka,
à mon avis cela vient du fait que l’image miniature fait X pixels par Y pixel ce qui donne un certain format, si tu ne tronque (coupe) pas ton image quelque soit la taille que tu lui donne elle apparaitra tjs de la même façon puisqu’elle n’a pas le mm “format” l*L… Si j’ai bien compris ton problème… ^^
avril 1st, 2010 at 14:03
Bien vu et bien expliqué Mika
C’est un bon “Call To Action”
avril 22nd, 2010 at 0:35
Salut, nikel ça marche bien par contre une fois le lien sur facebook, l’image est comme archi compressée, mon jpeg est de bien meilleur qualité pourtant… c’est normal ?
Encore merci et bravo pour la ptite astuce !!
avril 22nd, 2010 at 18:08
Non, vous devez respectez les dimensions que j’ai donné… rien ne sert de mettre une qualité supérieure elle sera de tte façon redimensionnée… Avec les fichiers que je donne il n’y a pas de problème
mai 14th, 2010 at 10:39
Bonjour Michael
Je viens de lire les commentaires précedents, mais je ne comprends pas tout ce qui est expliqué^^
Tu écris dans ton article:
” Lorsque l’on publie un lien sur facebook, le système va chercher automatiquement les images de la page et les proposer en miniature (thumb) vous devez donc placer une image (que vous aurez créer) le plus haut possible dans la page pour qu’elle soit la première. ”
Je publie régulièrement sur mon mur, des liens en provenance du même site, et ce depuis quelques mois. Les images de ces liens ne sont plus proposées en miniatures depuis quelques semaines, pour une raison qui m’échappe totalement.
Qu’en dis-tu?
Cordialement
mai 15th, 2010 at 14:57
Ca arrive que Facebook “bug” (entre guillemet) dans ce cas là il faut réessayer plusieurs fois sur la même url. Pour qu’il renvoi l’analyse d’une même url, il te suffit de rajouter en suffixe ‘#’ en mettant derrière le diez ce que tu veux, s’il est nécessaire de faire plus d’un essai.
Sinon pour ce qui est de l’explication : Facebook, lorsque tu publie un lien va chercher s’il existe une image dans la page (balise img src=”") et la (ou les) propose(s) en miniature. Mon conseil consiste à placer l’image qui doit illustrer ton lien le plus haut possible dans la page puique lorsque c’est un utilisateur qui va envoyer le lien, il ne réfléchira pas si c’est la bonne vignette qui est proposée ^^. Il faut donc que la “bonne image” arrive en premier.
Je sais pas si c’est plus clair
mai 15th, 2010 at 15:23
Oui
merci j’ai compris mais ça ne fonctionne pas ((
Je viens d’essayer avec ce lien
-http://tvshablog.com/2010/05/13/gelatine-ou-e441-ou-te-caches-tu/
Les images te semblent-elles convenir?
J’ai rentré le lien comme ça:
# -http://tvshablog.com/2010/05/13/gelatine-ou-e441-ou-te-caches-tu/
Me suis-je trompée?
PS/ Comment recevoir tes réponses dans ma boite e-mail?
mai 16th, 2010 at 16:33
Essaye en mettant l’image tout en haut juste en dessous du body…
Sinon c’est peut-être l’iframe caché tout en haut qui l’empeche de récupérer l’image
Sinon pour faire plusieurs essais ce n’est pas “# mon url” mais “http://mickaelbertrand.imagika.fr/#”
J’ai pas installé le plugin pour ça ^^
mai 25th, 2010 at 12:05
[...] alors après l’astuce Facebook qui consiste à mettre une vignette vidéo sur un lien que j’ai publiée il y a de ça quelques mois… Une nouvelle astuce que j’ai mit [...]