BlogNotes: juin 2013

dimanche 23 juin 2013

Boutons Twitter

Ajouter des boutons à votre site web aide vos lecteurs à partager votre contenu et à vous retrouver sur Twitter: https://twitter.com/about/resources/buttons

Vous pourrez placer le code obtenu aussi bien dans un message ou mieux dans un Widget.

Suivre @nettlebay

jeudi 20 juin 2013

Deux ou plusieurs comptes Twitter

Suite à un article récent, Comment créer un autre compte Twitter ? où j'expliquais comment créer un nouveau compte quand on en a déjà un (pas forcément évident), je vous signale une excellente extension pour Google Chrome, Twitcher - Twitter Account Switcher, un commutateur donc de comptesTwitter.

Installez l'extension
Fermez votre page Twitter (si elle est ouverte, pardi!)
Ouvrez à nouveau votre page Twitter, Twitcher va l'enregistrer automatiquement.
Déconnectez-vous de ce compte Twitter (qu'on appellera Twitter1) et fermez l'onglet ou la fenêtre de préférence.
Ouvrez à nouveau Twitter. Connectez vous à votre page Twitter2. Twitcher là aussi va enregistrer votre connexion.
Ouvrez le menu déroulant des paramètres de votre compte Twitter2. En effet, Twitter1 apparaît bien dans le menu.

Il suffit donc de cliquer sur l'autre compte (Twitter1) pour y être connecté immédiatement. On peut sauter de l'un à l'autre instantanément et même afficher les deux côte-à-côte dans deux onglets différents.

Une autre extension que j'utilise avec bonheur est Notifier for Twitter. Cette extension permet d'afficher automatiquement des notifications sur votre bureau à condition de Chrome soit actif.

Attention, cependant de ne pas activer plusieurs comptes Twitter dans Notifier for Twitter , car sinon, les Pop-up de notification vont défiler à un train d'enfer! Une autre solution, c'est de rendre les 2 comptes complémentaires c'est-à-dire qu'ils ne soient pas abonnés aux mêmes sources si possible.

Trouver l'adresse d'un flux RSS Twitter (2) - Recevoir des TWEETS par email

Modifié le 20 juin

Concernant le précédent article Trouver l'adresse d'un flux RSS Twitter

Il est possible de récupérer l'adresse RSS, par exemple http://twitter-rss.com/user_timeline.php?screen_name=nettlebay (oui, c'est bien un lien...) pour encourager vos lecteurs à s'abonner à vos Tweets par email en utilisant le service Blogtrottr. C'est certainement possible aussi avec Feedburner (mais celui-ci fonctionne-t-il encore?).

Il y a déjà bien longtemps, j'avais déjà créé des formulaires genre "Follow me" pour que mes visiteurs puissent s'abonner au derniers messages de mes blogs et je pense donc que ça ne devrait pas poser de gros problème de le faire aussi pour TWITTER.

Hier, je me suis inscrit à mon propre feed (de Twitter) pour essayer...

Ouiii! Ça fonctionne! Avec certes parfois un peu de retard, mais tous mes derniers tweets m'ont bien été notifiés par email...
Curieux tout de même que personne n'y avait jamais pensé...

Capture d'un message de notification de nouveau Tweet dans Gmail:

Il s'agissait ici d'un "re-tweet". A noter que les liens fonctionnent parfaitement.

Je vais donc concocter un article prochainement sur "Créer un formulaire d'abonnement à des Tweets" et pour commencer, je vais tester un formulaire sur le modèle des précédent avec abonnement via Blogtrottr.

Voilà, c'est fait! Voici le formulaire et son code très simple. N'hésitez pas à vous abonner ne serait-ce que pour essayer! Il est très facile de résilier l'abonnement ensuite. Il y a un lien en bas de chaque message pour ça. En général, je "tweete" ou "re-tweete" plusieurs fois par jour.

Le code du formulaire:

Email : <input name="btr_email" type="text" /><input name="btr_url" type="hidden" value="http://twitter-rss.com/user_timeline.php?screen_name=UTILISATEUR" /> <input name="schedule_type" type="hidden" value="0" /> <input type="submit" value="Subscribe to my tweets" /> </form>

Notez que si Blogtrottr est totalement gratuit et utilisable sans inscription, il est tout de même plus intéressant de s'inscrire (toujours gratuitement) et de pouvoir ensuite ainsi gérer plus facilement ses abonnements.

dimanche 16 juin 2013

Un TChat pour Blogger...

Voici un tutoriel qui va vous permettre d’intégrer un Chat dans votre blog Blogger sous forme d’un widget. Ce chat va permettre à vos visiteurs de discuter et d’envoyer des messages instantanés sans quitter la page du blog et sans enregistrement préalable.
Beaucoup de services proposent d’intégrer gratuitement un chat dans un blog/site, mais ici je ne vais citer que Chanatngo que j’ai pu tester pendant quelque mois...

La suite sur http://www.leblogger.com/2009/07/chat-tchat-tchatche-chatango-blog.html

samedi 15 juin 2013

IFRAME redimensionné à 100% de la hauteur de la page

Quand on met 100% de hauteur à un iframe, ça ne marche pas...

Voici un bricolage qui devrait fonctionner mais je n'ai pas essayé encore...

Mettre ce code dans votre HEAD

<script language="JavaScript">
<!--
function resize_iframe()
{

 var height=window.innerWidth;//Firefox
 if (document.body.clientHeight)
 {
  height=document.body.clientHeight;//IE
 }
 //redimensionne l'iframe en fonction de la taille de la
 //fenêtre (tous ceux-ci doivent être sur la même ligne.)
 document.getElementById("essai").style.height=parseInt(height-
 document.getElementById("essai").offsetTop-8)+"px";
}

// Ceci redimensionnera votre cadre
// chaque fois que vous changerez la taille de la fenêtre.
window.onresize=resize_iframe; 

//Au lieu d'utiliser le précédent, vous pouvez utiliser ceci: 
// <BODY onresize="resize_iframe()">


//-->
</script>

Ensuite, créez votre iframe dans votre page (body) ou dans un message:

<iframe id="essai" src="http://mapage.htm" width="100%" onload="resize_iframe()">

</iframe>

Origine http://th.atguy.com/mycode/100_percent_iframe/

IFRAME s'adaptant au contenu (non résolu)

<div style="text-align: center;">
<iframe frameborder="1" name="vigil" onload="this.height=this.contentWindow.document.height" src="http://page à afficher.html">
</iframe>
</div>



Normalement, cet iframe devrait s'adapter à son contenu. J'utilise ce code depuis bien longtemps et il est vrai que ça ne fonctionne pas toujours correctement. Peut-être Blogger massacre-t-il une fois de plus le code? Si c'est le cas, il faudra le re-coder avec cet utilitaire déjà souvent utilisé ici.

Ici un essai avec les vigilances de Meteo France Antilles-Guyane. Le contenu peut varier selon les événements.

Ici, un essai avec une page plus longue stockée sur Dropbox... Et on voit que... ça ne fonctionne pas ! Un "ascenseur" est rajouté automatiquement.
Alors, est-ce tout de même possible...?

Argh! Je viens de faire un essai avec cet iframe dans une page sur Dropbox, et ça fonctionne partiellement sauf que la largeur ne s'adapte pas. Donc, c'est Blogger qui fait encore des siennes...

J'ai encore modifié le code de l'iframe en ajoutant width=100% (si on met 100 tout seul, ça équivaut à 100 pixels) et là, ça fonctionne assez bien (mais pas dans Blogger....). A voir à l'usage... essai-iframe.html
Ci-dessus, l'essai est en 80%.
A noter que j'ai ouvert le code source de ce message et n'ai rien constaté d'anormal. Je vais toutefois essayer de recoder le html pour voir.

J'ai essayé mais aucun changement...

Recherche sur ce sujet
Voir aussi http://solidgone.org/Redux-Set-IFRAME-height-based-on-size-of-remotely-loaded-content. Ici, cependant, il faut pouvoir agir sur la page distante. C'est le cas dans mon deuxième exemple mais pas du tout dans le premier malheureusement.
http://stackoverflow.com/questions/5894472/how-to-dynamically-resize-an-iframe-with-pages-of-different-heights. J'ai essayé celui-ci, mais sans résultat avec Blogger. Je n'ai d'ailleurs pas trop compris où se met la deuxième partie du code. Dans le head?

jeudi 13 juin 2013

GOOGLE CHROME: séparateurs pour Favoris

Dans Firefox on peut mettre des séparateurs dans la barre des favoris.

Apparemment, dans Chrome, ce n'est pas possible. Personnellement, dans ma barre de favoris, j'utilise des dossiers comme "blog", "Meteo", etc... Et c'est surtout à l'intérieur de ces dossiers que c'est intéressant car ça devient vite le fouillis....

J'ai donc créé une page web très simple dans le dossier "Public" de ma Dropbox juste pour lui attribuer un "Favicon" blanc.
Le petit carré blanc de 32x32 pixels qui sert de favicon a été fait en 30 secondes avec Photofiltre (Menu > outils > exporter en icône) et a été déposé lui-même dans ma Dropbox. Notez qu'une image *.jpg de 32x32 fonctionnera tout aussi bien...
Ensuite, d'un clic droit sur le fichier favicon.ico: "copier le lien public".

Voici le code HTML de ma page "bidon" (elle n'affiche rien!):

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="shortcut icon" href="https://dl.dropboxusercontent.com/u/19586410/Blogs/faviconseparator/favicon.ico" type="image/x-icon" />

<title>Separateur</title>

</head>

<body>

</body>

</html>

Enregistrez votre page sous le nom que vous voulez, par exemple separator.html dans votre dossier "public".
Clic droit sur votre fichier html et "copier le lien public".
Retournez à Google Chrome et collez le contenu de votre presse-papier dans la barre de navigation et ouvrez votre page.
Mettez-la dans vos favoris plusieurs fois pour avoir une bonne réserve...
Ensuite, direction le Gestionnaire de Favoris, clic droit sur l'icône de votre page "separateur" et "modifier".
Remplacez le nom "Separateur" par un espace si vous préférez avoir un vide plutôt qu'un texte. Vous pouvez même aussi faire ----------------- (uniquement pour les dossiers). Si c'est pour mettre directement dans la barre de favoris, l'icône blanche suffira. Bien entendu, vous pouvez mettre la même couleur que le fond à votre icône. Le fond semble être #E5E5E5. Voici mon favicon en JPG: https://dl.dropboxusercontent.com/u/19586410/Blogs/faviconseparator/favicongris.jpg. Ça fonctionne parfaitement.
Si vous désirez faire un séparateur à mettre directement dans votre barre de favoris (horizontale), il sera préférable de refaire l'opération avec un favicon différent. Inutile cette fois de rajouter quoique ce soit. C'es à dire que lorsque vous renommez, il faut laisser le champ texte libre.

Capture écran. Remplace la précédente car j'ai amélioré avec un favicon gris et le nom de la rubrique:

Ma page web "bidon": http://goo.gl/azDZM

dimanche 9 juin 2013

Afficher vos Tweets sur votre blog ou site

Affichez vos Tweets ou ceux d'autres auteurs sur votre site ou blog.

Il suffit d'aller sur le Configurateur de widgets de Twitter puis de récupérer le code. C'est facile et intuitif à utiliser.

Notez que ce code peut se mettre dans un widget HTML-Javascript ou dans un message, une nouvelle page, où vous voulez...

Voici, ci-dessous, mes Tweets. Ils sont affichés sur plusieurs de mes blogs. On y parle principalement de météo et de notre co-propriété... J'ai utilisé l'option data-tweet-limit="5" pour limiter le nombre de tweets affichés à 5 (voir plus bas les exemples).

Dernière minute... Breaking news...

Tweets de @Nettlebay

Voici le code:


<div style="text-align: center;">
Dernière minute... Breaking news...</div>
<div style="text-align: center;">
<a class="twitter-timeline" data-tweet-limit="5" data-widget-id="123459789............" height="300" href="https://twitter.com/identifiant">Tweets de @identifiant</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>

Le code obtenu avec le Configurateur de widgets est en bleu, celui que j'ai rajouté est en gris. Ce qui doit OU peut être modifié est en rouge.

Les commentaires de type  sont bien pratiques pour repérer des parties de code surtout si votre modèle de message est compliqué. Toutes les différentes parties de mon modèle de messages sont balisées ainsi. Et mon modèle de blog (HTML) lui aussi.

Si Blogger saccage votre code quand vous passez en mode "rédiger" (ça peut se produire dans les widget HTML-Javascript), recodez-le avec l'utilitaire de jean-louis.pierre.pagesperso-orange.fr/Crypter-le-HTML.htm.

Si la "box" des Tweets n'apparaît pas une fois votre blog affiché, il est probable que Blogger a encore fait des siennes...

Pour d'autres modifications, aller à cette page: https://dev.twitter.com/docs/embedded-timelines#customization

La largeur maxi ne peut pas dépasser actuellement 520 px, ce qui fait beaucoup "jaser" (ou tweeter!) dans le monde de Twitter... Il semble que l'ancien widget était plus souple.

Quelques exemples (seul la première partie du code peut être modifiée):

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE" data-theme="dark" data-link-color="#cc0000" data-related="twitterapi,twitter" data-aria-polite="assertive" width="300" height="500" lang="EN">Tweets by @twitterapi</a>

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE" data-chrome="nofooter noborders transparent">Tweets by @twitterapi</a>

Finally, an example that renders a static block of five tweets:

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE" data-chrome="nofooter" data-tweet-limit="3">Tweets by @twitterapi</a>
Mobile

TWITTER Mobile est plus léger...

Astuce: Si vous gardez toujours votre page Twitter ouverte, je vous conseille d'utiliser Twitter Mobile qui est bien plus léger. Vous y retrouverez toutes les fonctions habituelles.

https://mobile.twitter.com/

Autres astuce: au lieu d'installer l'APP Twitter Mobile assez lourde sur votre Smartphone, utilisez l' adresse précitée et mettez-la en favoris avec un raccourci sur le bureau (page d'accueil)

Comment créer un autre compte Twitter ?

A ma connaissance, seul GMAIL permet de le faire facilement.

Si votre adresse Gmail est monadresse@gmail.com, il suffit de rajouter quelque part au milieu un simple point, par exemple mon.adresse@gmail.com et de créer votre nouveau compte Twitter avec cette adresse. Il faut bien sûr vous déconnecter préalablement de votre compte Twitter d'origine.

Pas de problème pour la "nouvelle" adresse Gmail, tout message pour mon.adresse@gmail.com atterrira dans la boîte réception de monadresse@gmail.com.

On peut aussi créer ce qu'on appelle un "alias", par exemple monadresse+toto@gmail.com qui arrivera lui aussi à bonne destination.

A noter qu'il n'y a aucune manipulation à faire dans les paramètres de Gmail pour se faire un alias. C'est simple comme "bonjour"!

dimanche 2 juin 2013

Centrer un script (remonté/modifié)

Il arrive parfois que certains scripts notamment refusent d'être centrés (ou c'est Blogger qui fait des farces ...).

Le mieux dans ce cas, c'est de mettre le script dans un tableau lui-même centré:

<tbody>

<tr>

<td>

</td>

</tr>

</tbody>

</table>

Ce qui donne:

Normalement , si on fait <div align="center"> Mon script</div> ça devrait aussi fonctionner. Exemple:

View RSS feed

samedi 1 juin 2013

Heure locale et numéro du post en haut du blog

Ajout: Attention! Je me suis mal expliqué: ce script permet seulement d'afficher le nombre total de messages et non pas des les numéroter. Si vous allez par exemple sur le 15 e message de votre blog, il affichera toujours 654 si c'est là le nombre total de messages. Je n'ai donc résolu ce problème qu'à moitié... J'ai donc dû modifier "bulletin #" par "Nombre de messages".

Il s'agissait pour moi d'afficher automatiquement à la fois l'heure locale et le numéro du message (bulletins météo) sur mes deux mini-blogs jumeaux Meteo http://meteo-weather3.blogspot.fr et http://nbbc-met.blogspot.fr/. Ces deux texte sont par ailleurs sur la même ligne juste au-dessus et en dehors du corps du blog. Ci-dessous une capture:

J'ai trouvé le code indiquant le numéro de message sur modifier-les-modeles-de-blogger.blogspot.fr mais j'ai dû le modifier pas mal car il m'affichait par exemple 650 messages au lieu de 65 et son look n'était pas très appétissant! J'ai déjà commencé par supprimer le code en gris qui concernait les commentaires et qui était apparemment à l'origine du faux résultat. J'ai bien sûr modifié le CSS, les couleurs, supprimé les bordures et modifié bien d'autres choses. Je l'ai rendu transparent avec background: #00000;

Attention! pour la transparence, c'est 5 zéros et non pas 6 comme le noir (#000000) ...

Voici le code d'origine:

<script style='text/javascript'>function nombre(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><div style="color: #000;background: #ddd;width:220px;text-align:center;margin-left:20px;padding:3px;border-right:solid #000 1px;border-bottom:solid #000 1px;font-weight: bold;font-family: arial;font-size: large;">Sur ce site : <script src='http://modifier-les-modeles-de-blogger.blogspot.com/feeds/posts/default?alt=json-in-script&callback=nombre'></script> articles et <script src='http://modifier-les-modeles-de-blogger.blogspot.com/feeds/comments/default?alt=json-in-script&callback=nombre'></script> commentaires</div>

Pour le placer à cet endroit atypique, j'ai dû insérer le code juste après
<body expr:class='"loading" + data:blog.mobileClass'>

Le code a été recodé préalablement avec http://jean-louis.pierre.pagesperso-orange.fr/Crypter-le-HTML.htm car Blogger ne voulait pas l'enregistrer. J'ai dû aussi changer <script language=JavaScript> par <script language="javascript" type="text/javascript">, car là non plus, Blogger ne voulait rien entendre...

Ce code contient un tableau d'une ligne et deux colonnes, l'iframe "timeanddate.com" (première colonne) et le script pour récupérer et afficher le numéro du bulletin (dans la deuxième colonne).

En noir, les éléments du tableau et en bleu, l'iframe et le script (avant recodage).

<table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 690px;">
<tbody>
<tr>
<td style="vertical-align: middle; width: 80px;">
<span style="color:#e6e6fa;"><span style="font-size: 14px;"><em><span style="font-size: 14px;">Local time:</span></em></span></span></td>
<td style="vertical-align: middle; width: 520px;">
<iframe align="bottom" allowtransparency="true" frameborder="0" height="18" scrolling="no" src="http://free.timeanddate.com/clock/i24nk0go/n1315/tlfr2/fcfff/tct/pct/ahl/ftb/tt0/tw1/ta1" width="289">&amp;amp;lt;/td&amp;amp;gt; &amp;amp;lt;/tr&amp;amp;gt; &amp;amp;lt;/tbody&amp;amp;gt; &amp;amp;lt;/table&amp;amp;gt;&amp;amp;lt;/cke:body&amp;amp;gt; &amp;amp;lt;/cke:html&amp;amp;gt;</iframe></td>
<td style="vertical-align: middle; width: 100px;"><script style='text/javascript'>function nombre(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><div style="color: #e6e6fa;background: #00000;width:100px;text-align:center;margin-left:0px;padding:0px;font-weight: normal;font-family: arial;font-size: 14px;">Bulletin # <script src='http://meteo-weather3.blogspot.fr/feeds/posts/default?alt=json-in-script&callback=nombre'></script></div>
</td></tr></tbody>
</table>

...ce qui donne ceci une fois recodé (en rouge la modification expliquée plus haut):

<script language="javascript" type="text/javascript"> /* Generated using sourceLocker v1.0 LITE Edition (svetlin@developer.bg, kirokomara@designer.bg) */m='%3Ctable%20align%3D%22center%22%20border%3D%220%22%20cellpadding%3D%221%22%20cellspacing%3D%221%22%20style%3D%22width%3A%20690px%3B%22%3E%0A%09%09%09%3Ctbody%3E%0A%09%09%09%09%3Ctr%3E%0A%09%09%09%09%09%3Ctd%20style%3D%22vertical-align%3A%20middle%3B%20width%3A%2080px%3B%22%3E%0A%09%09%09%09%09%09%3Cspan%20style%3D%22color%3A%23e6e6fa%3B%22%3E%3Cspan%20style%3D%22font-size%3A%2014px%3B%22%3E%3Cem%3E%3Cspan%20style%3D%22font-size%3A%2014px%3B%22%3ELocal%20time%3A%3C/span%3E%3C/em%3E%3C/span%3E%3C/span%3E%3C/td%3E%0A%09%09%09%09%09%3Ctd%20style%3D%22vertical-align%3A%20middle%3B%20width%3A%20520px%3B%22%3E%0A%09%09%09%09%09%09%3Ciframe%20align%3D%22bottom%22%20allowtransparency%3D%22true%22%20frameborder%3D%220%22%20height%3D%2218%22%20scrolling%3D%22no%22%20src%3D%22http%3A//free.timeanddate.com/clock/i24nk0go/n1315/tlfr2/fcfff/tct/pct/ahl/ftb/tt0/tw1/ta1%22%20width%3D%22289%22%3E%26amp%3Bamp%3Bamp%3Blt%3B/td%26amp%3Bamp%3Bamp%3Bgt%3B%20%26amp%3Bamp%3Bamp%3Blt%3B/tr%26amp%3Bamp%3Bamp%3Bgt%3B%20%26amp%3Bamp%3Bamp%3Blt%3B/tbody%26amp%3Bamp%3Bamp%3Bgt%3B%20%26amp%3Bamp%3Bamp%3Blt%3B/table%26amp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Blt%3B/cke%3Abody%26amp%3Bamp%3Bamp%3Bgt%3B%20%26amp%3Bamp%3Bamp%3Blt%3B/cke%3Ahtml%26amp%3Bamp%3Bamp%3Bgt%3B%3C/iframe%3E%3C/td%3E%0A%09%09%09%09%09%3Ctd%20style%3D%22vertical-align%3A%20middle%3B%20width%3A%20100px%3B%22%3E%3Cscript%20style%3D%27text/javascript%27%3Efunction%20nombre%28json%29%20%7Bdocument.write%28parseInt%28json.feed.openSearch%24totalResults.%24t%2C10%29%29%3B%7D%3C/script%3E%3Cdiv%20style%3D%22color%3A%20%23e6e6fa%3Bbackground%3A%20%2300000%3Bwidth%3A100px%3Btext-align%3Acenter%3Bmargin-left%3A0px%3Bpadding%3A0px%3Bfont-weight%3A%20normal%3Bfont-family%3A%20arial%3Bfont-size%3A%2014px%3B%22%3EBulletin%20%23%20%3Cscript%20src%3D%27http%3A//meteo-weather3.blogspot.fr/feeds/posts/default%3Falt%3Djson-in-script%26callback%3Dnombre%27%3E%3C/script%3E%3C/div%3E%3C/td%3E%3C/tr%3E%3C/tbody%3E%3C/table%3E';d=unescape(m);document.write(d);</script>

C'est peut-être bizarre, mais là, Blogger l'accepte!