Widget qui chante ce soir

Présentation rapide

Pour intégrer Qui Chante Ce Soir directement en "widget", Il vous suffit d'ajouter 2 lignes HTML sur la page de votre site.

Utilisateurs de WordPress: un plugin est disponible !

<!-- widget quichantecesoir -->
<a data-qccs-table="1" data-qccs-order="bigdate,cp_country,address,details" class="qccs-widget" href="http://quichantecesoir.com/a/114-nicolas-bacchus">Nicolas Bacchus sur Quichantecesoir</a>
<script type='text/javascript' src='http://quichantecesoir.com/js/widget.js'></script>
<!-- / widget quichantecesoir -->
Bien entendu le look et les couleurs sont personnalisables pour s'adapter à chaque site (voir plus loin).

Documentation

Le principe du widget est le suivant : prendre les informations du site quichantecesoir.com, et les afficher sur un site internet en personnalisant l'apparence (agencement des infos, ordre des informations, couleurs, police, …).

Agencement des informations : tableau ou pas ?

La première étape est de choisir si vous voulez un affichage de type «tableau» (data-qccs-table=1, plutôt adapté pour une page) ou en mode «conteneur simple» (data-qccs-table=0plutôt adapté pour une colonne par exemple).

Quelles informations afficher ? La date? le lieu ?

data-qccs-order="bigdate,cp_country_city,main,note,link" Par défaut, le widget affiche ces informations dans cet ordre:

  • la date et l'heure
  • Le code postal, la ville et le pays (si hors de France)
  • Le nom de l'événement (ou la liste des artistes, ou le nom du spectacle selon les cas)
  • les infos importantes sur l'événement (le cas échéant)
  • Un lien vers la page détaillée de l'événement sur quichantecesoir

Pour personnaliser les informations à afficher et leur ordre, utilisez l'attribut HTML data-qccs-order. Voici les mots clefs à utiliser et leur correspondance.

bigdate
date formattée avec heure
date
date + heure
image
image des abonnés
image_spectacle
image des spectacles uniquement (attention, format libre)
cp
code postal
city
ville
cp_city_country
code postal + ville + pays (si différent de France)
main
titre de l'événement + nom du lieu + adresse
spectacle
nom du spectacle avec artistes
spectacle_only
nom du spectacle seul
title
nom du spectacle (je crois) … a travailler
lieu
nom du lieu
lieu_address
nom du lieu + son adresse
contact
contacts pour réserver (tel du lieu le plus souvent)
address
adresse «simple» de l'événement (du lieu le plus souvent) sur une ligne
note
remarques importantes sur l'événement
link
lien vers la page quichantecesoir de l'événement

Une meilleure aide est «Coming soon» comme on dit, avec :

  • La liste des mots clefs pour les infos à afficher
  • afficher ou pas les dates annulées
  • afficher le nombre de prochaines dates data-qccs-show-count
  • afficher un titre en en-têtedata-qccs-legend
  • un mode «archive» pour afficher les anciennes dates.

Voici ci-dessous un exemple de l'utilisation du widget un style « nu ». Chaque information (liste des artistes, nom du spectacle, dates, …) est sur une ligne séparée pour faciliter la personnalisation des dates et l'intégrer plus facilement à votre site.

Explication détaillée

Utilisation de base

Le code du widget que vous insérez dans votre page a pour résultat de faire un appel à quichantecesoir.com, d'extraire les données vous concernant, et d'insérer dans votre page un code html «simple», simplifiant ainsi l'intégration dans votre site internet.

Personnalisation du look

Le widget étant «sans style» par défaut, il prendra de manière naturelle les couleurs et la police de votre site, ce qui vous conviendra dans la plupart des cas. Mais si vous voulez personnaliser l'habillage de manière plus précise, il vous suffit de les préciser dans votre page web entre des balises style. Cela nécessite quelques notions basique en html, mais n'hésitez pas à nous contacter si vous avez besoin d'aide.