ThéorieFonctionnalitésAvancé

Organiser les scripts de son blog


Suite à l'arrivée des Thèmes de la 3e génération, les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes ou qui ne conviennent pas à votre nouveau thème !
Pour vous aider a développer votre thème, référez-vous :En cas de besoin, exposez votre cas sur le forum.
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
Assistance publique pour le produit Blogger sur les supports  d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • 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

ThéorieRéférences XMLTypes des variables d'habillage
Variables d'habillage - Les valeurs automatisées [automatic]
Populaire
ThéorieFonctionnalitésGestion
Populaire
DéveloppementsFichiers XML
Populaire
ThéorieFonctionnalitésContenu
Populaire
ThéorieFonctionnalitésSEO
Populaire