Solidaires du monde Créer son blog Se connecter Signaler un abus Retour sur le portail

« Changement de catégories sur Solidaires du monde : pour qui ? Pourquoi ? | Page d'accueil | Comment ajouter un flux Delicious sur son blog ? »

17.05.2010

Comment insérer un flux Twitter dans votre colonne de blog ?

Twitter n'a plus de secret pour vous et vous souhaitez le mettre en avant sur votre blog. Rien de plus simple, il vous faut juste suivre les instructions suivantes.

 

1. Créer votre Widget Twitter à insérer sur votre blog

-          allez sur votre compte Twitter. Une fois identifié, allez à l'adresse de création de widgets : http://twitter.com/widgets

twitter%20wigdets.JPG

-          Cliquez sur « Mon site web ». Apparaissent alors différentes rubriques proposant de créer différents flux.

twitter%20wigdets%20flux.2.JPG

-          Widget de profil reprend le flux de votre compte Twitter

-          Widget de recherche permet d'avoir le flux de tous les tweets se rapportant à un mot-clé choisi. Par exemple, vous pouvez suivre tous les tweets qui parlent de « solidarité », que ce soient des tweets émis par les gens que vous suivez ou pas.

-          Widget de favoris donne accès au flux des tweets que vous avez qualifié de favoris.

-          Widget de listes permet de reprendre le flux d'une de vos listes.

A vous de choisir le flux que vous voulez suivre.

Prenons l'exemple du flux de votre profil. Cliquez tout simplement sur Widget de profil. Vous arrivez sur la page suivante :

personnaliser%20son%20twitter.JPG

La rubrique « Paramètres » ne renseigne que sur le nom de l'utilisateur du compte. Il est utile si vous voulez créer un widget des flux d'un autre compte Twitter que le vôtre.

Vous pouvez alors choisir de personnaliser votre widget en cliquant dans un premier temps sur « Préférences ».


twitter%20preferences.JPG

-          « Sonder de nouveaux résultats » permet d'actualiser en temps réel.

-          « Inclure la barre de défilement » insère un ascenseur pour pouvoir faire défiler les tweets.

-          Réglage

o   « Charger tous les tweets » permet d'afficher tous vos tweets dans le flux. Vous pouvez choisir le nombre de tweets que vous voulez voir apparaître.

o   En cliquant sur « Charger à intervalle régulier », de nouveaux éléments apparaissent sur la page.


twitter%20intervalles%20r%C3%A9gulier.JPG

On vous demande alors si vous voulez que vous tweets apparaissent en boucle, à quel intervalle (en secondes) vous voulez les voir se charger, et combien de tweets à la fois, vous voulez voir apparaître ?

Enfin, les 3 derniers éléments proposent d'afficher (ou non) votre avatar, l'horodatage (c'est-à-dire la date du tweet), et les hashtags.

Pour modifier l'aspect de votre widget, cliquez sur « apparence ». Vous arrivez sur la page suivante :

twitter%20apparence.JPG


Vous pouvez personnaliser les couleurs de votre widget. Chaque élément est modifiable que ce soit l'arrière-plan widget ou le texte. Voir l'exemple ci-dessous :

twitter%20apparence%20couleurs.JPG

Enfin, la rubrique « Dimension » permet de mettre votre widget au format que vous souhaitez.

twitter%20dimension.JPG

Vos réglages sont finis. Vous pouvez cliquer sur « Tester ce réglage » pour voir le rendu. Si cela vous convient, vous pouvez cliquer sur « Terminer et récupérer le Code ». Vous obtenu le code qu'il vous faut copier pour aller le coller sur votre blog.

twitter%20code.JPG

2. Où copier votre code sur votre blog ?

-          Rendez-vous dans le backoffice de votre blog, dans « Présentation » puis « Contenu des colonnes ».

-          Allez en bas de la page et cliquez sur « Ajouter le code HTML/Javascript »

Ajouter%20un%20%C3%A9l%C3%A9ment%20personnalis%C3%A9.JPG








Une fenêtre s'ouvre.

-          Renseignez le titre que vous voulez donner à votre widget puis dans la partie « Contenu de l'élément », copiez le code de votre widget Twitter.


fenetre%20ajouter%20un%20widget%20Twitter.JPG


-          Enregistrer l'élément.

Puis choisissez d'ajouter dans la colonne de votre choix (à droite ou à gauche) l'élément Twitter.

-          Mettre à jour ces informations.

Votre Widget Twitter apparaît alors sur votre blog comme l'exemple ci dessous.


delicious%20flux%20rss.JPG


Vous êtes désormais un vrai pro du web 2.0 :-).

Trackbacks

Voici l'URL pour faire un trackback sur cette note : http://denousavous.solidairesdumonde.org/trackback/7502

Commentaires

salut,

j'ai suivis tes conseil pour intégrer twitter sur mon site j'ai donc récupéré le script du widget sur twitter que je suis venu coller dans la balise head mon site est fait sur dreamweaver et je ne sais pas quoi mettre dans le div destinée a recevoir le widget dans mon body
merci de ton aide

Benoit

je copie ici le script



new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 8,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#e8e5d3',
color: '#b30000'
},
tweets: {
background: '#52493c',
color: '#ffffff',
links: '#850808'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('pailleason').start();

Ecrit par : Benoit | 25.06.2010

Bonjour Benoit,

Tout d'abord, nous précisons que cette note est un tutoriel pour insérer un flux twitter dans une colonne d'un blog Solidaires du monde. Dans votre cas, il s'agit d'insérer un widget Twitter sur un site web géré sous Dreamweaver. L'insertion dans un blog est moins "compliquée" car elle ne nécessite pas de modifier le code (comme dans votre cas) mais simplement d'y copier-coller un code dans un endroit bien spécifique.

Cependant, nous n'allons pas vous laisser tomber pour autant !
Vous faites bien de copier votre code Twitter dans le « head ». Dans le « body », vous devez appeler votre script là où vous souhaitez que votre code widget apparaisse avec la balise suivante :

D’ailleurs normalement le code du flux Twitter commence par ce code.

J'espère que j'ai pu vous venir en aide, nous restons à votre disposition !

Solidairement

Clément pour l'équipe Solidaires du monde

Ecrit par : Clément pour l'équipe Solidaires du monde | 30.06.2010

Écrire un commentaire