1) Le boutons twitter (redondant avec mon bouton tweetmeme que je garde pour l’instant)

2) Le bouton facebook qui s’intégrer dans un iframe (je pensais que le iframe était un truc du passé)

A cette fin j’ai fait ma petite recherche et j’ai copié le code twitter chez

• mrboo.fr en prenant soin d’y mettre mon @thierryroget à la place de @mrboo. Je n’ai pas longtemps attendu pour voir si ça bugué ou pas car avec twitter il faut s’attendre à tout

Et pour le code de chez facebook  je l’ai récupéré chez

• l-tz.com ou j’ai récopié la version longue

Nota 1: Une fois installé j’ai regardé le résultat et ça n’a pas marché. Bien sûr, il y a mon plugin wp super cache qui est activé. Donc si vous êtes comme moi, attendez que le cache se vide pour voir apparaître le résultat.

Nota 2: je n’ai pas intégré quoique ce soit dans la feuille de style CSS, les boutons sont donc simplement à gauche après le billet

Nota 3: j’ai préféré ajouter le bouton à la fin de l’article, car j’estime quand même que mon visiteur doit découvrir le bouton après avoir lu ou disons survolé ma prose.

Ajout d’un bouton tweet et d’un bouton like de facebook est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. Voter sur wikio: insérer un bouton de vote sur le blog
2. Intégrez un bouton de retweet sur blogger, wordpress et autres plates-formes de blogs
3. Google Fight : Make this fight with googleFight Daniel Bouton VS jerome Kerviel
4. Coupez vos longs twitts (tweet) en plusieurs twitts (tweets)
5. Couteau Suisse N°65: Téléchargement de fichiers, Pixel mort, Tweet Positioning

En faisant une petite recheche, je me suis rendu que w3schools.com/tag_iframe justement fournit le code et les explications qui vont avec

Voila le genre de code html  qu’il faut mettre dans votre blog ou site internet.

<iframe src ="url de la page google doc" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Normalement, tous les navigateurs supporte ce standard

Attention avec wordpress, une fois que vous publiez le billet, si vous voulez ensuite corriger votre billet le code aura disparu! C’est le seul inconvenient!

Pas compliqué, mais il fallait juste savoir que ça existe.

Comment intégrer n’importe quelle page html dans un blog ou site est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. Comment intégrer une feuille excel dans un blog
2. Comment intégrer de la pub adsense à l’intérieur des billets dans blogger
3. buzzcounter.net intégrez google buzz dans votre site ou blog
4. Comment chercher des images dans un blog
5. Comment Intégrer un twitt dans un billet

A ce titre, il suffit de taper le code alphanumérique d’une couleur pour obtenir une palette. Si vous ne savez pas ce qu’est un code alphanumérique, vous pouvez choisir une couleur en appuyant sur le petit cercle multicolore.  Il y a un petit tuto sur le site qui explique bien comment on intégre une couleur en code html.

Coloreminder.com

pour trouver d’autres sites du même genres : delicious.com/marothro/couleur?detail=1

Coloreminder: pour trouver des variations de couleurs est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. Colorschemedesigner, pour choisir des couleurs intelligement
2. Trouvez des photos d’un même ton à partir de plusieurs couleurs
3. Openwith: trouver le bon logiciel pour ouvrir un fichier
4. Astuce pour trouver des documents sur internet (même confidentiels)
5. Après la sphère et le mur, surfer sur un cube pour trouver des vidéos

Sur Ideone.com vous avez une liste relativement exhaustive de codes à tester en ligne, et vous pouvez rendre public les codes que vous testez, l’histoire d’en faire profiter les autres. Je trouve cela assez astucieux est sympathique. Dans le même ordre d’idée vous avez également phpanywhere.net.

En tout cas, je mets de côté cet outil en ligne pour un usage futur!

Ideone, testez votre code en ligne c++, python, php, Ruby…. est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. Leçon 11 : Testez votre lettre d’information
2. Leçon 26 : Votre code secret Google Adsense
3. Viewlike.us: testez votre blog ou votre site sur plusieurs tailles d’écran
4. Illustrez votre blog avec Myoats, créez des fonds d’écrans pour votre pc ou iphone
5. Moteur adsense intégré dans ton blog, tu affiches ton code adsense en clair!

Donc ceux qui ont copié mes photos, verront maintenant la photo ci-dessus. Je me fait un peu de pub au passage et vous pouvez voir le résultat sur  Marketing Buzzz: Wikio a sorti un petit outil . Attention je ne critique pas l’auteur de ce billet, je suis sûr que c’est de l’ignorance, car il a eu la gentillesse de faire un lien vers mon blog. Cela dit, il y a surement d’autres personnes qui n’ont fait que piquer mes photos sans même me prévenir, alors c’est pas bien et surtout je suis incapable de savoir combien de mes photos sont hotlinkées, donc incapable de quantifier combien de bande passante on me pique (je présume que c’est très peu)

Problématique:

• ne pas planter mon site en modifiant htaccess
• éviter l’utilisation de bande passante
• ne pas faire en sorte que les clients feedburner et netvibes et autres ne soient affectés (les acteurs majeurs)
• continuer les hotlinking entre mes blogs

N’étant pas un grand spécialiste du domaine, je me faisais une montage du problème, mais en lisant l’excellent tutoriel sur quick-tutoriel.com qui est à mon goût archicomplet.  Et si je l’ai fait, vous pouvez le faire aussi!

Hotlinking: Je viens de protéger ce blog est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. Strip Generator, je viens de créer mon blog en bande dessinée
2. Sni.ps : copier n’est plus voler. Gare quand même au hotlinking
3. blip.fm tu connais? Je viens de découvrir c’est de la musique en ligne
4. Fotoglif.com pour publier des photos dans votre blog et gagner de l’argent??
5. Faire des dons Paypal, je viens d’éliminer ma page

Blogger plate-forme de blog appartenant à google se devrait d’être archi-optimisée pour Google, mais bizarrement j’ai remarqué qu’il y avait une ou deux choses qu’on pouvait faire pour éventuellement améliorer le référencement dans google.

L’image

quand vous insérez une image sur blogger, cela va vous génère le code le code html suivant

<a onblur=”try {parent.deselectBloggerImageGracefully();} catch(e) {}” href=”http://2.bp.blogspot.com/_tfvfOpQyce0/SlSLSbkS_nI/AAAAAAAACqo/qKJdIXntTBI/s1600-h/635411247052534.png”><img style=”margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 400px; height: 70px;” src=”http://2.bp.blogspot.com/_tfvfOpQyce0/SlSLSbkS_nI/AAAAAAAACqo/qKJdIXntTBI/s400/635411247052534.png” alt=”" id=”BLOGGER_PHOTO_ID_5356059005604265586″ border=”0″ /></a>

En rouge, j’ai retiré le code “inutile” (attention ce n’est pas cela qui va améliorer votre référencement), mais ça évite que le lecteur passe sur la photo et clique dessus pour finalement atterrir sur la photo et rien de plus.

Voilà donc le nouveau code (vous pouvez encore retirer quelques fioritures de style si ça vous chante: en bleu mais la mise en page va être altérée)

<img style=”margin: 0pt 10px 10px 0pt; float: left; width: 400px; height: 70px;” src=”http://2.bp.blogspot.com/_tfvfOpQyce0/SlSLSbkS_nI/AAAAAAAACqo/qKJdIXntTBI/s400/635411247052534.png” alt=”" border=”0″ />

Si vous regardez le code de plus près, il y a la balise alt=”" . Pour justement aider google à référencer votre image dans l’index de recherche d’image, autant renseigner cette balise. exemple : alt=”optimiser blogger”

Lien url :

Si vous avez inséré un lien url dans blogger, ça donne ce genre d’html, (le minimum)
<a href=”http://roget.biz/”>Roget.biz</a>

Il serait mieux d’optimiser l’html cette cette manière

<a title=”blog high tech” href=”http://roget.biz” target=”_blank”>Roget.biz</a>

Mettre un titre au lien url ne peut qu’aider à mieux être référence le lien (à mon humble avis) encore plus utile si vous faîtes du lien interne

target=”_blank” permet de lancer le lien sur une nouvelle page et que le lecteur ne quitte pas votre blog, c’est très utile.

Titres

Si vous avez des titres dans vos paragraphes, je pense qu’il est préférable de mettre de hiérarchiser vos titre en mettant des balises du styel h1, h2, h3. Blogger ne se contente que d’augmenter la police, mais n’indique pas la hiérarchie de titre.

<h1>Titres</h1> (titre niveau 1)

<h2>Titres</h2> (titre niveau 2)

___________

Le mieux serait peut-être de trouver un éditeur html simple puis de coller le code html dans blogger.(pour ne pas le faire à partir de wordpress = gros délire)

J’ai écrit ce poste dans le mode “j’écris ce que je fais et je fais ce que j’écris“. Ces petits réglages ne sont peut-être qu’une petite goutte d’eau dans l’optimisation, mais cela prend peu de temps (que je ne prends parfois pas  moi même).

Customisez son blog sur blogger : cas pratique (2/2) en 3 étapes est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. Customisez son blog sur blogger : cas pratique (1/2) en huit étapes
2. Intégrer un moteur de recherche sur un blog géré sur blogger
3. Importez vos blogs dans blogger
4. Migration de Blogger vers WordPress
5. Je me remets à bloguer sur la plate-forme blogger ou blogspot: 8 raisons?

Voilà donc le résultat en tableau :

• La majorité des blogs affichent l’année, le mois, le jour et l’article dans l’url.  Ce qui effectivement paraît logique car un blog est bien un journal de bord à l’origine. D’autre part un blog qui parle de l’actualité se doit également pouvoir faire allusion à la date de publication, cela dit, il n’y a pas de blog à ma connaissance qui n’inscrit pas sa date dans  l’article même.
• Année/mois/article La deuxième catégorie ex aequo avec la troisième est assez commune, elle donne au lecteur une idée suffisamment précise de la date de l’article sans surcharger l’url avec le jour. J’imagine que sur certaines plateformes de blog, cette figure est imposé comme avec blogger.
• 19 blogs affichent   uniquement l’article dans l’url.  La date figurant dans l’article finalement est suffisante?
• Catégorie/article est en 4 ième position, j’aurais pensé que ce choix soit plus commun
• Vient derrière l’option article/numéro qui est très ressemblant avec l’option article uniquement.

Quelques notes :

• il semble que certains blogs jonglent avec plusieurs types de parmalink (ceux sous dotclear? à confirmer)
• deux blogs étaient hs lors du test
• sur certaines plates-formes de blog la figure est imposés
• je suis sûr que ce paramétrage n’a pas été pris en compte pour la plupart des blogueurs au début
• je n’ai pas pris le temps de savoir combien de blogueurs dans cette liste avaient changé de structure d’url en cours de route, mais Christophe logiste l’a fait, il a mis quatre mois avant de retrouver son trafic initial!
• j’ai changé de structure d’url au bout de deux mois, avec ce blog (cf billet sur le sujet), je n’ai rien senti en terme de trafic, tout simplement parce que je n’avais pas de trafic.

Annexe tableau des blogs avec leur structure

Quels sont les permalinks du top 100 wikio high tech? est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. 56 blogs du top 100 high tech de wikio france ont une adresse ip française
2. Moteur de recherche sur les top100 de wikio high-tech
3. Abonne-toi au top 100 Wikio high-tech sur netvibes : c’est par ici
4. Roget.biz numéro 16 high-tech, merci à vous lecteurs rétrolieurs
5. Wikio nettoyage de printemps en automne, 6 raisons qui me font aimer le Wikio nouveau

Pour faire un tableau avec TABLEIZER, je ne vais plus avoir ce soucis, c’est un jeu d’enfant, il suffit de créer un tableau dans excel ou dans google, coller le tableau dans la fenêtre de saisie du TABLEIZER, récupérer le code html et  on obtient le résultat ultra rapide de ce type. (ne pas oublier de passer le poste en mode html pour copier le texte)

On peut choisir la grosseur du caractère, la police et la couleur de la première ligne. Franchement il me fallait un truc aussi simple pour mon usage peronnel. (je ne suis pas arrivé à centrer la bête au milieu du tableau, mais cela ne saurait tarder.

Pour faire la même chose sur votre blog c’est sur tableizer.journalistopia.com

Tableizer, créez un tableau dans votre blog est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. Faites des fautes d’orthographe dans votre blog : cas pratique
2. Leçon 32 : Insérez un moteur de recherche dans votre blog
3. Leçon 31 : Créez un deuxième blog et conseils
4. Leçon 25 : Insitez vos lecteurs à mettre votre blog dans leurs favoris
5. Leçon 19 : Insérez un diaporama dans votre blog

Voila donc le code en question (pas de plugin ce coup)

<?php comments_rss_link('» Abonnez vous au flux RSS des commentaires de ce billet'); ?>

Il faut placer ce bout de code dans votre fichier comment.php à l’endroit où vous voulez. Je pense qu’il faut le placer bien en vue juste au dessus de la boîte de saisie du commentaire et changer ”

En attendant d’installer l’option de “pouvoir s’abonner par mailsans pour cela avoir à commenter“, cette petite astuce est utile.

Ok mon blog n’a pas encore de nombreux commentaires, mais ça vient tout doucement alors autant faciliter la tâche des lecteurs.

Je n’ai pas trouvé ce truc seul, je me suis inspiré sur wprecipes.com

WordPress : s’abonner au flux RSS des commentaires d’un billet est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. Inclure des annonoces Adsense dans du php wordpress
2. Plugin wordpress : Comment luv et Top commentateurs pour améliorer la fidélité des lecteurs
3. 1 troll c’est peut être la mouche sur le plat blanc d’un blog et mon 600 ième billet
4. Autolink, un plugin wordpress qui permet de faire des liens automatiques
5. Le plugin Popularity Contest sur WordPress, légérement bogué

J’ai donc installé most-commented. Critère de choix? le nombre d’étoiles qui figure sur la page, comme quoi il ne faut pas grand chose pour choisir un plugin.

La procédure d’installation est toujours la même, il suffit de lire les instructions. Ce plugin n’est pas widgetisé, cela veut dire qu’on ne peut pas le trouver dans la partie widget et faire un drag and drop sur la sidebar de son choix.

Il faut aller coder le texte en dure. Pour cela il faut aller dans l’éditeur de thème de wordpress et choisir l’endroit ou on va installer le code.

J’ai choisi la fin de la sidebar sidebar.php et j’ai placé le code suivant juste au dessus de la dernière ligne </div>

<li><h2>Billets les plus commentés</h2>
<ul>
<?php mdv_most_commented(); ?>
</ul>
</li>

Maintenant l’instruction principale est <?php mdv_most_commented(); ?>. Cette instruction prend  l’ensemble des billets écrits depuis la nuit des temps, ce qui est dit dans le fichier readme.txt joint au plugin (toujours lire le fichier readme.txt) Ce qui est dit dans readme.txt c’est qu’on peut y ajouter quelques atributs. Exemple les plus commentés dans les derniers 300 jours.

l’exemple donné : `mdv_most_commented(10, ”, ‘<br />’, true, 300)`

les paramètres
$no_posts – ajuste le nombre de billet les plus commenté soit 10 dans l’exemple
$before – texte avant le titre du billet soit aucun dans l’exemple
$after – texte à faire apparaitre après le titre dans l’exemple -retour à la ligne ‘<br />’
$show_pass_post – montrer ou non les billets protégés par un mot de passe – j’ai laissé true
$duration – mettre les articles les plus commentés depuis un certain nombre de jours – j’ai mis 300 jours

Ainsi j’ai mis le code suivant

<li><h2>Billets les plus commentés</h2>
<ul>
<?php mdv_most_commented(10, ”, ‘<br />’, true, 300); ?>
</ul>
</li>

Voilà c’est tout et c’est déjà pas mal, car à l’idée d’aller changer le code du thème ne me plait guère car le jour où je migrerai vers un autre thème, tout cela devra être reprogrammé à la main.

Most Commented un plugin qui permet d’afficher les articles plus commentés est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. Autolink, un plugin wordpress qui permet de faire des liens automatiques
2. Le plugin Popularity Contest sur WordPress, légérement bogué
3. Clean Archives Reloaded : un nouveau plugin sur ce blog et 9 autres moyens d’accéder aux archives
4. Highlight Comments un plugin qui met en valeur vos réponses aux commenaires
5. Feedburner : pas besoin d’activer de plugin, ou de copier coller les scripts dans ton thème

On peut faire ça de plusieurs manières la première sur wordpress est d’insérer la balise <!–more–> c’est que j’ai fait jusqu’à aujourd’hui. Cela dit la partie “articles relatifs” restait en première page et cela ne me plaisait pas.

Une deuxième technique est de modifier la partie design. Pour cela allez dans le “theme editor” de wordpress et  modifiez la page index.php qui est la page PHP qui s’affiche quand vous êtes sur la racine du blog (cf  http://roget.biz).

On a le choix entre montrer l’ensemble des articles ou un extrait (excerpt). J’ai changé justement le “content” en mettant le “excerpt” (cf le site de wordpress Codex.wordpress.org/Template_Tags/the_excerpt qui nous explique quand dans la loop (boucle qui permet d’afficher un à plusieurs billets)

Pour être simple, il faut changer le code “the_content” par “the_excerpt” dans index.php

On peut procéder à la même manipulation dans la page “archive.php” qui est la page qui s’affiche quand on clique dans une catégorie ou sur un tag.

Ne pas changer le code dans la page single.php

Il est également recommandé de le faire sur les résultats du moteur de recherche dans la page search.php, dans mon cas sur cette page j’ai carrément enlevé l’affiche du texte en ne laissant que le titre, car j’estime que c’est suffisant car mes titres sont longs et explicites. (jusqu’à preuve du contraire)

Pourquoi faire une telle manipulation? Cela permet au lecteur d’avoir un aperçu rapide du contenu du blog sans l’obliger  à actionner l’ascenseur de la fenêtre du navigateur ou la souris. C’est d’ailleurs pour cela qu’il faut absolument peaufiner les titres et le début des articles d’un blog. A cette fin l’excerpt reprend seulement les 55 mots de l’article. C’est donc dans ces 55 mots que le contenu doit inciter le lecteur à cliquer sur l’article et le lire dans sa totalité.

On peut référer ces 55 mots au  “lead” (en anglais) ou à l’amorce de l’article (en français). Dans wordpress on appelle cela le “teaser” (inciteur). Si on ne souhaite pas que le texte soit coupé au bout des 55 mots on peut toujours, dans la partie édition du texte, remplir la partie Excerpt. (version française : option avancée, extrait?) d’autant de mot qu’on veut faire afficher sur la page du blog.

Beaucoup de thème wordpress sont fournis de base avec l’excerpt et non le content c’est le cas des thèmes magazine surtout.

Conclusion, c’est une manipulation simple, mais n’y connaissant absolument rien en PHP, je m’étais un peu fait une montagne pour entreprendre un tel changement. A conseiller à tout le monde.

Conseil : afficher une partie de l’article en page d’accueil, pour faciliter la lecture du blog est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. becomeablogger.com : Tutorial pour monter un blog
2. Guide-optimisation.com: Un guide pour bien référencer son blog
3. Change Detection : Etre notifié par mail pour savoir si une page sur internet a été mise à jour
4. Obsession de perdre ses données, conseil d’un baroudeur
5. Read more Lire la suite (pour débutant)

Attention il s’agit d’un guide plutôt simple, les gourous n’y apprendront peut être pas grand chose, mais les débutants seront comblés. J’y ai appris une bonne chose quant à la définition de la densité d’un mot clé, où si tu blogues sur un sujet, ton mot clé ne doit être ni trop répété, ni pas assez. La densité d’un mot clé se calcule par le ration entre les mots clés que tu mets dans ton billet et le nombre de mots de ton billet. Il est expliqué que la densité d’un mot clé doit être situé entre 5 et 10%.

L’avantage avec wordpress, c’est que si tu as installé le  Plugin All in One SEO Pack sur ton blog, tu n’auras pas besoin de rentrer trop dans le code html de tes billets, d’autre part si tu suis les insructions pour bien mettre en valeur les photos et les liens url, là encore avec wordpress, tu n’as pas à te préocuper de coder en HTML.

Un bon guide de rappel, maintenant, il faudrait quand même relooker le site car il fait vraiment siècle dernier en plus la jolie jeune fille qui apparaît sur la première page à l’ai enrhumée.

Guide-optimisation.com: Un guide pour bien référencer son blog est un billet de Cocktail Web Roget rédigé par Thierry Roget Mes partenaires www.bluehost.com www.elegantthemes.com www.dreamhost.com

lire aussi:

1. Leçon 23 : Référencer votre blog sur Yahoo.
2. Leçon 24 : Référencer votre blog sur MSN
3. Faire un bilan mensuel pour son blog : Une analyse obligatoire pour éviter la divergence
4. 15 Conseils pour faire un bon blog qui rapporte de l’argent
5. Revenu d’un blog pour 1000 pages vues