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="https://quichantecesoir.com/a/114-nicolas-bacchus">Nicolas Bacchus sur Quichantecesoir</a>
<script type='text/javascript' src='https://quichantecesoir.com/js/widget.js'></script>
<!-- / widget quichantecesoir -->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
- date_simple
- date au format d·m·Y
- 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ête
data-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.