Votre site sur votre page Facebook 2/2

Et voilà, déjà de retour pour la suite de ce tutoriel qui, s’il n’est pas plus difficile que le premier sera un peu plus long, car il se déroulera en 3 étapes : Création du contenu, création des tranches et exportation du fichier obtenu et enfin, installation de l’ensemble sur votre page Facebook.

Nous avons vus dans la première partie qu’il fallait installer l’application staticTab depuis Facebook ou sur Google à cette adresse . Ensuite, nous avons également vu comment intégrer votre blog ou votre site sur votre page Facebook, et nous avons également vu ensemble que la fenêtre (frame) sur Facebook est limitée à 800 pixels de large, ce qui est inférieur à la plupart de nos pages de site. À présent, nous allons faire une page à 800 px, vous n’aurez pas le souci d’une page tronquée, ni de scroll, mais une pleine page, avec des images cliquables disposées comme vous l’entendez.

dans notre application, il s'agit du bouton rouge que je vais mettre en place !
dans notre application, il s’agit du bouton rouge que je vais mettre en place !

Vous aurez en totalité besoin pour faire ce projet de différents outils (tous gratuits) et pour ne pas perdre de temps par la suite au cours de votre réalisation, je vous conseille de les télécharger ou de vous y inscrire dès le départ :

un éditeur d’images ( pour réaliser votre template)

– un hébergeur de fichiers (comme Dropbox par exemple pour récupérer votre fichier final)

– un éditeur de mapping/script (Mailrox sur lequel vous pouvez déjà créer un compte)

– l’application Statictab pour l’installer sur Facebook

– un éditeur de texte (il y en a sur tous les ordinateurs)

Si l’un de ces élément vous pose un souci, n’hésitez pas en commentaire à vous exprimer, je vous guiderais, ça sera utile aussi pour celles et ceux qui n’oseront pas poser la question.

Dans ce second chapitre nous allons aborder les fameuses landing pages, qui vous permettront d’afficher un contenu personnalisé complet, les images que vous souhaitez, disposées comme vous le désirez, et pointant dans les directions que vous souhaitez.

Alors pour y remédier, nous allons à présent utiliser un autre site en ligne qui va nous permettre non pas de mettre le site à l’échelle (quoi que, ça pourrait être une idée), mais plutôt créer un nouveau contenu qui s’affichera complètement, en créant un document de 800 px de large sur une hauteur de … De ce que vous voulez, mais ne dépassez pas 2000 px de haut, car c’est déjà limite.

 1 Créer un contenu : (avec un éditeur d’image):

Sur Photoshop, c’est vraiment très facile car vous pouvez juste avec ce logiciel créer votre map, la segmenter avec l’outil tranche, et enfin, la coder avec photoshop sans connaitre la moindre ligne de code, il vous fournira un fichier comprenant un index html, et vos images découpées. Mais comme tous le monde n’a pas photoshop, je vais vous expliquer comment obtenir un résultat semblable, avec seulement deux logiciels gratuits : un éditeur d’image que vous pouvez découvrir dans notre article dédié à ça justement, et je vous conseillerai phtoscape ou photofiltre mais il en existe d’autres, peut-être même en utilisez-vous un différent, l’essentiel étant qu’il vous permette de faire une disposition, d’y ajouter du texte, et qu’il n’y ai pas de pub sur votre oeuvre d’art. Et, bien sûr un logiciel en ligne nommé Mailrox qui va vous permettre de faire vos tranches et de coder tout ça à votre place

Ce contenu devra être fait sur un document de 800 px de large, faites un joli fond qui rappel votre site, puis disposez les éléments que vous souhaitez rendre cliquable, en gardant à l’esprit qu’il est bien de commencer par une bannière ou un titre d’accroche, puis quelques images avec texte, ou seulement du texte (mais c’est tristounet), fignolez votre mise en page. Pour exemple j’en ai fait une que vous pouvez retrouver sur Facebook en clinquant dessus. Attention, j’ai également ajouté une seconde image, réservée aux non-fans qui verront une autre page s’afficher et ne visualiseront celle-ci qu’une fois qu’ils auront cliqué sur « J’aime », mais pas d’inquiétude, ça aussi je vais vous l’expliquer, c’est une façon de collecter de Fans sans payer une pub chez Facebook 😉  Donc voici l’image que j’ai dessiné, et sur laquelle je vais faire ce tuto :

test landing page telle que je la prévois pour ma page Facebook.
test landing page telle que je la prévois pour ma page Facebook. cliquez pour la voir en live sur Facebook

Voilà, je n’aurais désormais plus rien à écrire dessus, juste à bosser les découpes, mais ça, ce n’est pas long, et puis surtout c’est sur l’autre logiciel que ça va se passer, vous allez le voir de suite.

découper l’image et organiser ses liens (c’est du mapping en fait) :

Là, beaucoup d’images pour un step by step … (oui bon, un pas-à-pas si vous préférez, je précise pour les plus âgés). En premier vieux, heu … lieu, vous allez vous connecter et vous inscrire sur ce logiciel simple d’utilisation, gratuit et Ô combien pratique qu’est MAILROX, ayé ? C’est fait ? Alors commençons. Vous allez cliquer sur Sign up et une page va s’ouvrir, remarquez que ça sent la peinture, vous remarquez en haut à côté du nom, la mention Bêta ? Ça signifie que c’est fout neuf et donc en cours de finition. Ça signifie aussi que peut-être un peu plus tard, ça sera payant, alors profitez du gratuit tant qu’il y est, car vos fichiers une fois chargés sur votre ordinateurs ne pourront pas être supprimés, même si ça devient payant :

inscrivez-vous afin de sauvegarder vos templates sur mailrox
inscrivez-vous afin de sauvegarder vos templates sur mailrox

Voilà, vous êtes inscrit, alors cliquez sur sig in, et commencez. Cliquez sur « create a new Email, parce que oui, vous pouvez aussi l’utiliser pour faire des newsletter, mais je vous ferais le topo la dessus plus tard, car là on est sur Facebook.

Cliquez sur le bouton vert, nous somme des pros maintenant, on va faire notre bidouille sans utiliser le générique!!!
Cliquez sur le bouton vert, nous somme des pros maintenant, on va faire notre bidouille sans utiliser le générique!!!

A présent, vous allez télécharger votre création, celle que vous avez fait sur votre éditeur d’images préféré :

Importez votre template (c'est le doc que vous venez de mettre en page)
Importez votre template (c’est le doc que vous venez de mettre en page)

Et voilà, votre template est importé, vous voyez à présent votre image avec un arrière-plan millimétré, et quelques outils sur la droite, voilà ce qu’ils signifient ces outils :

legende des outils Mailrox
legende des outils Mailrox

A partir de là, vous pouvez commencer, c’est facile et très intuitif, amusez-vous pour commencer à faire vos tranches horizontalement (le + bleu horizontal) et verticalement (le + vertical) vous êtes en train de préparer vos découpes pour les isoler les unes des autres, ce sont les cellules. Ne paniquez pas si une tranche verticale coupe en deux cellules une image située ailleurs sur votre template, vous allez la modifier ensuite. Ci dessous, entre mes deux cercles (Mars et Google), les lignes continuaient sur mon superbe visage modifié (face substitution), j’ai ensuite utilisé l’outil « poubelle tranche » pour cliquer sur les lignes dont je ne voulais pas. Vous remarquez que même les zones vides sont transformées en cellules, de chaque côté de l’image « substitution », ainsi qu’entre mes deux cercles, ou encore complètement à gauche des cercles. Ces cellules seront considérées comme des images dans le fichier que l’on obtiendra à la fin.

faites tous vos traits de coupe, et dans vos cellules finissez de compartimenter.
faites tous vos traits de coupe, et dans vos cellules finissez de compartimenter.

En fonction de vos besoins, vous avez les mêmes outils mais en vert, ils vont vous permettre de faire des tranches de coupes dans les cellules que vous venez de tracer. Vous voyez ce n’est pas compliqué, et nous pouvons ensuite passer aux liens à mettre sur nos images. Cliquez sur » Save & Edit content » tout en haut de votre page, nous arrivons à la troisième étape ci-dessous (Content). lorsque vous survolez votre template, vous remarquez que seule la cellule survolée est active, cliquez dessus :

Selectionnez votre cellule
Selectionnez votre cellule

Vous pouvez à présent vous contenter de mettre le lien de la page visée par votre cellule (original design en gris) puisque vous avez déjà mis votre texte sur votre template. Pour ce faire, j’ai copié l’url de mon article sur la police scientifique depuis le blog, puis j’ai cliqué sur « links somewhere, et tout en bas (encore grisé sur la photo) Custom file name, je vous le recommande, c’est juste de renommer votre image sans quoi elle portera (dans votre fichier le nom qui apparait en gris, et c’est chiant si vous devez la récupérer plus tard. Donc autant tout de suite les renommer dans leur ordre de disposition : 1, 2, 3. etc , l’extension jpg se fera toute seule ne la récrivez pas.

Vous n’avez plus qu’à faire la même chose pour chaque image (cellule) de votre template, et nous avons terminé, il ne reste plus qu’à l’enregistrer.

entrez l'url à atteindre lorsque le visiteur cliquera sur cette image.
entrez l’url à atteindre lorsque le visiteur cliquera sur cette image.
Pour ceux qui ne l’auront pas fait (mettre le texte dès le départ malgré mes recommandations), vous devrez cliquer sur « Text » à côté  » original Design » et jouer entre le corps du texte, sa disposition, sa couleur etc … Mais ça ne sera pas aussi parfait. Idem ensuite pour en faire un lien cliquable, vous devrez faire un < a href= »url à atteindre »>***</a> et ce pour chaque bloc texte !
 mes *** correspondant dans cet exemple à un mot ou une phrase ou encore tout votre texte à  placer entre ces balises pour qu’il soit cliquable. Si vous n’avez pas tout compris, n’hésitez pas à me demander plus de détail.
 

2- exportez votre fichier correctement : 

Maintenant que votre template est fait, il reste à l’exporter vers un hébergeur, car vous devez bien entendu faire des liens, et ceux-ci seront générés automatiquement à cette étape, simple mais qu’il faut respecter scrupuleusement. Vous êtes donc passé sur Mailrox à la quatrième étape en validant votre travail :

Exporter correctement son fichier Mailrox
Exporter correctement son fichier Mailrox

Vous allez devoir choisir un type de téléversement ( Choose a type of download), si dans le choix proposé, rien ne vous semble familier, alors, vous choisirez le premier « dowload html+images & host thé images on any server », en gros, vous allez choisir ou vous déposerez vos images. Ici pour moi j’ai choisi ma Dropbox, si vous disposez déjà d’un hébergeur en ligne, il faut créer un fichier dedans, et copier l’url de ce fichier. Si vous n’avez aucun hébergeur en ligne, c’est le moment d’en prendre un, gratuit, je vous conseille le même que moi, à savoir Dropbox. Une fois installé, allez dans le dossier « public de votre dropbox et créez un nouveau dossier  » mailrox » par exemple pour le retrouver facilement. Copiez son url.

j'ai créé un fichier dans ma dropbox, puis copié son url
j’ai créé un fichier dans ma dropbox, puis copié son url
j'ai recopié l'url de mon fichier Dropbox, je le colle à présent sur mon url d'export dans Mailrox
j’ai recopié l’url de mon fichier Dropbox, je le colle à présent sur mon url d’export dans Mailrox

Il ne vous reste qu’à cliquer sur le gros bouton bleu « Download Export » et votre fichier se retrouve sur votre bureau ou dans votre dossier de téléchargement sous le nom de : mailrox-export-zip-for-server. Il n’est pas encore chez votre hébergeur, mais sur votre ordinateur. Cette manipulation vous permet en fait de ne pas avoir à revenir sur une modification de votre index html généré. Votre dossier comprendra donc un dossier images, et un fichier index.html.

A présent, récupérez le contenu de ce fichier mailrox-export-zip-for-server (le dossier images et le fichier index.html), et placez-les dans le dossier Mailrox de votre Dropbox (ou dans le dossier que vous avez créé sur un autre hébergeur), depuis lequel vous avez copié l’url pour l’indiquer précédemment dans « download export ». C’est presque terminé, le template est prêt, les liens sont faits, l’exportation et l’installation sont terminés, on peut donc passer à la phase finale, l’installation de votre template sur votre page Facebook.

3- installez votre chef d’oeuvre sur Facebook : 

De la même manière que dans la première partie de ce tutoriel, vous allez sur votre page Facebook, vous ouvrez l’application StaticTab, et soit vous modifiez celui que vous avez fait, soit (tout en bas) vous cliquez sur l’icône que voici :

ajouter un onglet
ajouter un onglet

puis vous effectuerez ces réglages :

Mettez votre script sur Facebook
Mettez votre script sur Facebook

Sur la ligne page source, au lieu de cocher « url » comme nous l’avons vu pour installer votre site sur la page, vous allez cocher « HTML », et en dessous, dans la boite de dialogue, vous allez coller le code html que vous avez installé sur votre hébergeur. Pour cela il faut l’ouvrir avec n’importe quel éditeur de texte, (textEdit, smultron, Fraise, Blocnote …) copier le script, et collez-le comme ci dessus sur Mailrox.

Globalement, c’est terminé, vous pouvez dès à présent le visualiser et si tout a été fait correctement, il apparait alors au bon format, avec les liens fonctionnels.  Vous Pour les plus courageux d’entre vous, deux autres choses peuvent être encore ajoutées :

forcer les visiteurs à cliquer sur "J'aime"
forcer les visiteurs à cliquer sur « J’aime »

Juste sous mon script, vous pouvez remarquer que j’ai une petite image. Celle-ci est faite car j’ai délibérément cliqué sur « image » ce qui imposera cette image aux visiteurs qui n’ont pas cliqué sur « J’aime », ils ne verront le réel contenu (celui du script) que s’ils cliquent sur « J’aime ». Si vous souhaitez laisser l’accès libre, cliquez sur « off » au lieu de « image ».

Cette image fait 800 px sur 800 px (vous pouvez modifier les dimensions mais sans les dépasser lorsque vous allez créer votre image sur votre éditeur d’images). Dans ce cas, n’oubliez pas d’ajouter après téléchargement une url de redirection lorsque vous aurez cliqué sur « choisir le fichier », cette url sera tout simplement celle de votre page fan, ce qui ramènera le visiteur à votre page d’accueil au lieu de le laisser bloqué ici !!

Vous pouvez aussi lui créer un petit bouton (111×74 px) comme votre précédent bouton, en le renommant (pour moi c’est « best-off du mois ») et cliquez sur « Change Tab icon » pour installer celui que vous avez créé.

Puis Save settings, et voilà, tout est fonctionnel.

Un petit problème ?

Si vous avez suivi ce tuto à la lettre, vous ne devriez avoir rencontré aucun problème, le seul qui pourrait surgir, c’est de voir s’afficher sur votre page, un template dans lequel chaque image est remplacée par un point d’interrogation. Pas de panique !

Dans ce cas, c’est que l’url de vos images n’est pas la bonne, et si comme je vous l’ai conseillé un peu plus tôt, vous les avez renommées 1.jpg, 2.jpg, 3.jpg etc … Il sera très facile de les installer correctement en modifiant l’url dans le script sur Facebook . Pour cela, c’est très simple :

-1- retournez dans votre fichier d’images sur votre hébergeur, recopier l’url de votre image 1.jpg

-2- revenez dans le script de votre application Facebook et chercher la partie de code concernant chaque image il s’agit de crochets vert allant de <img> jusqu’à /> :

repérez les lignes d'images
repérez les lignes d’images

Chez moi, comme je ne les ai pas renommées en 1.jpg etc, pour aller plus vite, du coup elles se présentent  ainsi (https://dl.dropboxusercontent.com/u/5497711/mailrox/images/image-c45ca5b17a35b081684d8ab7266e5157.jpg) et si j’ai un problème d’affichage, ça v être galère de retrouver mon image 1.jpg puisqu’elle n’existe pas, mais pas pour vous.

Vous allez chercher dans ce script la ligne de l’image 1.jpg  et modifierez celle-ci à partir de http … jusque son extension en .jpg en la remplaçant par celle que vous venez de copier depuis votre hébergeur

<img height= »508″ src= »http://—–c’est la partie à remplacer dans chaque ligne—.jpg » style= »display: block; line-height: 1; border-width: 0; padding: 0; » width= »37″ />

vous pouvez garder la même ligne à coller pour chaque image en prenant soin de modifier juste la fin (2.jpg pour la seconde, 3.jpg pour la troisième, etc …)

Lorsque vous serez parvenu à faire votre page, alors vous pourrez également en créer d’autres pour des contenus différents (concours photos, installer des vidéos, des playlist mp3 etc ) il suffira juste de faire un script comprenant un lecteur flash ou mp3, bref, à partir de là, le monde st à vous !

N’hésitez pas à laisser vos commentaires et à poser vos questions ci dessous !!!

 

Un commentaire Ajouter un commentaire

  1. Ping : Couloirs du net

Vous souhaitez réagir à cet article ? Ça tombe bien, vous pouvez le Faire ici !

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s