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

La méthode facile

Cliquez
ci-dessus
pour tester
ce code !

Si vous n'avez qu'un seul élément à noter, utilisez le code par défaut de StarPush :

<script type="text/javascript" src="https://starpush.selfbuild.fr/i.js"></script>

Notez que tous les paramétrages listés ci-dessous sont également disponible dans la version asynchrone et plus encore, nous vous conseillons donc vivement de basculer vers cette nouvelle version.

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
	type="text/javascript"
	src="https://starpush.selfbuild.fr/i.js?id1"
></script>
<script
	type="text/javascript"
	src="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
	type="text/javascript"
	src="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
	type="text/javascript"
	src="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
	type="text/javascript"
	src="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
	type="text/javascript"
	src="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
	type="text/javascript"
	src="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
	type="text/javascript"
	src="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
	type="text/javascript"
	src="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
	type="text/javascript"
	src="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
	type="text/javascript"
	src="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
	type="text/javascript"
	src="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