Gadget de partage

Aperçu

Responsable de projet : Paul Jackson (@pjackson28)

Needs translation

Purpose

Having a share widget on your site enables users to quickly share content with their networks, hence increasing the reach of your website. This increase in reach comes at very minimal cost as all it requires is the inclusion of a share widget somewhere on your page.

Recommended usage

Use when

Use on specific content that you want users to share or that users would find useful to share with others via their social media outlets. Use the filtered version if you want to target certain platforms, for example, if your research indicates that your target audience tends to use one or a few platforms over others.

Content

Rather than automatically including the share button on every page of your site, think about users and when and where they may want to take a call to action to digg, share, tweet or follow. A well designed site will facilitate a 'frictionless' experience for the user where they would otherwise have to copy and paste. (Source).

A disclaimer must be included that states no endorsement is implied through use of social media icons.

Do not use when

  • The page does not contain useful content (e.g., splash pages)
  • The page does not have a unique URL. Sharing the page would send people to a different page if users clicked on the shared link.
  • Automatically on every page.

Mise en oeuvre

  1. Ajouter <div class="wet-boew-share"></div> à une page Web.
  2. Specifier la largeur du gadget (p. ex., class="span-5 margin-bottom-none")
  3. Configurer les options globales ou uniques à chaque page. Configurer les options globales en ajoutant var wet_boew_share = { ... options ...}; à settings.js. Configurer les options uniques à chaque page en ajoutant à l'élément du gadget les classes de configuration ou data_wet_boew_share='{"option1": valeur1, "option2": "valeur2" ...}'.

Exemple d'une configuration globale :

var wet_boew_share = {
   "sites" : ["del.icio.us", "digg", "facebook", "google", "linkedin", "reddit", "stumbleupon", "twitter", "yahoobuzz"]
};

Exemple d'une configuration globale

Exemple d'une configuration unique à une page :

<div class="wet-boew-share" data-wet-boew='{"sites":["digg","facebook","twitter"]}'></div>

Needs translation

Adding additional social media sites

If a social media site is not in the list of supported sites, there are two ways to add your own starting in v3.0.8 and v3.1.2.

In settings.js (using the form 'id': {display, icon, lang, category, url}):

var wet_boew_share = {"addSites": {"pinterest": {"display": "Pinterest", "icon": "/img/pinterest.jpg", "lang": "en", "category": "other", "url": "http://pinterest.com/pin/create/button/?url={u}&title={t}"}}};

Using data-wet-boew:

data_wet_boew='{"addSites": {"pinterest": {"display": "Pinterest", "icon": "/img/pinterest.jpg", "lang": "en", "category": "other", "url": "http://pinterest.com/pin/create/button/?url={u}&title={t}"}}}'

Options de configuration

Paramètre (options globale et data-wet-boew) Valeur Par défault Classe de configuration Description
addEmail Booléen false email (même que addEmail:true) Contrôle l'affichage du lien de courriel. C'est relié aux paramètres emailSubject et emailBody.
addAnalytics Boolean false analytics (même que addAnalytics:true) Contrôle l'activation de Google Analytics pour les liens. C'est relié au paramètre analyticsName.
addFavorite Booléen false favourite (même que addFavorite:true) Contrôle l'affichage du lien préféré.
analyticsName String '/share/{r}/{s}' où '{s}' est le code du site, '{n}' est le nom du site, '{u}' est l'URL complet, '{r}' est l'URL relatif et '{t}' est le titre s/o L'URL qui est renvoyé à Google Analytics.
description Chaîne s/o Description de la page ou du site. Il remplace {d} dans le texte généré.
emailBody Chaîne "I thought you might find this page interesting:\n{t} ({u})" / "J'espère que cette page vous intéresse :\n{t} ({u})" s/o Le contenu du courriel généré par le lien de courriel. {t} est remplacé par let titre de la page, {u} est remplacé par le URL de la page et {d} est remplacé par la description de la page (où elle existe). Utiliser \n pour les nouvelles lignes. C'est relié aux paramètres addEmail et emailSubject.
emailSubject Chaîne "Interesting page" / "Page qui est intéressante" s/o Sujet du courriel généré par le lien de courriel. C'est relié aux paramètres addEmail et emailBody.
sites Tableau [] s/o Liste des sites Web de médias sociaux à inclure dans le gadget (p. ex., sites:['digg','facebook','twitter']). Laisser vide pour inclure tous les sites Web de médias sociaux qui sont soutenus par ce gadget.
sourceTag Chaîne s/o Balise supplémentaire a ajouté a l'URL pour indiquer le source du lien partagé.
title Chaîne s/o Titre à partager. Laisser vide pour utiliser le titre de la page actuelle.
url Chaîne s/o URL à partager. Laisser vide pour utiliser l'URL de la page actuelle.

Needs translation

Configuring emailBody and emailSubject text

Add the following to settings.js:

var wet_boew_share;
if ($('html').attr('lang') === 'fr')
    wet_boew_share = {
        'emailSubject': 'French subject of the email',
        'emailBody': 'French body of the email. Use {t} for the page title, {u} for the page URL and {d} for the page description.'
    };
else {
    wet_boew_share = {
        'emailSubject': 'English subject of the email',
        'emailBody': 'English body of the email. Use {t} for the page title, {u} for the page URL and {d} for the page description.'
    };
}

Exemples

Développement

Le gadget de partage est dépendentsur jQuery Bookmark (licence MIT, licence GPL).

Le code pour le gadget de partage se trouve à plusieurs endroits dans le répertoire source de la BOEW :

Problèmes connus

Il n’existe actuellement aucun problème connu.

Historique des versions

Références