Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

05.01.2010

Ajouter un bouton de vote Wikio pour chaque note de votre blog Hautetfort

Alors que See Mee entame une saga Wikio sur son blog, à laquelle on souhaite autant de succès que celle qu'elle a pu consacrer ici à FeedBurner, il peut être utile de rappeler comment intégrer les boutons de votes Wikio au pied de la note. Pour mémoire, le nombre de vote n'est pas pris en considération dans le classement Wikio, mais c'est une question sur laquelle See Mee ne manquera pas de revenir.

Dans l'administration de votre blog Hautetfort, vous cliquerez d'abord sur l'onglet TABLEAU DE BORD pour vous intéresser à la section Propriétés d'affichage.
Si vous trouvez en première ligne le réglage du nombre de notes à afficher sur la page d'accueil, vous trouvez Pied de la note en deuxième ligne.
Vous cliquerez sur configurer pour choisir les éléments qui vous intéressent.


Hautetfort_configuer_pied_de_note.pngSi vous administrez un blog collaboratif, pensez à activer "auteurs" pour que chaque note puisse être attribuée sans erreur.
Si vous cochez "AddThis", au survol du bouton, un pop-up sera affiché pour choisir le service sur lequel vous souhaitez partager l'information. Vous y trouverez notamment Delicious, Digg et Facebook, mais pas encore Wikio. Il paraît que cela devrait se faire. Cela me paraît d'autant moins certain que Wikio lui-même propose une fonctionnalité concurrente avec son bouton universel de partage, mais nous y reviendrons plus tard.

Admettons donc que toutes les fonctionnalités sont cochées, vous cliquez sur [enregistrer] et cela fonctionnera dès la première actualisation de page. Ce qui suit intéressera surtout ceux qui veulent comprendre le code et ou personnaliser leur bouton de vote.

Pour information, si vous n'aviez jusque là pas encore modifié le pied de la note, son modèle devient alors accessible en "configuration avancée".


Toutes options cochées, le code "Hautetfort" est le suivant :

{$post.pubdate|date_format:"`$blog.time_format`"} {t}Posted by{/t} {$post.user|authorname} {if $post.categories}{t}in{/t} {foreach name="categories" from=$post.categories item="cat"}
<a href="{$cat.url}">{$cat.name}</a>{if !$smarty.foreach.categories.last}, {/if}
{/foreach} {/if} | <a href="{$post.post_permalink}" id="a{$post.iteration}">{t}Permalink{/t}</a> {if $post.allowcomments!=1} | <a href="{$post.post_permalink}#comments">{t}Comments{/t} ({$post.commentcount})</a> {/if}{if $post.allowtrackbacks==1} | <a href="{$post.post_permalink}#trackbacks">{t}Trackbacks{/t} ({$post.trackbackcount|default:"0"})</a> {/if} | {if $blog.blog_type neq 'photoblog'}
<a href="javascript:void(0)" onclick="toggle_emailthis('div_send{$post.post_id}',{$post.post_id});">{t}Email this{/t}</a>
{/if}

{tags post="`$post.post_id`" assign="tag"}{if $tag.first} | {t}Tags:{/t}{/if} <a href="{$blog.url}tag/{$tag.name|urlencode|replace:"%2F":"/"}">{$tag.name}</a>{if !$tag.last}, {/if}{/tags} | <a href="http://www.wikio.fr/vote?url={$post.post_permalink|urlencode}" target="_tab"><img src="http://www.wikio.fr/shared/img/vote/wikio4.gif" style="height:15px;border:none;vertical-align:text-bottom;"/></a> | <a href="http://del.icio.us/post?url={$post.post_permalink|urlencode}"><img src="http://images.del.icio.us/static/img/delicious.small.gif" style="height:14px;border:none;vertical-align:text-bottom;"/> &nbsp;del.icio.us</a>
| <!-- AddThis Button BEGIN -->
<script type="text/javascript">addthis_pub = 'blogspirit';</script>
<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '{$post.post_permalink|urlencode}', '{$post.post_title|urlencode}')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-addthis.gif" alt="" style="height:16px;border:none;vertical-align:text-bottom; "/></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- AddThis Button END --> | <a href="http://digg.com/submit?url={$post.post_permalink|urlencode}&title={$post.post_title|urlencode}&bodytext={$post.post_source|strip_tags|truncate:"100":""}&media=news"><img src="http://digg.com/img/badges/16x16-digg-guy.gif" alt="Digg!" style="height:15px;border:none;vertical-align:text-bottom;" />&nbsp;Digg</a> | <a href="http://www.facebook.com/share.php?u={$post.post_permalink|urlencode}&t={$post.post_title|urlencode}" target="_blank"><img src="http://static.ak.facebook.com/images/share/facebook_share_icon.gif" style="height:15px;border:none;vertical-align:text-bottom;" />&nbsp;Facebook</a>


Vous avez pu remarquer que le mien était différent. (Vous avez pu ?-) Je n'ai pas souhaité conserver l'organisation d'origine des différents éléments, et puis si j'ai voulu proposer le service AddThis, j'ai préféré le mot "Partage" à l'image habituelle. Autant d'interventions détaillées dans "Modifier le pied de note".

De plus, pour Wikio, j'ai préféré utiliser une image plus discrète dont j'ai repéré l'adresse sur le site du service. Le code de mon pied de page est donc le suivant, les différents éléments sont surlignés par alternance pour que vous puissiez les distinguer.

{$post.pubdate|date_format:"`$blog.time_format`"}
{t} Ecrit par {/t}
{$post.user|authorname}
|
<a href="{$post.post_permalink}" id="a{$post.iteration}">{t} Lien permanent {/t}</a>
{if $post.allowcomments!=1} |
<a href="{$post.post_permalink}#comments"> {t} Commentaires {/t} ({$post.commentcount}) </a>
{/if}
| {if $blog.blog_type neq 'photoblog'}
<a href="javascript:void(0)" onclick="toggle_emailthis('div_send{$post.post_id}',{$post.post_id});">{t} Courriel {/t}</a>
{/if}
<!-- AddThis Button BEGIN -->
<script type="text/javascript">addthis_pub = 'blogspirit';</script>
<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '{$post.post_permalink|urlencode}', '{$post.post_title|urlencode}')" onmouseout="addthis_close()" onclick="return addthis_sendto()"> | {t} Partage {/t}</a>
<script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script><!-- AddThis Button END -->
&nbsp;<a href="http://www.wikio.fr/vote?url={$post.post_permalink|urlencode}" target="_tab"><img src="http://www.wikio.fr/shared/images/wikiothis/popup/icon-wikio-share.gif" style="height:15px;border:none;vertical-align:text-bottom;"/></a>
<br>
<!--cat-->{if $post.categories}{t}Dans : {/t}
{foreach name="categories" from=$post.categories item="cat"}
<a href="{$cat.url}">{$cat.name}</a>
{if !$smarty.foreach.categories.last}, {/if}
{/foreach} |
{/if}<!--/cat-->

{tags post="`$post.post_id`" assign="tag"}
{if $tag.first}&nbsp;{t}Tags:{/t}{/if} <a href="{$blog.url}tag/{$tag.name|urlencode|replace:"%2F":"/"}">{$tag.name}</a>
{if !$tag.last}, {/if}
{/tags}


Rappels

- Si vous avez déjà un pied de note personnalisé, n'oubliez pas d'en sauvegarder le code avant d'intervenir dans les propriétés d'affichage pour le re-configurer car son modèle est alors ré-initialisé. C'est comme pour la gestion des éléments de colonne.

- Wikio propose ses propres boutons de partage, nous y reviendrons bientôt.

09:20 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (7) | Tags : wikio, pied de note, bouton | |  del.icio.us | | Digg! Digg |  Facebook

Commentaires

Ce qu'il faudrait c'est pouvoir intégrer de manière automatique un bouton de vote DANS la note (comme cela est possible sous Wordpress, blogger,...).
Le faire de manière artisanale est un peu fastidieux (fastidieux signifiant pour l'occasion: j'ai renoncé).

Écrit par : Ferocias | 10.01.2010

Répondre à ce commentaire

Ben alors Férocias, tu sais pourtant que ce genre d'outils peut faciliter la promotion de tes billets... et peut-être améliorer ton classement ! Un petit effort, voyons...

Gee Mee, très bonne idée ce billet !

Écrit par : See Mee | 10.01.2010

Répondre à ce commentaire

Merci See Mee. Ferocias a déjà mis en place les boutons Wikio, il maîtrise. Ce qui me fait douter de l'esprit de sa question, nous éclaircirons cela.

Écrit par : Gee Mee | 11.01.2010

J'ai peur de ne pas comprendre, Ferocias, où serait-ce donc "DANS" la note ?

Pour l'intégration automatique d'un bouton dans le pied de note, il y a la méthode exposée ici.
Si c'est ailleurs, mais toujours au même endroit, il y a moyen de créer un automatisme (cela exigera de modifier le modèle de page, voilà tout).

Si la place est variable, effectivement, faute de script pour H&F, on en revient à l'artisanat.
il faut juste insérer un lien hypertexte sur un mot ou une image, avec href="http://www.wikio.fr/vote?url=" suivi de l'adresse du lien permanent. Il est vrai qu'il faut remplacer [:] par [%3A] et [/] par [%2F] mais c'est surmontable, non ?
http://www.wikio.fr/vote?url=http%3A%2F%2Fgeemee.hautetfort.com%2Farchive%2F2010%2F01%2F04%2Fajouter-bouton-vote-wikio-blog-hautetfort.html

N'hésitez pas à éclairer ma lanterne que nous partagions nos lumières ;-)

Écrit par : Gee Mee | 11.01.2010

Répondre à ce commentaire

Hi hi je crois que je comprends ce qu'a voulu dire Ferocias... mais je le laisse répondre.

Écrit par : See Mee | 11.01.2010

@ Gee Mee et See Mee: Le pied de page je maîtrise, pas de problème.
Avec Blogonet on peut insérer un bouton directement dans la note (de manière automatique): http://help.blogonet.fr/r11-inserer-un-bouton-de-vote-sur-votre-blog.html
Avec Wikio, il me semble que cela existait mais apparemment (ou j'ai mal cherché), le bouton de vote n'existe plus ( pas trouvé sur la page http://www.wikio.fr/tools/sharethis?referrer=%2Ftools%2Fadd-rss&backto=%2F ).
J'ai vu sur certains blogs ces boutons apparaissant au début de la note (par exemple). l'avantage est certain: pas besoin de tout lire pour voter (les stats, les votes, les classements sont beaucoup plus importants que le contenu n'est-il pas? ^__ ^)
Par exemple dans la note: http://lespeuplesdusoleil.hautetfort.com/archive/2009/07/23/gadton-leroux-l-epouse-du-soleil-1er-episode.html il y a un bouton dans le corps de la note mais il faut faire la manipulation à chaque fois.
Es-ce plus clair?

Écrit par : Ferocias | 11.01.2010

Répondre à ce commentaire

J'ai voté ! :-)

Mais prenez donc votre pied de note Ferocias, et copiez la partie de code qui concerne le bouton de vote pour la coller à proximité du titre de la note dans la page lien permanent si cela vous paraît pertinent.
Permettez-moi de vous suggérer l'utilisation de la "petite" image dans ce cas. On doit pouvoir la caser juste avant le titre de la note.
Si vous rencontrez une difficulté, faites-le moi savoir.

Écrit par : Gee Mee | 11.01.2010

Les commentaires sont fermés.