Cet article Déplacer un site WordPress: une méthode pas à pas est apparu en premier sur Thierry Couteau.

 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=334341610034299";

Cet article Trucs, astuces et soluces pour Prestashop est apparu en premier sur Thierry Couteau.

La dernière date de modification connue d’un article ou d’une page est un élément important lorsque le sujet est « évolutif » ou que le contenu nécessite des mises à jour plus ou moins fréquentes. Cette possibilité n’est pas proposée sous une forme simple dans WordPress, je vous propose donc de créer un shortcode (Consultez l’aide de WordPress pour en savoir plus sur ces codes) qui vous permettra d’intégrer cette date à la demande.

Description du shortcode d’affichage de la dernière date de modification

Le code court que j’ai créé s’appelle [datedermaj], nous verrons au chapitre suivant que vous pouvez aisément modifier son nom.

Le shorcode ne nécessite aucun paramètre et il peut-être utilisé depuis l’éditeur visuel de votre Back-Office WordPress, que ce soit dans une page ou un article. L’avantage est, qu’une fois inséré, cette date de dernière modification sera automatiquement mise à jour lors de l’affichage de la page.

L’insertion de ce code court entraîne l’affichage dans la page de l’information « Date de la dernière modification: » suivie de la date au format jour mois année. Ces deux éléments sont également facilement personnalisables.
Voici ce que renvoie le shortcode pour cette page : Date de la dernière modification: 2 avril 2019. Pour info, vous noterez que le résultat s’affiche avec le style que j’ai appliqué au code dans l’éditeur.

Création du shortcode [datedermaj]

Comme pour toute modification de ce type, la création d’un shortcode nécessite d’intervenir dans une page php de votre site WordPress, en l’occurrence la page functions.php qui se trouve dans le répertoire de votre thème (/wp-content/themes/votre-thème/). Si tout ceci vous semble incompréhensible ou compliqué, trouvez plutôt quelqu’un pour le faire à votre place (je peux m’en occuper).

La modification est toute simple, voici le source du shortcode que j’ai créé et qu’il faut copier dans le fichier functions.php :

// Ajout d’un shortcode pour insérer une date de dernière modification dans les articles – thierrycouteau.com
function datedermaj_handler($atts, $content=null){
return the_modified_date( ‘j F Y’, ‘Date de la dernière modification: ‘ , $after, 0 );
}
add_shortcode( ‘datedermaj’, ‘datedermaj_handler’ );

Deux précisions :

– Ce shortcode utilise la fonction native de WordPress the_modified_date() dont vous trouverez la documentation(en anglais) ici

– Le format de la date est modifiable (voir le lien vers l’aide ci-dessus) tout comme le nom du shortcode (évidemment) et la phrase d’accompagnement (re-évidemment).

Pour aller plus loin dans la création d’un shortcode

Cet article vous a donné envie de créer vos propres codes courts ? Consultez l’aide très complète de wordpress à ce sujet : http://codex.wordpress.org/Shortcode_API (en anglais).

Et si vous n’avez pas le temps, les compétences ou même l’envie de faire ces modifications, je vous rappelle que je peux vous aider.
Concernant ce shortcode [datedermaj], j’ai imaginé un forfait de mise en place à prix très réduit… pour ne pas dire ridicule. Si vous êtes intéressé, consultez moi…

Cet article WordPress: ajouter la date de dernière modification dans un article est apparu en premier sur Thierry Couteau.

Date de la dernière modification: 16 août 2021

Certes, cela ressemble à un marronnier style sujet bateau pour grappiller quelques visites mais si vous arrivez ici c’est probablement parce qu’il n’y a pas pléthore de réponses à cette simple question : comment personnaliser et (surtout)  habiller avec le thème installé sur votre site la page de maintenance standard (et désespérante) de WordPress ?

La page de maintenance de WordPress

Petit rappel : lorsque vous procédez à une mise à jour de votre site, pour installer une nouvelle version de WordPress ou une extension, celui-ci passe automatiquement en « mode maintenance ». Cela signifie que l’internaute qui visite l’une de vos pages à ce moment là se retrouve devant un bel écran tout blanc et le message « Indisponibilité temporaire pour cause de maintenance. Veuillez revenir dans un instant. » (ou « Briefly unavailable for scheduled maintenance. Check back in a minute. »  pour les anglophones).

Techniquement et synthétiquement, pour ceux que cela intéresse, lorsque WordPress détecte le lancement d’une installation ou d’une mise à jour, il fait deux choses avant de l’exécuter:

• il crée un fichier « .maintenance » à la racine du site, une sorte d’indicateur qui sera supprimé en fin de traitement
• Il affiche dans une page vierge le message de maintenance retranscris ci-dessus ou, si elle existe, la page « maintenance.php » qui se trouve dans le répertoire « wp-content« 

Et c’est là que nous entrevoyons la solution, ou le début d’une des solutions…

Les solutions pour modifier le message de maintenance WP

Car il existe plusieurs solutions pour personnaliser cette page de maintenance WordPress :

• Utiliser une extension toute faite. C’est (forcément) la solution la plus rapide en terme de temps/homme mais également la plus pénalisante au niveau performance (rappelons que chaque plug-in alourdi un peu plus les temps de réponse de votre site). Il existe plusieurs plugins sur wordpress.org mais je ne les trouvent pas satisfaisants car ils viennent se substituer à la mécanique décrite ci-dessus. Par ailleurs, les versions gratuites que j’ai testées nécessitent d’activer manuellement le passage en mode maintenance.
• Créer sa page maintenance.php dans le dossier wp-content. Cette solution permet certes de personnaliser le message mais, la page n’étant pas dans le dossier de votre thème, elle nécessite, pour « l’habillage », de générer spécifiquement la mise en forme (création de template, appel d’une feuille de style…). Préconisée par WordPress et souvent proposée par les développeurs, je trouve cette alternative peu satisfaisante car elle n’utilise pas le thème que j’ai choisi pour habiller mon site.

Vous l’aurez compris, Last but not Least, ma préférence va à une troisième solution que voici…

Une solution de personnalisation qui utilise le votre thème WordPress

A fouineur persévérant rien d’impossible… Vous l’aurez compris si vous me lisez de temps en temps, j’évite de faire des modifications qui n’ont pas déjà été testées et si possible éprouvées. Vu qu’il est évident qu’il y a sur la toile énormément de gens plus forts en développement et/ou plus malins que moi, je préfère donc appliquer, autant que faire se peut, leurs recettes.

J’ai donc cherché une solution me permettant d’utiliser mon thème et de personnaliser le message d’attente du mode maintenance. Je fini par la trouver (en partie) dans la rubrique « Questions » du site wordpress.stackexchange.com. (merci par Morgan Estes, un sympathique développeur d’Edmond dans l’Oklahoma). Elle se découpe en deux phases :

1. Modification du fichier functions.php

Bon, si la lecture du titre de ce chapitre ne vous rappelle rien de connu, il est certainement préférable que vous fassiez réaliser cette modification par quelqu’un qui connaisse un minimum WordPress et le php (moi par exemple !).

Le fichier functions.php regroupe, comme son nom l’indique les fonctions utilisées dans votre thème. Il se trouve normalement dans le dossier wp-content/themes/votre thème (ou thème enfant si vous en avez un)/
Dans ce fichier, vous devez d’ajouter la fonction suivante :
/* Appel d'une page de maintenance personnalisée en cas de mise à jour */
if ( ! function_exists( 'custo_maintenance_mode' ) ) :
function custo_maintenance_mode() {
if ( file_exists( ABSPATH . '.maintenance' ) ) {
include_once( get_stylesheet_directory() . '/maintenance.php' );
die();
}
}
add_action( 'wp', 'custo_maintenance_mode' );
endif;
Veuillez noter que « custo_maintenance_mode » est le nom que j’ai décidé de donner arbitrairement à la fonction, vous pouvez l’appeler comme vous voulez (Morgan l’avait appelé « sx84987_maintenance_mode »).

Que fait cette fonction ? Si un fichier « .maintenance » (évoqué plus haut) est créé, elle indique à WordPress d’utiliser le fichier maintenance.php habillé avec le thème du site. Ce fichier personnalisé est l’objet de l’étape suivante.

2. Création du fichier template.php

Le fichier en question doit-être créé lui aussi dans le dossier wp-content/themes/votre thème (ou thème enfant si vous en avez un)/.

Voici tout d’abord à quoi ressemble cette page une fois affichée :

Ma page de maintenance personnalisée

Bon, le contenu n’est pas très original, mais là n’est pas le sujet ! Voici maintenant le source de cette page :
<?php
/**
* Une page de maintenance personnalisée.
*/
$protocol = "HTTP/1.0";
if ( "HTTP/1.1" == $_SERVER["SERVER_PROTOCOL"] )
$protocol = "HTTP/1.1";
header( "$protocol 503 Service Unavailable", true, 503 );
header( "Retry-After: 3600" );
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php show_breadcrumbs(); ?>
<article id="post-0" class="maintenance-class">
<header class="entry-header">
<h1 class="entry-title">Maintenance en cours, merci de patienter...</h1>
</header>
<div class="entry-content">
<p>Oh pardon ! Je fais des mises &agrave; jour au moment o&ugrave; vous venez me visiter !?</p>
<img width="150" height="200" src="https://thierrycouteau.com/wp-content/uploads/2013/08/thierrycouteau-maintenance.jpg" class="attachment-post-thumbnail wp-post-image" alt="Je suis en pleine maintenance" />
</br>
<p>Je vous prie de bien vouloir m'excuser; une petite maintenance est la cause de l'interruption provisoire du site et de l'affichage de ce message.</p>
<p>Cela ne durera que de quelques secondes (le plus souvent) &agrave; quelques minutes.</p>
<p>Merci donc de patienter puis de relancer la page (<b>touche F5, Ctrl R ou la fonction "rafra&icirc;chir la page" de votre navigateur</b>)... ou de revenir un peu plus tard.</p>
<p style="font-weight:bold">Je ne sais pas ce que vous &ecirc;tiez venus voir mais cela vaut certainement le coup, alors &agrave; tout de suite !</p>
</div><!-- .entry-content -->
</article><!-- #post-0 -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php die(); ?>

Les initiés l’auront remarqué, cette page appelle les différents modules d’habillage du thème (header, sidebar, footer).

ATTENTION : le code source ci-dessus est évidemment un exemple et ne doit pas être repris à l’identique. Parce que les styles css et les appels de modules sont certainement différents dans votre thème. Parce qu’aussi et surtout, vous feriez du duplicate content en reprenant ce que j’ai écrit sans le modifier…

Aparté suite à quelques tests : si vous installez comme je l’ai fait le plugin « WP Super Cache » ou un système de mise en cache similaire, le mode maintenance vous semblera ne pas fonctionner… à cause de la mise en cache de vos pages. Pensez à le désactiver pour faire vos tests !

Conclusion

Simple à mettre en place pour un utilisateur WordPress un tant soit peu « éclairé », cette solution apporte un « petit plus » à votre site, les internautes qui visitent vos pages au moment d’une mise à jour ne seront plus désorientés et auront certainement davantage envie de patienter ou de revenir.

Comme il n’y a pas de raison de priver les « non initiés », les débutants et autres allergiques à la programmation, j’ai créé un petit forfait pour cette mise à jour. Elle se fait schématiquement en 3 temps : audit rapide du site (gratuit) pour voir si il est compatible, définition du contenu et de l’image à afficher (avec vous), mise en place. Pour connaitre mes tarifs et mes disponibilités, voici le lien vers l’incontournable formulaire de contact.

Cet article WordPress: une page de maintenance personnalisée selon le thème est apparu en premier sur Thierry Couteau.

Mise à jour du 21 juin 2013  Cela n’aura pas duré longtemps… L’API sur laquelle s’appuyait cette astuce a été stoppée par Twitter depuis peu…
Mais qu’à cela ne tienne, pour ceux qui, comme moi, ont autre chose à faire que de développer leur propre module, je vous propose de vous rabattre sur l’excellent plugin que je viens de trouver : Juiz Last Tweet Widget réalisé par Geoffrey. Le résultat est plutôt sympa, comme vous pourrez le constater en bas à droite de cette page.

Les solutions de publication d’un fil Twitter sur WordPress

Il existe plusieurs solutions pour afficher sa timeline Twitter sur un site WordPress, soit en installant un plugin (il y en a pléthore), soit en intégrant un bout de code php (ce qui nécessite d’intervenir directement ou indirectement dans le code), soit enfin en intégrant quelques lignes de jquery au sein d’un widget texte.

C’est cette dernière solution que je vous propose d’explorer aujourd’hui. Pour les autres méthodes, rendez-vous en fin d’article où j’indique quelques liens.

Timeline Twitter dans WordPress : une solution accessible à tous

J’aurais pu dire, la solution du moindre effort !

Certains me diront que cette méthode n’est plus maintenue par Twitter qui a sorti depuis une nouvelle version de  l’API utilisée ici. Peut-être… n’empêche que celle-ci fonctionne encore pour quelques mois et que, dans le cas présent, elle suffit amplement pour afficher quelques tweets.
Elle a l’avantage de son inconvénient : ne nécessitant pas d’authentification elle peut-être exécutée « coté client » (sur le navigateur du visiteur), elle est donc moins « évoluée » mais plus « légère ».

Bon, après cette parenthèse pseudo-technique, revenons à nos moutons notre oiseau. Comme toute méthode ou astuce facile, elle a ses limites et ses contraintes. En gros, la timeline Twitter pour WordPress que je vous propose est assez épurée; elle affiche les n (3 dans mon cas) derniers tweets, prend le style de votre thème et ne propose pas de trucs sophistiqués en terme de présentation ou d’interactivité.
C’est celle que j’utilise ici-même, en bas de la colonne de droite, sous le titre « Gazouillis ».

Entrons dans le vif du sujet :

Acte 1: Ajout d’un Widget Texte dans le bloc de votre choix

Pré-requis à cette solution, il faut que votre thème accepte l’utilisation de Widgets, car la simplicité de sa mise en oeuvre réside essentiellement dans l’utilisation de ces modules paramétrables qui simplifient tant la vie des utilisateurs WordPress.

Pour ceux qui en serait encore à se demander ce qu’est un Widget, voici quelques rappels et explications (les autres, vous pouvez passer directement à la fin de ce chapitre).

Pour accéder à la page d’administration des Widgets, dans le menu de votre back-office WordPress survolez l’option Apparence puis cliquez sur l’option Widgets :

La page qui s’affiche vous propose à gauche les différents Widgets disponibles, à droite les blocs représentant la ou les sidebar ou autres emplacement avec lesquels votre thème vous permet d’interagir.

La mise en place se fait tout simplement en faisant glisser le widget vers la zone désirée, comme le montre cette vidéo:

Vous aurez remarqué à l’image que j’utilise fort à propos le Widget Texte, qui est celui dont nous avons besoin.

Petite recommandation avant d’aller plus loin : pour les tests, le mieux est de les faire sur votre version locale de développement. Si vous n’en avez pas et que vous testez « en réel » (ce n’est pas bien!) et si votre thème vous permet d’utiliser plusieurs types de sidebar selon le modèle de page, choisissez plutôt dans ce cas celui qui est sur une page « profonde » et peu visitée (pas la « Home » ni les pages les plus lues). Dans mon cas (oui j’ai fini mes tests en réel…), j’ai choisi la page « (e-)Coaching » qui, tout en étant à mon sens l’une des plus intéressantes de mon site, n’est malheureusement pas (encore) la plus consultée.

Acte 2: Copier un bout de code dans le Widget WordPress

Donc, nous avons mis en place une zone de texte, grâce au Widget du même nom, au sein d’un des blocs de notre thème (en général une barre de menu verticale ou le footer).

Il suffit maintenant d’y coller le bout de code suivant :
<ul id="twitter-liste" ></ul>
<script type="text/javascript">
function twitter_liste_callback(tweets){
var statusHTML = '';
for (var i=0; i<tweets.length; i++){
var username = tweets[i].user.screen_name;
var status = tweets[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<a target="_blank" href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a target="_blank" href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML = statusHTML + '<li><div style="display: inline-block; float: left;"><img src="https://thierrycouteau.com/wp-content/uploads/2013/05/logo-twitter-23x20.gif" /></div><div><a target="_blank" href="http://twitter.com/'+username+'">&nbsp;'+username+'</a></div><span>'+status+'</span></li>';
}
jQuery(window).load(function(){
var twitter_liste = jQuery('ul#twitter-liste');
twitter_liste.each(function(){
jQuery(this).html(statusHTML);
});
});
}
</script>
<script type="text/javascript" src="https://api.twitter.com/1/statuses/user_timeline/ThierryCouteau.json?callback=twitter_liste_callback&amp;count=3"></script>

Les éléments surlignés correspondent à 3 points sur lesquels j’attire votre attention :

<div style="display: inline-block; float: left;"><img src="https://thierrycouteau.com/wp-content/uploads/2013/05/logo-twitter-23x20.gif" /></div>

Ce bloc correspond à l’image du logo que j’affiche devant chaque tweet. Vous pouvez enlever cette ligne en totalité ou récupérer le logo sur votre site pour le gérer vous-même.

<script type="text/javascript" src="https://api.twitter.com/1/statuses/user_timeline/ThierryCouteau.

Sauf si vous voulez afficher ma timeline sur votre site (flatteur mais peu probable), il vous faut remplacer « ThierryCouteau » par votre identifiant Twitter (ce qui suit le « @ »).

json?callback=twitter_liste_callback&amp;count=3&amp"></script>

Ce paramètre « count » correspond au nombre de tweets que vous voulez afficher.

Ensuite ? Vous pouvez ajouter un titre, « Gazouillis » dans mon cas, puis il vous suffit d’enregistrer votre Widget. Attention, ne soyez pas surpris, la page ne se recharge pas lors de l’enregistrement.

C’est terminé ! Au rechargement d’une des pages en front office qui utilise la sidebar que vous avez choisie, vous verrez normalement apparaître les n derniers tweets de votre timeline. 

Flux Twitter sur WordPress, il y a mieux mais c’est plus difficile

Comme je l’évoquais plus haut, cette solution utilise la précédente version de l’API que twitter met à notre disposition. Pour ceux qui voudraient aller plus loin, consultez la documentation Twitter sur ce sujet : The Twitter REST API

Concernant les autres approches pour intégrer une timeline sur votre site WordPress, j’en ai recensé trois :

• Très simple également mais moins intégrée graphiquement, vous pouvez utiliser la fonction de création de widget (encore!) de Twitter. Cela se passe dans le menu de paramétrage de votre compte et c’est assez bien expliqué. Le bout de code généré peut bien sûr être intégré comme celui que je viens de vous proposer.
• Tout aussi simple, un peu plus lourd (plus de code, de ressources) mais c’est vrai aussi plus riche en possibilités, vous pouvez utiliser un des nombreux plugins proposé par la communauté WordPress : http://wordpress.org/plugins/search.php?q=twitter+timeline
• Enfin, pour les plus aguerris, vous pouvez vous attaquer à l’intégration php de l’API 1.1 de Twitter. Je n’ai aucun site à conseiller, une simple recherche Google sur « WordPress Timeline Twitter API 1.1 » permet de trouver de nombreuses pages consacrées à ce sujet.

En complément à cet article, si vous voulez en savoir plus sur les ressources insoupçonnées du Widget Texte, je suis tombé récemment sur cet excellent article de Fabrice Court :  Personnalisez votre Widget Texte avec WordPress

Pour d’autres trucs et astuces WordPress, je vous incite à consulter cette page de mon site.

Enfin, si vous avez besoin d’une intervention pour mettre en place cette timeline Twitter sur votre site (WordPress ou autre), n’hésitez pas à me contacter.

Cet article Ajouter un flux twitter à votre site WordPress est apparu en premier sur Thierry Couteau.

Cet article Trucs, Astuces et Soluces pour WordPress est apparu en premier sur Thierry Couteau.

Voici un petit article évolutif à vocation Pra’TIC : je vais référencer ici la bonne taille des images utilisées sur les différents sites où je suis amené, pour mon compte ou pour d’autres, à faire des inscriptions.

Cet article risquant d’être à rallonge, la présentation est faite sous la forme d’un accordéon, chaque chapitre se « déplie » en cliquant sur le titre.
Date de la dernière modification: 28 mars 2023

1. Taille des images sur Facebook

Facebook permet de charger des images et photos au format gif, jpeg, png ou tiff. Voici les 4 principaux types d‘images à télécharger :

• Photo de votre profil : la taille finale est de 176 x 176 px (est rognée en forme de cercle) mais votre image doit faire au moins 180 pixels de coté (toute autre taille carrée est de toute façon redimensionnée).
• Image de couverture :  851 x 315 px de préférence un jpeg de moins de 100 ko
• Photo dans le fil d’actualités : 1200 x 1200 px maximum, ramenés à 504 px de large maximum. Une bonne taille de diffusion reste le format 404 x 404 px
• Image du fil d’actualité que vous voulez mettre à la une : 843 x 403 px

Pour terminer, voici un lien vers deux pages Facebook traitant du sujet :

• Page officielle sur les dimensions des photos du profil et de couverture
• Recommandations relatives à la taille d’image minimale en pixels en fonction des placements

2. Vos photos sur Twitter

Twitter accepte les images et photos au format JPG, GIF, ou PNG. Nouveauté (04/2014): un nouveau format de présentation s’installe, avec des tailles d’images plus généreuses (voir le détail ci-dessous)

• Photo de votre profil : 
  • Ancienne présentation  : téléchargez une image en 128 x 128 px. Attention, elle est retaillée en 73 x 73 px sur la page profil et en 48 x 48 px dans le fil des tweets. Tenez en compte en pour le cadrage et la qualité. 
  • Nouvelle présentation twitter (04/2014): le format passe à 400×400 pixels
• Image de fond de l’entête:
  • Ancienne présentation  : Twitter conseille une image en 1200 x 600 px qui sera retaillée à 520 x 260 px.
  • Nouvelle présentation (04/2014) : le format passe à 1500 x 500 pixels.
• Image de fond de la page : 2048 x 1600 pixels. Depuis la mise en place de la nouvelle présentation (04/2014), il semble que la seule limite soit une image inférieure à 2 Mo (pas de gif animé).

Décembre 2014 : toujours suite au commentaire de David, voici un lien vers la page Twitter qui semble me donner raison : Comment personnaliser votre profil ?

3. Vos images dans Google +

Les images du profil Google+

Google a modifié récemment la mise en page de la page profil.

• Photo du profil : une image carrée fera l’affaire, habituellement 453 x 453 px qui sera ramenée à 120 pixels de coté. Attention au cadrage, la photo apparaît dans un cercle sur la page profil (la mienne est ratée par exemple : voir mon profil Google+). Cette image apparaît en 48 x 48 px dans les fils.
• Photo de couverture : le mieux est de faire des essais car le format est adapté en fonction de la taille de l’écran, partez sur du 960 x 540 pixels. Un recadrage est possible au moment de la mise ne place (idem pour la photo du profil d’ailleurs)

4. Taille des images Linkedin

La page d’accueil de Linkedin

Pour Linkedin, le site accepte les fichier JPG, GIF ou PNG. Il y a la notion de page profil et de page entreprise :

• Pour la photo du profil : 4 Mo maximum. Taille de  200 x 200 à 500 x 500 pixels.
• Pour la page Entreprise :
  • une’image de 646 x 220 px mini, taille 2 Mo maximum
  • le logo : 100 x 60 pixels, taille 2 Mo maximum

5. Les photos sur Viadeo

Une page type Viadeo

Pour Viadeo, comme pour Linkedin, il y a des tailles d’image différentes pour votre profil et pour la page entreprise. Les formats acceptés sur le site sont les fichiers JPG, GIF ou PNG.

• Pour la photo du profil : 7 Mo maximum. Taille de  140 x 185 pixels mini retaillée ensuite à 117 x 155 px sur la page profil et à 44 x 44 px dans les fils.
• Pour la page Entreprise le logo doit être une image de 200 x 200 pixels, sa taille ne doit pas excéder 7 Mo.

6. Les formats d'images sur Youtube

Youtube est le site où il faut être lorsque l’on veut communiquer par la vidéo. Il y a de nombreux formats d’images proposés, voici les principaux :

• Icône de chaîne : par défaut celle de votre compte Google. Si vous la modifiez, utilisez une image carrée de préférence en 800×800 pixels qui sera retaillée automatiquement en 98x98px
• L’image d’illustration de la chaîne est adaptée automatiquement par Youtube en fonction de l’écran (voir image ci-dessus). Il est conseillé d’importer une image en 2560 x 1440 pixels en tenant compte que la zone toujours visible est au centre et mesure 1546×423 pixels.

Pour plus de précisions, rendez vous sur la page d’aide de Youtube: http://bit.ly/14xns7H

7. La taille de votre bannière et de votre avatar sur votre chaîne Dailymotion

Suite à une demande, j’ai jeté un coup d’œil à Dailymotion pour dégoter la taille des images utilisées pour habiller son profil et sa chaîne:

• Avatar de votre compte : image JPG, GIF ou PNG, taille maximale 450 Kb, hauteur-largeur : 1680 x 1680 pixels maximum, 160×160 px minimum.
• Image pour la bannière de la chaîne: 1920×1080 pixels.

Pour plus d’information sur la personnalisation de votre chaîne Dailymotion: http://bit.ly/dailymotion-photos

8. Tumblr : la taille des images du profil et du flux

Tumblr. est une plateforme de blog en ligne encore très utilisée. Je viens d’y créer mon compte (j’y reprend les articles que j’écris par ailleurs) : thierry-81.tumblr.com. Pour la taille de l’image du profil sur tumblr., il faut qu’elle soit carrée et d’au moins 128 pixels de coté (affichée en 64×64 px). Suite à la contribution de « Soulfree » dans les commentaires ci-dessous, voici d’autres informations sur les images utilisées sur tumblr :

• Les images que vous partagez sont affichées dans le flux au format 500 x 750 px
• Si vous partagez un gif animé, il doit se limiter à 500 px de coté et ne doit pas excéder la taille de 1Mb

9. Taille des images Gravatar

Page accueil site Gravatar

Gravatar est un service qui vous permet de créer votre « avatar standard », inclus automatiquement dans WordPress mais également utilisable sur de nombreux sites, blogs… Le format de l’image est libre puisque vous le recadrez après téléchargement. Tenez compte quand même des formats affichés ensuite qui vont de 18 x 18 à 48 x 48 px.

10. La bonne taille des images sur votre site

Vous trouverez sur le web beaucoup de conseils sur la taille idéale des photos et images destinées à un site web. A mon sens, il n’y a pas de taille précise mais plutôt des formats et des limites.
Longtemps nous nous sommes cantonnés au 800 x 600 pixels maximum et de ce fait à un rapport d’image de 4/3. Depuis l’explosion de la photo numérique, je pense qu’il vaut mieux privilégier un rapport 3/2 qui correspond davantage aux formats standards de nos appareils. L’image me semble également plus harmonieuse dans ce cas.
Quant à la taille, je ne vais jamais au delà de 800 pixels ce qui donne des formats en 800 x 533 px. Pour ce site, j’utilise souvent un format « perso » simple de 600 x 400 pixels que je réduis selon le besoin (450 x 300 px, 300 x 200 pixels…).

Je profite de ces lignes pour faire un aparté sur une notion importante mais souvent négligée lorsque l’on crée des images pour le web, la composition. J’y prête personnellement attention mais, disons le, de façon plutôt intuitive. Je viens de lire deux articles très instructifs de Laurent Breillat sur la composition en photographie, où il présente de façon simple des méthodes que je vais essayer d’appliquer dans mes future illustrations; voici les liens : La règle des tiers et Le nombre d’or appliqué à la composition photographique.

Post-Scriptum pour un futur lecteur

Attention, ces formats sont parfois amenés à changer, si vous venez d’un futur plus ou moins  éloigné (regardez la date de l’article et celle de la dernière modification pour vous en assurer), il serait peut-être bon de consulter directement les pages d’informations des sites concernés.

Cet article La bonne taille des images sur les sites sociaux et ailleurs est apparu en premier sur Thierry Couteau.

Cela fait partie des marronniers du web, voici ma contribution à cette question maintes fois répétée : pourquoi et comment personnaliser sa page 404 ?

Une page 404, qu’est ce que c’est ?

Bon, si nous en sommes encore là c’est que cet article est loin d’être inutile ! Une page 404 correspond en fait à celle que votre site affiche lorsque la page qui lui a été demandée n’existe pas ou plus. Par extension, cette page s’affiche également lorsque la page demandée ne doit pas être affichée (page interdite ou censurée).

Si vous voulez en savoir plus sur la normalisation de cette page d’erreur et plus généralement sur les codes du protocole de communication http, consultez la page Wikipedia qui lui est consacrée.

Si vous voulez un exemple de page 404, tapez simplement le nom d’un site suivi de n’importe quoi (pas au sens litéral, vraiment n’importe quoi!). Exemple : http://www.circadien.fr/nimportequoi

Pourquoi personnaliser sa page 404 ?

Plusieurs bonnes raisons :

• parce que cela vous oblige à vérifier qu’elle existe et qu’elle n’est pas par exemple vide ou uniquement en anglais
• parce qu’elle fait partie de ces pages qui donnent envie de s’enfuir. N’avez vous jamais quitté un site lorsque la recherche Google vous amène directement sur une page avec un beau 404 en gras accompagné d’un message « fichier non trouvé » ou mieux « file not found » ?
• parce qu’elle une occasion de plus sur le plan marketing de faire de la rassurance en montrant que votre site est maîtrisé et bien géré ou de la promotion (un coupon de réduction « spécial 404 » sur un site de vente en ligne par exemple !).
• Parce que cela fait tout simplement partie de la culture web au point qu’il se trouve aujourd’hui des sites qui référencent les meilleures pages 404. Une occasion de plus de se faire de la publicité à moindre frais ! Jetez un coup d’œil à bonjour404.fr qui référence chaque semaine les meilleurs pages d’erreur customisées.

Comment personnaliser sa page 404 ?

Le plus souvent, cette page existe déjà sur votre site. Si ce n’est pas le cas, voyez avec votre webmaster pour en créer une (sinon, c’est celle du serveur qui est renvoyée, qui n’est pas modifiable par vos soins). Selon comment a été créé votre site (cms, réalisation sur mesure…) cela peut être plus ou moins complexe. Vous pouvez dans ce cas me consulter pour une prestation sur mesure.

Dans WordPress par contre, c’est assez simple. Vous avez le choix entre l’utilisation d’un plugin (un de plus!) ou la modification de  la page 404.php de votre thème WordPress.

Pour le plugin, j’en ai testé un ou deux assez complets qui vous proposent de gérer complètement le comportement de votre site dans le cas de l’erreur 404: listes des pages en erreur appelées, suggestion de pages similaires à l’internaute, statistiques… A mon avis pas très utile, en tout cas dans un premier temps, d’autant que des outils comme Google Analytics vous permettent déjà d’analyser le phénomène.

Cet article Personnaliser sa page 404, pourquoi et comment ? est apparu en premier sur Thierry Couteau.

Cet article date de 2013, il se peut que les multiples versions de Yoast sorties depuis ont résolu le problème.

Dans la série « Si cela m’est arrivé c’est que cela n’a rien d’exceptionnel« , je viens d’être confronté à un problème de « strabisme éditorial ». En clair, je me suis aperçu que Google+ double le titre des articles WordPress que je lui donne à publier.

Après une rapide recherche, j’ai trouvé la solution sur différents sites blogs et forums étrangers, voici donc la version française de ces réponses (je ne manquerai pas de citer deux de mes sources « internationales » à la fin de cet article).

Donc, si comme moi vous avez été confrontés au problème du double titre dans Google + lorsque vous partagez un article, il est fortement probable que :

• Vous utilisez l’excellent cms WordPress
• Vous avez installé le nom moins formidable plugin Yoast, à qui je n’ai pas consacré d’article jusqu’ici vu qu’il est tellement indispensable que tout le monde en parle : Recherche google « plugin seo yoast wordpress »
• Vous avez laissé actif dans ce module l’option « Ajouter les métadonnées OpenGraph« 

Oui car la cause de ce bégaiement de publication est dans 95% des cas (100% dans le mien) la conjonction de ces trois éléments.

Bien que la réponse soit pratiquement donnée dans l’énoncé, si votre configuration est celle que je viens de décrire, voici tout simplement la solution pour que vos titres d’articles WordPress n’apparaissent plus en double lorsque vous les partagez sur votre profil Google plus :

Allez dans le menu de configuration de Yoast (SEO – Réseaux sociaux dans votre menu WordPress) et décochez le choix « Ajouter les métadonnées OpenGraph ». C’est tout !

Pour les sceptiques et ceux qui aiment voir avant d’agir, ces éléments sont vérifiables simplement en affichant le code source de votre page et en recherchant les balises de type « og:title » présentes.

Bon, maintenant que nous avons vu comment, attaquons nous au pourquoi de ce problème de multiplication des titres : il se trouve que certains autres modules optionnels de WordPress (dans mon cas mon superbe thème je pense) rajoutent des balises OpenGraph spécifiques à Facebook dont la balise title. L’option de Yoast fait donc double-emploi en venant rajouter les mêmes éléments.
Google vous en donnant toujours plus (même quand vous ne demandez rien), lors de la saisie de l’url de votre article sur votre page G+, il récupère votre balise title, ignore l’une des deux balises OpenGraph mais « lit » et intègre la deuxième. Ou un truc du genre…

Je vous ai dit comment, je vous ai expliqué approximativement pourquoi, il ne me reste plus qu’à vous indiquer grâce à qui j’ai pu corriger cette erreur et publier cet article :

• Konstantin Kovshenin sur son blog : « Double Titles when Sharing on Google+« 
• sdaveCL sur le forum de WordPress : « Double titles/description on Google+« 

Dernier point, si vous n’utilisez pas WordPress et/ou le plugin Yoast, la cause du problème reste certainement la même et je vous invite donc à creuser du coté des balises de titre répétées.

Cet article Google+ double vos titres issus de WordPress ? La solution ! est apparu en premier sur Thierry Couteau.

A l’heure ou Google nous annonce qu’il va unifier ses règles de confidentialité (voir mon article sur ce sujet), il peut-être bon de rappeler aux utilisateurs de compte Google qu’ils ont accès, depuis la page des paramètres, à une page appelée Dashboard (Tableau de Bord) qui permet de visualiser l’ensemble des données associées à votre compte.

Cette page est accessible directement à l’adresse suivante : https://www.google.com/dashboard/b/0/?hl=fr

Notez qu’il faut vous identifier pour y accéder (même si vous êtes déjà connecté à votre compte Google).

L’intérêt de ce tableau de bord est que vous visualisez en un seul endroit pratiquement toutes les informations que Google associe à votre compte et aux outils que vous utilisez. Vous pouvez, pour chaque entrée du tableau, accéder aux règles de confidentialité spécifiques à l’outil (ces même règles qui seront prochainement unifiées) ou, si possible, à son paramétrage.

« Pratiquement toutes les informations » car tout en bas de la page une phrase indique :

Cette page présente les données associées à ce compte Google. Toutes ces informations sont confidentielles, à moins qu’elles ne soient associées à l’icône . Si c’est le cas, cela signifie qu’elles sont visibles par les autres utilisateurs. – Autres infos ? – En savoir plus.

Deux rappels « de poids » dans ces deux petites lignes :

• Google conserve des informations publiques mais également confidentielles sur vous et vos habitudes (non seulement de recherche mais aussi d’utilisation de ses outils).
• Le lien Autres infos ? vous indique que certaines de ces informations confidentielles le sont également pour vous… Tout au moins que, je cite encore,
  

  « Quand vous utilisez ses services, Google enregistre d’autres types de données qui ne sont pas liées à votre compte Google. Ces données sont volontairement séparées de celles qui concernent votre compte Google, afin de protéger votre vie privée. Par conséquent, elles ne sont pas affichées sur cette page ».

La liste de ces autres informations n’est malheureusement pas exhaustive, Google n’en donnant que trois exemples : Fichiers journaux du serveur, Cookies, Publicités basées sur les centres d’intérêt.

En conclusion, le Dashboard du compte Google vous permettra au mieux (partiellement ) de répondre à la question « Quelles informations Google a sur moi ? » et de les contrôler, au pire d’alimenter vos craintes quand à l’exploitation de vos données personnelles.

Quelle que soit votre position sur ce sujet, force est de reconnaître que cette relative transparence permet d’appréhender encore un peu plus la puissance… et la mémoire de l’éléphant Google !

Si vous avez fait vôtre l’adage « pour vivre heureux, vivons caché », tenez vous loin des outils et services Google, car l’excellence et la gratuité a un prix, en l’occurrence une certaine « perte d’anonymat » et l’acceptation de partager votre intimité avec un géant de la publicité !

Cet article La confidentialité de vos données avec Google (Bis) : n’oubliez pas le « Dashboard » ! est apparu en premier sur Thierry Couteau.