Dynamisez vos notes avec vos archives et LinkWithin

Kielut l'a vu dans d'autres blogs, elle l'a voulu dans le sien. Au bas de chaque note de blog, le widget LinkWithin affiche les liens vers des notes "similaires", selon le contenu, le titre ou les tags. La note explicative d'origine a été publiée sur Upsetdiary, et nous l'avons fait évoluer ensemble pour cette version avec vidéo.

LinkWithin affiche une image en vignette et le titre de chaque note en relation avec la note en cours. Le titre s'affiche seul quand la note en lien ne contient aucune image.

Il suffit de cliquer sur une vignette ou un titre pour lire la note proposée. Ainsi, LinkWithin recycle vos archives et met vos notes en avant.

Préparez le code à intégrer dans vos pages

Gee Mee recommande de copier les lignes ci-dessous, et de les coller dans un éditeur en mode texte pour préparer le code que vous intégrerez.

<!-- link within /head-->
<script>
var linkwithin_site_id = xxx;
</script><script>linkwithin_text='Your custom text:'</script>
<!-- /link within /head-->

<!-- linkwithin /postbottom-->
<div id="pre linkwithin" style="padding: 0px 0px;">
<div class="linkwithin_div"></div>
<script src="http://www.linkwithin.com/widget.js"></script>
</div>
<!-- /linkwithin /postbottom-->

 

Obtenir le code html partiel pour intégrer le widget LinkWithin

1. Cliquez ici pour afficher le site LinkWithin - Related Posts with Thumbnails
2. Remplissez le formulaire. Sélectionnez les valeurs indiquées ci-dessous.
3. Cochez l'option My blog has light text on a dark background si le texte de votre blog s'affiche sur fond foncé.

Email:
Blog Link:
Platform:	Other WordPress (self-hosted) TypePad Blogger
Width:	3 stories 4 stories 5 stories
	My blog has light text on a dark background
	Free. No ads. No signups. More traffic.

4. Cliquez sur le bouton Get Widget! L'écran Install Widget on Other Platforms affiche le code html qui sert à intégrer le widget dans votre blog.

<script>
var linkwithin_site_id = 9537;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>

Copiez et collez ce code après celui que vous avez récupéré au début de cette note

Si LinkWithin s'installe automatiquement pour les services de blogging les plus connus, il est nécessaire de personnaliser la présentation d'un blog hautETfort pour que le widget s'affiche correctement.

Finalisez le code à intégrer

• La valeur var linkwithin_site_id est l'identifiant unique pour votre blog.
  Remplacez donc les "xxx" par l'identifiant que vous venez d'obtenir chez LinkWithin

• Le code <script>linkwithin_text='Your custom text:'</script> est facultatif. Il sert à remplacer la phrase "Vous aimerez peut-être :" qui présente les notes en relation avec la note en cours.
  Au besoin, copiez-collez ce code et remplacez la valeur Your custom text: par votre texte personnalisé (Autres notes au hasard : par exemple)

Nous aurions par exemple les portions de code suivantes

<!-- link within /head-->
<script>
var linkwithin_site_id = 9537;
</script><script>linkwithin_text='Autres notes au hasard :'</script>
<!-- /link within /head-->

<!-- linkwithin /postbottom-->
<div id="pre linkwithin" style="padding: 0px 0px;">
<div class="linkwithin_div"></div>
<script src="http://www.linkwithin.com/widget.js"></script>
</div>
<!-- /linkwithin /postbottom-->

Comment intégrer le wigdet Linkwithin dans un blog hautEtfort?

1. Cliquez sur l'onglet PRESENTATION de l'Editeur de blog hautETfort.
2. Cliquez sur Configuration avancée
3. Cliquez sur Je veux aller dans le design avancé
4. Face au Modèle de la page lien permanent, cliquez sur Modifier le template
5. Dans la source html du modèle, localisez la balise </head>
6. Positionnez vous juste avant, et collez la première portion de code
   comprise entre <!-- link within /head--> et <!-- /link within /head-->
7. Dans la source html du modèle, localisez la balise <div=class postbottom>
8. Positionnez vous juste avant, et collez la seconde portion de code
   comprise entre <!-- link within postbottom--> et <!-- /link within postbottom-->
9. Cliquez sur le bouton Enregistrer les modifications
10. Fermez la fenêtre Modifier le modèle de la page lien permanent

La ligne <div id="pre linkwithin" style="padding: 0px 0px;"> permet d'ajuster l'alignement du bloc dans lequel s'afficheront les notes repérées par LinkWithin.

N'oubliez pas de vous armer d'un minimum de patience, l'indexation peut prendre un "certain temps". Quand cela sera effectif, vous aurez sans doute la surprise de voir "remonter" des notes oubliées... ou que vous préféreriez oublier.

Vous pourrez compléter la lecture de cette note avec : Personnaliser l'affichage des notes relatives avec LinkWithin