ThéorieFonctionnalitésAvancé

Organiser les scripts de son blog


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Organiser les scripts de son blog
Javascript est un langage de programmation. Les programmes sont notés directement dans le code HTML ou dans des fichiers externes.
Les JS servent à accomplir diverses tâches. Par exemple, rendre opérationels des modules sociaux, donner un aspect dynamique à certains éléments, extraire des données, etc.
Toutefois, il est recommandé d'organiser et de privilégier les fichiers externes afin d'éviter d'alourdir inutilement le code HTML et par la même occasion augmenter le temps de téléchargement de son blog.

Ajouter un script

Un script peut être ajouté dans le code HTML du modèle, dans un gadget HTML/JS ou dans un article (onglet HTML).

L'idéal est de regrouper tous les fichiers directement dans le code HTML du modèle entre <head> et </head> ou encore à la fin du modèle, juste avant </body> . L'emplacement à choisir dépend principalement de la priorité d'exécution et du contenu du script.

<script src='[URL_JS]' type='text/javascript'/>


Bibliothèques de scripts

Parce que tout le monde n'est pas doué en programmation et que personne n'est à l’abri d'erreurs, il est conseillé d'utiliser des exemples de scripts gratuits ou des bibliothèques de scripts qui ont déjà fait leur preuve sur le net.

Exemplesallhtml.com [FR]
ExemplesBiblioscript.com [FR]
BibliothèquesBibliothèques Google (jQuery, MooTools, etc)
ThéorieW3School JavaScript Tutorial

Lorsque vous installez des modules (par exemple des résumés en diaporama ou des menus accordéons et tous des trucs de ce genre qui utilisent des bibliothèques communes), vérifiez si vous n'avez déjà pas le script installé sur votre blog.

Notez également que les scripts que vous trouvez sur internet ou ailleurs n'ont pas été écrit par des fantômes. Réfléchissez à deux fois avant de vous approprier leur travail en enlevant les mentions légales ou/et les mentions de propriété intellectuelle !


Scripts de modules sociaux

Généralement les réseaux sociaux construisent leurs propres modules en regroupant toutes les fonctionnalités JS dans un seul et unique fichier.
Dans leur guide d'installation, ils vous communiquent automatiquement le script et le code HTML du module. Si vous installez plusieurs modules issus du même réseau, il n'est pas nécessaire de recopier le script à chaque fois. Une seule fois suffit !

Facebook :

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = '//connect.facebook.net/fr_FR/all.js#xfbml=1&amp;appId=ID APPLICATION';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Script conçu pour les modules Bouton J'aime, Boîte des recommandations, Barre des recommandations, Bouton d'abonnement, Module des commentaires, LikeBox, Bouton "Envoyer", etc


Google+ :

<script type='text/javascript'>
  window.___gcfg = {lang: &#39;fr&#39;};
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Script conçu pour les modules Bouton PlusOne, Bouton Partager, Badge Profil, Badge Page, etc

Sur Blogger, le script plusone.js n'est plus requis puisqu'il est automatiquement intégré dans le modèle. [En savoir plus]


Twitter :

<script type='text/javascript'>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);
</script>

Script conçu pour les modules Bouton Tweet, Bouton Suivre, etc


LinkedIn :

<script src='http://platform.linkedin.com/in.js' type='text/javascript'/>

Script conçu pour les modules Bouton LinkedIn, Badge Profil, etc


Pinterest :

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

Script conçu pour les modules Bouton Pin-It, etc
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
ThéorieRéférences XMLTypes des variables d'habillage
Variables d'habillage - Les arrière-plans [background]
Populaire