Ajouter un agenda sur votre blog

septembre 26, 2008 5 comments

Bienvenue sur le Journal du Blog, vous pouvez vous abonner au flux RSS. Merci pour votre visite!

Vous êtes nombreux a vouloir partager des événements sur votre blog grâce à un petit agenda dans votre sidebar. Les solutions fournies nativement sur les blog sont souvent très sommaires. Par exemple sur Wordpress, il ne permet que d’afficher les articles pour une date donnée. Nous allons voir des solutions vous permettant de partager des évènements avec vos lecteurs (agenda perso, soirées blogueurs etc.)

Quelle solution choisir ?

Avant de rentrer dans le détail, vous devez déterminer l’utilisation que vous aurez de cet agenda (mais aussi vos internautes). Par exemple, si vous utilisez déjà un service d’agenda comme Google Agenda ou iCal, il peut être intéressant de le faire interagir avec votre blog. Vous pouvez aussi préférer gérer l’agenda directement depuis l’admin de votre blog.

La solution complète (idéale)

Il s’agit d’un service spécialisé dans la gestion d’agenda : Spongecell. Grâce à un widget personnalisable, vous allez pouvoir insérer l’agenda directement dans votre sidebar. Ce service est sans doute le plus complet, vous pouvez ajouter un maximum d’informations sur chaque évènement. Le service propose également une série d’outils de promotion de vos évènements (par mail par exemple), pratique si vous êtes organisateur de l’évènement. Il existe d’ailleurs une page pour que les invités acceptent et partagent l’invitation. (cliquez sur les captures). Voir aussi Amiando.

image-111-150x150 Ajouter un agenda sur votre blog image-121-150x150 Ajouter un agenda sur votre blog image-132-150x150 Ajouter un agenda sur votre blog

Google Agenda

Les outils Google étant une référence, il parait judicieux de vouloir intégrer un agenda Google directement dans la sidebar de votre blog. Dans la gestion des agenda, choisissez l’agenda à partager puis cliquez sur “insérer cet agenda”, cliquez sur “personnaliser la taille, et d’autres options” (cliquez sur les images). Il ne vous reste plus qu’à coller le code là où vous souhaitez afficher l’agenda.

image-10-150x150 Ajouter un agenda sur votre blog image-7-150x150 Ajouter un agenda sur votre blog

Deux plugins Wordpress permettent d’afficher Google Agenda dans votre sidebar :

Agenda Facebook

Facebook étant devenu incontournable pour annoncer des évènements, il peut être intéressant de l’intégrer sur votre blog. Grâce à l’application Facebook fbCal, vous allez pouvoir créer un flux RSS pour votre agenda d’anniversaire et d’évènements. Une fois ce flux RSS récupéré, il ne vous reste plus qu’à utiliser un widget RSS (Wowzio par exemple)

fbcal-150x150 Ajouter un agenda sur votre blog

Plugin Wordpress

Il existe plusieurs plugins pour proposer un agenda d’évènement sur votre blog Wordpress. La référence est de loin le plugin Event Calendar. Vous créez un événement de la même manière qu’un article en y ajoutant une date/heure de début puis de fin et la catégorie correspondant (agenda par exemle). Le gros bémol est que ce plugin utilise du javascript souvent conflictuel avec d’autres plugins. (auquel cas vous devez bidouiller pour le faire fonctionner). Event Calendar propose différent type d’affichage du calendrier (éphéméride, liste etc.), un flux iCal est également proposé grâce à ce plugin ainsi qu’une navigation en Ajax.

Dans le même genre il existe également :

La liste des plugins Wordpress utilisés sur le Journal du Blog

septembre 23, 2008 22 comments

Vous êtes nombreux à nous demander quels plugins Wordpress nous utilisons, voici la liste des plugins du Journal du Blog. La liste est longue, c’est le prix à payer pour utiliser Wordpress comme un magazine de ce type.

Liste des plugins :

©Feed 4.7.1 ©Feed 4.7.1
» Frank Bueltge (url)
Pour aller plus loin avec vos flux RSS. Ce plugin vous permettra de surveiller si votre contenu n’est pas volé (rapport de duplicata, digital fingerprint et IP des lecteurs du flux). Il vous permettra également d’ajouter du code avant et après le contenu du flux (utile pour ajouter un copyright par exemple). Permet également l’affichage des articles relatifs dans le flux en complément du plugin Simple Tags (voir plus bas).

4Avatars 0.3.1 4Avatars 0.3.1
» b4it (url)
Pour afficher l’avatar Mybloglog ou Gravatar dans les commentaires.

Akismet 2.1.5 Akismet 2.1.5
» Matt Mullenweg (url)
Le plugin antispam par excellence. Lire l’article de kReEstal pour lutter contre le Spam.

All in One SEO Pack 1.4.6.8 All in One SEO Pack 1.4.6.8
» uberdose (url)
L’un des plugins les plus complet en matière de SEO. Il vous permet d’optimiser les titres et métas de chaque article et page.

Audio player 1.2.3 Audio player 1.2.3
» Martin Laine (url)
Ajouter un joli lecteur mp3 dans vos articles. Voir par exemple l‘interview de Presse Citron.

Autor Exposed 1.0 Autor Exposed 1.0
» Igor Penjivrag (url)
Permet d’afficher les détails sur l’auteur de l’article. Pratique pour mettre en avant les auteurs du Blog. Cliquez sur le nom de l’auteur sous le titre de l’article pour avoir les infos le concernant.

Chunk Urls for WordPress 2.0 Chunk Urls for WordPress 2.0
» whoo (url)
Ce plugin raccourci les urls dans les commentaires afin d’éviter qu’elles ne déborde de la colonne.

Comment Info Tip 1.0 Comment Info Tip 1.0
» Mark Angeletti (url)
Lorsque vous passez le curseur sur le nom d’un commentateur, une bulle d’info s’affiche. Elle précise les articles commentés par cette même personne mais aussi les derniers articles de son blog.

Contact Form ][ 2.0.13 Contact Form ][ 2.0.13
» Chip Cuccio (url)
Permet de générer une page de contact toute simple. Aucun problème de spam avec ce plugin.

DoFollow 4.0 DoFollow 4.0
» Kimmo Suominen (url)
Grâce à ce plugin vous allez pouvoir configurer l’attribut “rel=nofollow” sur les liens des commentateurs. Voir l’article sur le dofollow.

Easy Tube 1.5 Easy Tube 1.5
» Paul Bain (url)
Un plugin qui permet d’afficher simplement des vidéos Youtube dans vos articles (avec un code valide).

Executable PHP widget 1.1 Executable PHP widget 1.1
» Otto (url)
Solution pour insérer du php dans les widgets de votre blog. Pratique pour ajouter un formulaire dans la sidebar.

External Links 2.12 External Links 2.12
» Denis de Bernardy (url)
Ajoute une class=”external” à tous les liens sortants. Autrement dit, les liens externes au blog s’ouvrent dans une nouvelle page. Utile pour que les internautes ne quitte pas votre site.

FeedBurner FeedSmith 2.3.1 FeedBurner FeedSmith 2.3.1
» FeedBurner (url)
Remplace automatique le flux RSS de Wordpress par votre flux RSS.

Feed Count 1.2 Feed Count 1.2
» Francesco Mapelli (url)
Permet d’afficher le nombre d’abonnés à votre flux RSS sous la forme d’un texte. Vous pourrez spécifier le texte à afficher avant et après le nombre d’abonnés.

Genki Announcement 1.4 Genki Announcement 1.4
» Genkisan - i18n patched by Masayan (url)
Permet d’afficher un message à vos lecteurs. Pour faire une annonce particulière par exemple.

Google XML Sitemaps 3.1 Google XML Sitemaps 3.1
» Arne Brachhold (url)
Ce plugin génère un Sitemap XML pour votre blog. Plugin indispensable pour optimiser le référencement de votre blog. Ce sitemap devra ensuite être déclaré dans Google Webmaster Tool. Voir la vidéo explicative sur cet outil.

IMM-Glossary 2.1.1 IMM-Glossary 2.1.1
» Internet Marketing Monitor (url)
Permet de créer un glossaire sur votre blog. Vous définissez une liste de mots et leur description, chaque fois que vous utiliserez ce mot un lien renverra vers la description (ou un pop). Nous sommes par ailleurs en train de rédiger le glossaire du Journal du Blog.

iWPhone 0.1.2 iWPhone 0.1.2
» ContentRobot (url)
Ce plugin adapte votre blog au format iPhone. Indispensable vu le nombre d’utilisateurs d’iPhone à l’heure actuelle.

Keywords Autolink 0.1 Keywords Autolink 0.1
» Julien Chauvin (url)
Grâce à ce plugin, vous allez pouvoir créer des liens automatiquement sur des mots clés. Sur le Journal du Blog chaque fois que nous utilisons le mot Wordpress (sans lien) il rajoute un lien vers la page du Tag Wordpress.

Link Exchange Manager 1.4 Link Exchange Manager 1.4
» eBrandMarketing (url)
Permet de gérer les échanges de liens. Nous l’avons détourné pour créer l’annuaire des lecteurs du Journal du Blog (lancement dans les prochains jours)

MCEComments 0.4.4-4 MCEComments 0.4.4-4
» Thomas Au(MK) (url)
Ajoute un éditeur WYSIWYG dans les commentaires. Utile pour que les lecteurs puissent mettre en forme leurs commentaires.

Most Commented 1.4 Most Commented 1.4
» Nick Momrik (url)
Permet d’afficher les articles ayant le plus de commentaires (utilisé dans les onglets)

No Flash Uploader 1.0 No Flash Uploader 1.0
» Dion Hulse (url)
Désactive l’uploader d’image en Flash apparut avec la version 2.5 de Wordpress.

Performancing Ads 1.2 Performancing Ads 1.2
» The Performancing Ads Team (url)
Pour intégrer les bannière Performancing Ads sur votre blog. Visible tout en bas de notre sidebar.

Popularity Contest 1.3b3 Popularity Contest 1.3b3
» Alex King (url)
Permet d’afficher vos article en fonction de leur popularité (vue, commentaires etc).

RSS Footer 0.7.5 RSS Footer 0.7.5
» Joost de Valk (url)
Permet d’afficher une portion de code à la fin de votre flux RSS (complémentaire à ©Feed)

SEO Friendly Images 2.2 SEO Friendly Images 2.2
» Vladimir Prelovac (url)
Ajoute automatiquement un attribut “alt” et “title” à vos images. Indispensable pour bien référencer vos images sur Google images. Voir notre article sur l’optimisation du référencement des images.

SEO Title Tag 2.2.1 SEO Title Tag 2.2.1
» Stephan Spencer, Netconcepts (url)
Optimise la balise Title pour chacun de vos articles grâce aux tags.

Sideblog Wordpress Plugin 5.1 Sideblog Wordpress Plugin 5.1
» Kates Gasis (url)
Utilisé pour afficher la rubrique actualité sur le Journal du Blog. Ce plugin permet de séparer une catégorie du contenu principal pour l’afficher dans une colonne. Le contenu apparait toujours dans le flux RSS.

Similar Posts 2.5.0 Similar Posts 2.5.0
» Rob Marsh, SJ (url)
Affiche une liste (configurable) des articles similaire. Cliquez sur “article similaire” sous le titre des articles pour voir le résultat.

Simple Tags 1.5.7 Simple Tags 1.5.7
» Amaury BALMER (url)
Sans doute le plugin le plus complet pour la gestion des tags sur Wordpress. A utiliser sans hésitation.

SRG Clean Archives 4.2 SRG Clean Archives 4.2
» Geek With Laptop (url)
Affiche vos articles sur une page dédiée. Voir la page d’archives du Journal du Blog.

Subscribe To Comments 2.1.2 Subscribe To Comments 2.1.2
» Mark Jaquith (url)
Plugin permettant aux internautes qui commentent de recevoir les commentaires suivants par email (pour suivre la conversation)

SyntaxHighlighter 1.1.1 SyntaxHighlighter 1.1.1
» Matt, Viper007Bond, and mdawaffe (url)
Pour afficher du code dans vos articles. Voir par exemple l’article pour afficher une galerie Flickr.

Ultimate Google Analytics 1.6.0 Ultimate Google Analytics 1.6.0
» Wilfred van der Deijl (url)
Ajoute automatiquement le code Google Analytics sur toutes vos pages. Si vous n’utilisez pas Google Analytics, jetez un œil à notre article sur les outils de statistiques gratuits.

What Would Seth Godin Do 1.5 What Would Seth Godin Do 1.5
» Richard K Miller (url)
Affiche un message personnalisé aux lecteurs. Ce message peut être différent s’ils sont nouveaux ou habitués. Utilisé sur le Journal du Blog pour suggérer l’abonnement au flux RSS.

Wordpress Multi URI Ping 0.9 Wordpress Multi URI Ping 0.9
» Mani Monajjemi (url)
Pratique pour pinger un maximum de services lorsque vous publiez un nouvel article.

WP-Ads 0.2 WP-Ads 0.2
» Nick Brady (url)
Pour gérer la publicité sur votre blog. Nous l’utilisons pour mettre les bannières en rotation.

WP-Ban 1.31 WP-Ban 1.31
» Lester ‘GaMerZ’ Chan (url)
Permet de bannir des utilisateurs en fonction de plusieurs critères (adresse IP, FAI, ite via lequel ils viennent sur votre blog, etc.). Les messages pour les personnes bannies sont personnalisés en fonction du type d’informations que vous aurez sélectionné pour les bannir. Des statistiques sont enregistrées vous précisant le nombre de fois que ces personnes essayent de visiter votre blog.

WP-Mythumbshot 0.2 WP-Mythumbshot 0.2
» Mythumbshot (url)
Affiche un aperçu des liens externes.

WP-Polls 2.30 WP-Polls 2.30
» Lester ‘GaMerZ’ Chan (url)
Plugin utilisé pour mettre en place des sondages. Voir notre article.

WP-Polls Widget 2.30 WP-Polls Widget 2.30
» Lester ‘GaMerZ’ Chan (url)
Le widget pour ajouter un (ou plusieurs) sondage dans votre sidebar.

WP-UserOnline 2.30 WP-UserOnline 2.30
» Lester ‘GaMerZ’ Chan (url)
Affiche le nombre d’internautes en ligne. Permet également d’afficher les bots (robots) et meilleurs audiences (records).

En finir définitivement avec le spam sur votre blog Wordpress

septembre 18, 2008 10 comments

Note de l’équipe du Journal du Blog : Dans le cadre de notre concours d’articles, kReEsTaL vous explique comment en finir définitivement avec le spam sur votre blog Wordpress.

Le problème

En deux ans de blogging, j’ai comme tout le monde récolté mon lot de messages spam. Qu’il s’agisse d’un blog régulièrement mis à jour, ou d’un site vitrine déserté, rien n’y fait: le spammeur est là, tapi dans un coin, pourrissant jour après jour votre innocent petit blog.

Stoppons le spam sur Wordpress!

Après des années de lutte acharnée contre les spammeurs, à renforcer mon fichier .htaccess, et à tester toutes sortes de plugins, je crois avoir trouvé la solution ultime anti-spam. Depuis un an, grâce à cette recette miracle, je n’ai plus reçu aucun spam sur mon blog.

Jusqu’à présent je n’avais jamais eu l’occasion de rendre publique cette solution anti-spam. Heureusement, ce jour est arrivé!

Ma solution

Stoppons le spam sur Wordpress!

Installez aujourd’hui et pour toujours les plugins prescrits ci-dessous:

  • Akismet - ce n’est pas pour rien que ce plugin est livré par défaut avec Wordpress. Donc: on l’active (même si on est obligé de se créer un compte sur Wordpress.com pour récupérer sa clé API), on le met à jour régulièrement, bref, on chouchoute son Akismet. C’est de loin le plugin anti-spam le plus puissant;
  • Bad Behavior - arme de destruction massive, Bad Behavior agit en amont de Wordpress, contrôlant toutes les requêtes suspectes envoyées vers votre blog. Si le plugin détecte un robot spam, il l’enverra paître, évitant le chargement inutile de votre blog et réduisant de facto la charge de votre serveur. Croyez-moi, Bad Behavior protègera votre blog mieux que Batman;
  • Spam Karma 2 - ce plugin puissant arrête toutes les formes de spam automatisé sans effort, tout en restant le plus transparent possible pour les commentateurs réguliers. SK2 vous donne la possibilité de gérer une liste blanche et noire d’IP, de domaines et de pseudos, ce qui vous permet de renforcer ou d’alléger la protection qu’il offre à votre convenance;
  • Math protection - ce plugin utilise une astuce vieille comme Internet: un robot spam ne sait pas compter. Afin de publier son commentaire, votre lecteur devra résoudre un calcul ultra simple, différent à chaque chargement de page. S’il a résolu le calcul, le commentaire sera publié (ou en attente de modération selon les réglages de votre Wordpress); si ce n’est pas le cas, le commentaire frauduleux ira directement dans les limbes;
  • Simple spam plugin: un petit plugin qui ne paye pas de mine, mais qui a réussit, parfois, à bloquer du spam ignoré par les autres mastodontes. Ce plugin bloque les commentaires louches tout en affichant un message explicatif, avec CAPTCHA optionnel. Une sécurité de plus, qui ne mange pas de pain.

Voilà pour les commentaires. Cependant, comme les spammeurs utilisent également les pingbacks et trackbacks pour polluer un blog, je vous conseille deux plugins supplémentaires ultra efficaces: Moderate Pingbacks et Moderate Trackbacks. Si jamais un pingback ou un trackback passe outre les tests anti-spam sus-cités, ces deux plugins l’empêcheront au moins d’apparaître sur votre blog.

Un traitement “à vie”

Stoppons le spam sur Wordpress!

Il va de soi que cette liste de plugins anti-spam ne sera efficace qu’à deux conditions:

  • Vous devez impérativement mettre Wordpress à jour, et ce dès qu’une nouvelle version sort. (N’est-ce pas, Le JdB? ^^) Il en va de la vie de votre blog! En outre, plus d’excuses pour les flemmards: plusieurs plugins permettent de mettre à jour Wordpress en un tour de main, dont Wordpress Automatic Upgrade;
  • Vous devez impérativement mettre vos plugins à jour: Wordpress évolue, les plugins et les robots spam aussi! Si vous laissez trop longtemps un plugin périmé sur votre serveur, non seulement il ne protègera plus efficacement votre blog des messages spam, mais rendra aussi vulnérable votre installation Wordpress toute entière. Sans compter qu’un plugin trop vieux peut aussi “casser” votre thème dans un Wordpress tout neuf…
  • Enfin, vous devez impérativement sauvegarder votre base de données régulièrement! Je sais, je sors un peu du cadre spam stricto sensu. Néanmoins, je sais d’expérience qu’un site web peut être infiltré à tout moment, les bases de données vidées sans aucun avertissement, des publicités non sollicitées injectées dans votre contenu, et des mois de travail ainsi fichus en l’air. La seule solution est la sauvegarde régulière et complète de vos données (MySQL et FTP). (NB: si votre site est hébergé chez OVH, j’avais posté un commentaire expliquant comment sauvegarder ses bases de données facilement.)

Voilà! Avec tous ces plugins, votre blog Wordpress devrait désormais être à l’abri du spam. Si vous utilisez d’autres plugins et outils anti-spam, n’hésitez pas à les partager avec les autres lecteurs du Journal du blog!

Rendre compatible votre blog wordpress sur mobiles

septembre 15, 2008 12 comments

Note de l’équipe du Journal du Blog : Dans le cadre de notre concours d’articles, Zara vous propose de rendre compatible votre blog Wordpress sur les mobiles.

La navigation web depuis un mobile se généralise, et de plus en plus de téléphones permettent de surfer sur Internet. J’aime pour ma part surfer sur mes blogs préférés durant mes voyages en transports en commun. Le problème, c’est que beaucoup d’entre eux ne proposent pas d’interface compatible mobile, ce qui entraine une mise en page complètement cassée sur mon BlackBerry, et un temps de chargement très long. Il est pourtant relativement simple de proposer à vos lecteurs une version mobile de votre Wordpress.

Nous vous avions déjà présenté sur le Journal du Blog des plugins permettant d’optimiser votre blog Wordpress pour l’IPhone. Mon propos sera plus large aujourd’hui, puisque je vous propose de voir comment rendre votre blog Wor dpress compatible avec tous les mobiles.

Pour ce faire, vous pouvez utiliser des plugins ou mettre en place une version mobile de votre blog manuellement. Dans les deux cas, le principe est le même : il s’agit de mettre en place un thème spécial mobile en parallèle du thème de votre blog, et de forcer les internautes provenant de mobiles à afficher le thème adapté.

Le plugin le plus célèbre pour rendre son blog compatible mobile pour vos lecteurs est le plugin Wordpress Mobile Edition d’Alex king. L’installation est très simple, de nombreux navigateurs mobiles sont pris en charge, la mise en page est bien adaptée aux mobiles. Par défaut, la page d’accueil proposée liste les derniers articles du blog, et les pages. La page d’article contient tout l’article et les commentaires laissés par vos lecteurs, avec la possibilité de laisser un commentaire.

Par exemple, voici ce que donne mon blog sous Opera Mini (navigateur web pour mobile) après avoir activé l’extension Wordpress Mobile Edition :

Wordpress Mobile Edition

Page d’accueil

Wordpress Mobile Edition

Page d’article

wp_mobile_edition4 Rendre compatible votre blog wordpress sur mobiles

Page d’article - commentaires

Le site ready.mobi qui teste l’affichage de sites sur mobile donne une note de 3/5 pour mon blog quand ce plugin est activé, contre une note de 1/5 lorsqu’aucun plugin n’est activé pour améliorer la compatibilité de mon blog avec les navigateurs mobile.

Ce plugin présente cependant quelques inconvénients. Il n’est compatible que jusqu’à Wordpress 2.5 : il fonctionne tout de même correctement sur Wordpress 2.6, à l’exception de messages d’erreur qui apparaissent dans l’administration et l’impossibilité d’accéder aux options du plugin. Par ailleurs, je trouve l’affichage un peu trop épurée et il manque une navigation dans les articles plus anciens.

En ce qui me concerne, je préfère largement le plugin WP Viewmobile. En effet, contrairement au plugin précédent, celui-ci est compatible jusqu’à Wordpress 2.6, l’affichage est plus propre et plus complet, et surtout, mon blog obtient une meilleure note au test ready.mobi, c’est-à-dire 4/5.

Par défaut, la page d’accueil proposée liste les derniers articles du blog avec un extrait, propose une pagination pour accéder aux articles plus anciens, liste les pages, et propose une navigation par catégories et par archives. La page d’article contient tout l’article et les commentaires laissés par vos lecteurs - avec une alternance de couleurs qui permet une lecture plus aisée -, avec la possibilité de laisser un commentaire.

Voici un petit aperçu de ce que donne mon blog sous Opera Mini après avoir activée l’extension Viewmobile :

viewmobile Rendre compatible votre blog wordpress sur mobiles

Page d’accueil - haut

viewmobile2 Rendre compatible votre blog wordpress sur mobiles

Page d’accueil - bas

viewmobile3 Rendre compatible votre blog wordpress sur mobiles

Page d’article

viewmobile4 Rendre compatible votre blog wordpress sur mobiles

Page d’article - commentaires

Vous pouvez bien sur modifier les thèmes proposés par ces deux plugins, mais faites attention à ne pas faire de modifications allant à l’encontre de la compatibilité mobile ! Pour cela, aidez-vous des validateurs suivant pour vérifier la compatibilité mobile :

  • ready.mobi : celui-ci note l’affichage de votre blog en testant divers critères, et vous donnant des astuces pour améliorer les critères que votre blog ne passe pas
  • validateur mobile du W3C : celui-ci liste tous les problèmes que rencontre votre blog pour être considéré comme compatible mobile à 100%. Celui-ci est TRÈS strict et vous remontera des erreurs qui gènent pourtant très peu l’affichage sur mobile comme l’absence de contenu alt dans les balises images…

Vous pouvez également vérifier ce que cela donne sur les émulateurs de navigateurs mobiles que l’on peut trouver sur internet, comme celui d’Opera Mini.

Image de la page d’accueil: Shadowkris

Une superbe galerie Flickr pour votre blog

septembre 11, 2008 8 comments

Note de l’équipe du Journal du Blog : Dans le cadre de notre concours d’articles, Noémi vous propose de créer une superbe galerie Flickr pour votre blog.

Pour impressionner vos lecteurs, rien de tel qu’une petite galerie de vos photos Flickr. Mais pas une simple galerie puisqu’il s’agit d’une galerie à base du plugin Fancybox.

Cette galerie peut être ajoutée sur n’importe quel blog pour peu que vous ayez accès au code source. Nous verrons ensuite comment la rendre dynamique pour l’insérer sur votre blog Wordpress.

Exemple :

image-8 Une superbe galerie Flickr pour votre blog

Ce dont vous aurez besoin :

Avant toute chose, vous aurez besoin de télécharger la dernière version de Fancybox, le plugin jQuery façon Lightbox ainsi que le pngFix pour éviter les bugs sur Internet Explorer 6. Enfin, téléchargez le plugin Wordpress FlickrRSS.

Nous allons maintenant voir comment mettre en place tous ces éléments pour arriver au résultat voulu.

Éléments décoratifs en CSS pour votre galerie

Pour construite notre superbe galerie de photos Flickr, nous allons utiliser un tutoriel proposé par Web Designer Wall : CSS Decorative Gallery.

Il s’agit avant tout de construire une structure basique en HTML :


<div class="flickr_gallery">
<div class="flickr_thumb">
<span> </span>
<a href="#" style="background-image: url(image_thumb.jpg)"
></a>
</div>
<!-- other images here... -->
</div>
<br class="clear"/>

Voici le code à rajouter dans votre feuille de style (style.css sous Wordpress) :


body {
font-family: Georgia,sans-serif;
font-size: 14px;
color: #333;
text-align: center;
padding: 20px;
}

.flickr_gallery {
margin: 40px auto 5px;
width: 415px;
}

.flickr_thumb {
background: transparent url(imgs/polaroid.jpg) no-repeat scroll 50% 0;
display: inline;
float: left;
height: 125px;
margin: 15px 10px;
text-align: center;
width: 116px;
position: relative;
}

.flickr_thumb a {
display: block;
height: 100px;
position: relative;
width: 100px;
margin: 8px;
background-position: 50% 50%;
}

.flickr_thumb span {
background: transparent url(imgs/tape.png) no-repeat scroll 50% 0;
height: 25px;
left: 20px;
position: absolute;
top: -10px;
width: 77px;
z-index: 10;
}

.clear {
clear: both;
}

Comment intégrer Fancybox

Nous allons à présent installer l’effet zoom Fancybox à notre galerie. Pour cela, ajoutez un lien vers la bibliothèque jQuery, le plugin Fancybox et le plugin pngFix juste avant de fermer la balise <body> . (voir dans le fichier footer.php de votre thème Wordpress). Ensuite, ajoutez le code pour installer Fancybox :


<script src="js/jquery-1.2.3.js" type="text/javascript"></script> <script src="js/jquery.pngFix.js" type="text/javascript"></script>
<script src="js/jquery.fancybox.js" type="text/javascript"></script> <script type="text/javascript"><!--
$(document).ready(function(){
$(".flickr_gallery .flickr_thumb a").fancybox();
});
// --></script>

Il faut également ajouter deux attributs au code HTML des miniatures/thumbnails (rel pour regrouper différentes images dans une même galerie et title pour ajouter une description à la photo) :


<div class="flickr_gallery">
<div class="flickr_thumb"><span> </span>
<a href="image_big.jpg">
</a> title="My Flickr Image Title"
rel="FlickrGallery"
style="background-image: url(image_thumb.jpg)"
></div>
<!-- autres images ici... -->

</div>
<br class="clear" />

Pensez à faire en sorte que le CSS de votre Fancybox soit déclaré dans <head>, vous pouvez également l’intégrer dans votre CSS principal.

Rendre la galerie dynamique

Afin de rendre la galerie dynamique, c’est à dire que les photos se mettent à jour automatiquement, nous allons utiliser le plugin Wordpress FlickrRSS. Rendez-vous dans le panneau d’administration pour paramétrer le plugin. Choisissez les photos à afficher puis remplissez le formulaire de la manière suivante :

Before List:


<div class="flickr_gallery">

Item HTML:


<div class="flickr_thumb">
<a>
href="%image_medium%"
title="%title%"
rel="FlickrGallery"
style="background-image: url(%image_square%)"></a></div>

After List:


</div>
<br class="clear" />

Voilà, votre galerie est terminée. Vous pouvez l’utiliser dans vos Widget pour l’ajouter à votre barre latérale ou bien l’ajouter n’importe où sur votre blog avec le code suivant :


get_FlickRSS();
?>

Source : Stefano Verna

Sélection des extensions Firefox pour blogueurs

juin 9, 2008 13 comments

Firefox est un navigateur internet de plus en plus utilisé. Nous ne rentrerons pas ici dans un débat Firefox Vs Internet Explorer, chacun pensant tout le bien qu’il veut de l’un comme de l’autre. Nous souhaitons juste vous présenter les extensions qui faciliteront votre manière de bloguer sous Firefox.

firefox Sélection des extensions Firefox pour blogueurs

Scribefire est un excellent éditeur de blog. Il permet la gestion des tags, des catégories, des images ainsi que du code source. L’envoi de fichiers via FTP est possible avec ce plugin. Il propose également la gestion de plusieurs blogs.

Spellbound est un correcteur orthographique, qui vous signalera toutes fautes de frappes et d’orthographes. Très pratique pour être sûr de ne pas faire d’erreur dans vos billets.

Resizable Text Area est très pratique pour ceux qui préfèrent ne pas modifier le code de leurs billets puisqu’il permet de modifier la taille de votre zone de texte très facilement.

Copy Plain Text est une extension indispensable pour les blogueurs qui passent la plupart de leurs temps à lire des articles sur les digg-like. En effet en copiant le texte, vous pouvez grâce à ce plugin ne copier ni les liens ni la police originale, afin de mieux adapter vos citations à vos billets.

Copy as HTML Link offre, comme son nom l’indique, la possibilité de faire facilement des liens HTML pour vos billets. En effet, ce plugin vous propose de faire un lien vers la page que vous consultez à partir du texte sélectionné, facilitant ainsi la création de liens vers d’autres billets.

CoLT vous propose de copier soit le lien hypertexte, soit le lien et le texte du lien, selon la configuration que vous aurez choisi. Très utile pour ceux d’entre vous qui font beaucoup de références à d’autres blogs dans leurs billets.

Lorsque vous écrivez une note, il est fréquent de devoir envoyer un fichier pour enrichir celle-ci (une image, un document PDF, etc.). FireFTP vous évitera de réduire votre fenêtre de navigateur en vous offrant un client FTP utilisable depuis celui-ci. Il vous suffira juste de l’ouvrir dans un autre onglet.

Picnik - Nous vous avons déjà parlé de ce service dans un précédent billet. Le plugin permet de faire des captures d’écran et d’en modifier la taille afin de mieux les intégrer dans vos billets.

Alexa Sparky est très utile pour ceux qui ont besoin d’analyser leurs trafics. Vous aurez un graphique en bas et à droite de votre navigateur, proposant un grand nombre d’options, dont notamment la possibilité de trouver les blogs similaires au votre.

DocuFarm est un service qui vous permet de prévisualiser des documents PDF (tout comme les documents powerpoint, doc ou rtf de Word) avant de les télécharger.

Pouvoir écouter les blogs au lieu de les lire, c’est ce que vous propose Speak It. Cette extension utilisant des composantes Microsoft (Microsoft Text-To-Speech Engine), il n’est disponible que pour Windows (toutes versions).

StumbleUpon est une extension permettant de surfer sur internet sur des sites web ajoutés par d’autres utilisateurs d’un seul clic. Selon ProBlogger, StumbleUpon vous apportera plus de lecteurs sur votre site, en moyenne, qu’un Digg-like.

coComment est une extension indispensable pour gérer votre réputation sur Internet. En effet, elle vous permet de conserver une trace des commentaires que vous laissez sur la toile. Vous pourrez ainsi mieux suivre les conversations auxquelles vous participez, et rebondir sur les remarques (vous concernant) faites par les autres lecteurs. Vous serez ainsi plus réactif à ce qui se dit à la fois sur vous et sur vos commentaires.

Cette liste est bien entendue non exhaustive, et pourra être enrichie par vos commentaires et suggestions.


A lire sur d'autres blogs