StarPush - Script de notation

StarPush est un outil simple et efficace.

En une simple balise à copier-coller, vous pourrez ajouter StarPush sur votre site permettant à vos utilisateurs de noter vos articles, produits, vidéos, etc.

StarPush se fixe à l'endroit où vous l'insérez sans rien altérer de votre design.

Ce module s'adapte à n'importe quel hébergement, vous n'avez besoin ni de base de données ni même de PHP. Les données sont stockées directement sur le serveur de StarPush et triée en fonction du nom de domaine qui l'utilise.

Compatibles avec tous les navigateurs.
(dispose également d'une version sans JavaScript 100% compatible)

Mozilla Firefox Internet Explorer Google Chrome Safari Opera

Nouveau ! StarPush en version asynchrone

Cliquez
ci-dessus
pour tester
ce code !

La version asynchrone évite tout ralentissement du chargement de votre page. Chaque snippet StarPush se charge alors indépendamment en parrallèle des autres ressources de votre page.
Si vous n'avez qu'un seul élément à noter, utilisez le code par défaut de StarPush :

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/i.js');
</script>

L'ancienne version est toujours disponible, pour voir les exemples de cette page en version synchrone, cliquez ici.

Version sans JavaScript

Ajoutez la version sans JavaScript dans une balise <noscript> après le code StarPush choisi pour proposer une alternative aux utilisateurs ne disposant pas de JavaScript ou l'ayant désactivé.
Si vous souhaitez avoir un aspect semblable entre la version JavaScript et sans JavaScript, utiliser le code Mini StarPush avec le paramètre nostyle

<noscript>
	<iframe
		src="https://starpush.selfbuild.fr/nojs.php?ref=identifiantN"
		width="80"
		height="16"
		style="border:none; float:right;"
	></iframe>
</noscript>

Pour utiliser la version sans JavaScript même si l'utilisateur dispose de JavaScript, insérez le code suivant seul :

<iframe
	src="https://starpush.selfbuild.fr/nojs.php?ref=identifiantN"
	width="80"
	height="16"
	style="border:none; float:right;"
></iframe>

Insertions multiples

Pour insérer plusieur codes StarPush indépendants :

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/i.js?id1');
</script>
<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/i.js?id2');
</script>

Chaque balise script doit alors avoir son propre identifiant. Un identifiant ne doit contenir que des chiffres et des lettres non accentuées. La longueur maximale d'un identifiant est de 255 caractères.

Nouveau ! Identifiant dynamique

Grâce à la version asynchrone, il est possible de calculer dynamiquement l'identifiant de chaque snippet, par exemple en fonction de l'URL de la page :

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/i.js'+location.href.replace(/[^a-zA-Z0-9-]+/g, '_').substr(-400));
</script>

Selon le framework que vous utilisez, vous aurez peut-être besoin d'ignorer les paramètres GET de l'URL, vous pouvez y parvenir comme ceci :

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/i.js'+location.href.split('?')[0].replace(/[^a-zA-Z0-9-]+/g, '_').substr(-400));
</script>

Insertion à gauche

Utilisez le paramètre left pour placer votre code StarPush en haut à gauche du bloc à l'intérieur duquel il se trouve :

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/i.js?left-idenditifiant');
</script>

Pour utiliser des paramètres (tels que left), vous devez utiliser un identifiant ou terminer l'URL par un tiret (exemple : ?left-) sans quoi, left sera interprété comme l'identifiant et non comme un paramètre.

Insertion sans flottement

Le paramètre none permet d'afficher le code StarPush directement. Il prendra alors la place nécessaire pour s'afficher sans chevaucher de contenu et étirera au besoin le bloc dans lequel il se trouve. Libre à vous ensuite d'utiliser un bloc parent pour le positionner où bon vous semble.

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/i.js?none-idenditifiant2');
</script>

Insertion sans style

Le paramètre nostyle désactive les bordures et les marges.
Vous pouvez alors modifier le style appliqué en modifiant la class "note_div" en CSS.
Notez que celà est possible même sans utiliser le paramètre nostyle.

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/i.js?nostyle-idenditifiant3');
</script>

Utiliser plusieurs paramètres

Il est possible de coupler plusieurs paramètres en les séparant par des virgules.

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/i.js?nostyle,left-idenditifiant4');
</script>

Icône personnalisée

Attention, le fichier à utiliser n'est plus i.js mais p.js pour personnaliser vos icônes.
Cependant, les identifiants sont les mêmes pour i.js et p.js, vous devez donc éviter tout doublon.
Enfin, i.js est plus léger et plus rapide, il est donc préférable d'utiliser plutôt ce script si vous ne souhaitez pas personnaliser l'icône.

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/p.js?https%3A%2F%2Fstarpush.selfbuild.fr%2Fimages%2Fargent.png,https%3A%2F%2Fstarpush.selfbuild.fr%2Fimages%2For.png,margin-idenditifiant5');
</script>

La syntaxe doit être scrupuleusement respectée. Le premier paramètre doit être l'URL de l'image normale (grise).
Le seconde paramètre doit être l'URL de l'image au survol (jaune).
Tous les autres paramètres doivent être ajoutés après les URLs. Les URLs doivent être encodées.

Générateur d'URL encodée :

Vous pouvez utiliser n'importe quelle image (même si elle n'est pas carrée). StarPush détecte la largeur et hauteur de l'image et adapte la boîte aux dimensions de l'image.
En revanche, pour un affichage optimal les dimensions de l'image au survol doivent être les même que celle de l'image normale.

Notez également la présence du paramètre margin. Ce dernier permet de séparer les images (2 pixels d'intervale). Retirez-le pour obtenir des images collées.

Enfin, il est possible de spécifier une adresse relative. (Si le code se trouve sur la page https://starpush.selfbuild.fr/page.html et que l'adresse spécifiée est images/argent.png, le script chargera https://starpush.selfbuild.fr/images/argent.png).
Donc le code ci-dessous est équivalent au précédent :

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/p.js?images%2Fargent.png,images%2For.png,margin-idenditifiant5');
</script>

Plus ou Moins

Attention, le fichier à utiliser n'est plus i.js mais pm.js pour utiliser "Plus ou Moins".
Cependant, les identifiants sont toujours les mêmes, vous devez donc éviter tout doublon.
Ce script n'affiche que deux boutons (Oui/Plus ou Non/Moins) et un compteur faisait la somme des votes positif moins la somme des votes négatifs.

Le script est basé sur p.js (voir Icône personnalisée ci-dessus), il est donc possible de passer 4 URL en paramètres dans cet ordre : Oui, Oui survolé, Non, Non survolé.

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/pm.js?images%2Foui.png,images%2Fouih.png,images%2Fnon.png,images%2Fnonh.png,margin-idenditifiantPM');
</script>

Le fichier à utiliser est j.js pour utiliser "J'aime".
Ce script est basé sur le "Plus ou Moins" auquel on a retiré le moins. Vos visiteurs peuvent donc cliquer sur le bouton pour indiquer qu'ils aiment et le compteur indique combien de personnes aiment.

Il est donc possible de passer 3 URL en paramètres dans cet ordre : Bouton J'aime, Bouton J'aime survolé, Bouton J'aime inactif (lorsque le visiteur a déjà cliqué dessus).

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/j.js?images%2Fjaime.png,images%2Fjaimeh.png,images%2Fjaimeg.png-idenditifiantJ');
</script>

Icônes entières (pas de demi-étoile)

Ajoutez le paramètre nohalf pour interdire les notes 0.5, 1.5, 2.5, 3.5 et 4.5.
Ainsi, vos visiteurs ne pourront donner que des notes entières (1, 2, 3, 4 ou 5) et les images ne seront pas coupées en deux.
De même la note moyenne sera arrondie pour donnée un nombre entier.

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/p.js?url1,url2,nohalf-identifiant6');
</script>

Mini StarPush

Version sans texte (seule une petite infobulle apparaît au survol de la souris). Les dimensions de l'espace occupé par ce code sont donc fixes. Par exemple en utilisant le paramètre nostyle et une image de 16x16 pixels, votre code StarPush occupera 80x16 pixels.
Cette version affiche la moyenne des notes et la note de l'utilisateur sur la même barre, il est donc recommandé de passer 3 URLs d'images différentes en paramètre. Si seulement 2 paramètres sont fournie, la deuxième URL sera utilisée dans les deux cas mais cela risque de sembler confus aux utilisateurs.

<script
(function(S,t,a,r,p,u,s,h){
r=S.createElement(t),p=S.getElementsByTagName(t),u=p[p.length-1];r.async=1;r.src=a;u.parentNode.insertBefore(r,u)
})(document,'script','https://starpush.selfbuild.fr/m.js?url1,url2,url3-identifiant7');
</script>

Récupérer les infos en PHP

StarPush vous permet de récupérer les données pour vos propres développements.
Exemple de code :

<?php
$identifiant='identifiant';
// Remplacez par l'identifiant utilisé dans votre code StarPush

// Composition de l'URL
$url='https://starpush.selfbuild.fr/get/' . urlencode($_SERVER['HTTP_HOST']);
$url.='/' . $identifiant;

// Récupération des données
$donnees=@unserialize(file_get_contents($url));

if(isset($donnees['succes'])
&& $donnees['ref']==$identifiant
&& $donnees['succes']===true)
{
	echo 'Récupération des données effectuée avec succès.';
	if($donnees['total']>0)
	{
		// Liste des informations fournies
		echo '<br />Nombre de votes : ' . $donnees['total'];
		echo '<br />Somme de tous les notes données : ' . ($donnees['notes']/2);
		// Calcul de la moyenne
		echo '<br />Moyenne : ' . ($donnees['notes']/2/$donnees['total']);
		echo '<br />Note minimale donnée : ' . ($donnees['min']/2);
		echo '<br />Note maximale donnée : ' . ($donnees['max']/2);
		echo '<br />Nombre de 0.5/5 donnés : ' . $donnees['n1'];
		echo '<br />Nombre de 1/5 donnés : ' . $donnees['n2'];
		echo '<br />Nombre de 1.5/5 donnés : ' . $donnees['n3'];
		echo '<br />Nombre de 2/5 donnés : ' . $donnees['n4'];
		echo '<br />Nombre de 2.5/5 donnés : ' . $donnees['n5'];
		echo '<br />Nombre de 3/5 donnés : ' . $donnees['n6'];
		echo '<br />Nombre de 3.5/5 donnés : ' . $donnees['n7'];
		echo '<br />Nombre de 4/5 donnés : ' . $donnees['n8'];
		echo '<br />Nombre de 4.5/5 donnés : ' . $donnees['n9'];
		echo '<br />Nombre de 5/5 donnés : ' . $donnees['n10'];
	}
	else
	{
		echo '<br />Nombre de votes : 0';
	}
}
else
{
	echo 'Les données n\'ont pas pu être récupérées.';
}
?>

Attention, toutes les données renvoyées sont des nombres entiers. Les notes vont donc de 1/10 à 10/10.
Nous avons également développé une classe PHP qui vous permet de récupérer ces infos et de générer des scripts StarPush plus facilement.
Plus de renseignements sur class.starpush.php

Pour récupérer les données dans un autre langage, utilisez l'API JSON :

https://starpush.selfbuild.fr/json/www.votre.domaine.com/identifiant