Partage sur les réseaux sociaux
Vous pouvez choisir quelles pages sont partagées, sur quels réseaux sociaux et comment les boutons de partage sont affichés et où. L'implémentation ajoute précisément ce qui est nécessaire à une page comme les balises dans la section <head> du document qui sont lues par les moteur de recherche et le code JavaScript indispensable pour interfacer le serveur.
Configuration
Le type de boutons et le positionnement de la barre de partage d'une page sur les réseaux sociaux sont configurés par les paramètres $socializing et $socializingmode du fichier config.inc.
$socializing='either'; // false, 'inline', 'bar', 'either', 'both'
$socializingmode='standard'; // 'standard', 'lite', 'awesome'
Si $socializing vaut inline, la barre est affichée à la fin du contenu de la page.
Si $socializing vaut bar, la barre flotte à gauche de la page du site. Si la taille de l'affichage est trop petite, la barre est cachée.
Si $socializing vaut either, la barre flotte à gauche de la page du site.
Elle est cachée dès que la taille de l'affichage est trop petite et remplacée par la barre à la fin du contenu de la page.
Si $socializing vaut both, la barre est toujours affichée dans la page du site mais elle flotte aussi à gauche de la page du site si l'affichage est assez large.
Si $socializing vaut false, la barre n'est pas affichée.
Si $socializingmode vaut standard, la barre affiche les boutons complets générés par les services correpondants.
IMPORTANT : Dans ce mode, le code JavaScript des différents fournisseurs est chargé à la demande par le navigateur et les boutons apparaissent progressivement.
Le temps d'affichage est plus long.
Certains modules de protection des navigateurs peuvent bloquer le JavaScript et masquer les boutons.
Avec $socializing à bar ou à either ou both si l'affichage est assez large :
Avec $socializing à inline ou à either ou both si l'affichage est assez large :
Les boutons passent automatiquement à la ligne si nécessaire :
NOTE : iZend Bootstrap montre toujours les boutons de partage dans la page, i.e. inline, et $socializing ne peut avoir que les valeurs true ou false.
Si $socializingmode vaut lite ou awesome, la barre affiche des boutons qui appellent l'interface du service correspondant via une URL.
Dans ce mode, aucun code JavaScript n'est téléchargé et exécuté par le navigateur.
L'affichage est donc plus rapide mais aucun compteur n'est disponible.
Si $socializingmode vaut lite, le code affiche des icônes dans les boutons.
Si $socializingmode vaut awesome, le code utilise une police de caractères pour dessiner les logos des services.
Pour utiliser un autre jeu d'iĉones, remplacez le fichier social.png dans le dossier images/theme et éditez le CSS des balises #socialbar et #sharebar dans theme.css.
IMPORTANT : Quand $socializingmode vaut awesome, assurez-vous que le fichier CSS de Font Awesome est chargé par le navigateur en éditant la vue head.phtml :
<?php require_once 'ishttps.php'; ?>
<link rel="stylesheet" type="text/css" href="http<?php if (is_https()): ?>s<?php endif; ?>://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" media="screen" >
<?php endif; ?>
Vous pouvez copier le CSS de Font Awesome dans un dossier font-awesome dans le dossier css à la racine du site et modifier l'URL de la balise <link> dans head.phtml.
Édition
Cochez les cases facebook twitter linkedin pinit whatsapp pour partager le nœud sur Facebook, Twitter, LinkedIn, Pinterest ou WhatsApp.
Une option pour nœud est activée uniquement si la même option est cochée par le fil.
NOTE : Les options sont les mêmes pour toutes les langues.
BD
La base de données enregistre les options pour les nœuds dans la table node.
`node_id` INT(10) UNSIGNED NOT NULL,
`user_id` INT(10) UNSIGNED NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
`visits` tinyint(1) NOT NULL DEFAULT '1',
`nocomment` tinyint(1) NOT NULL DEFAULT '0',
`nomorecomment` tinyint(1) NOT NULL DEFAULT '0',
`novote` tinyint(1) NOT NULL DEFAULT '0',
`nomorevote` tinyint(1) NOT NULL DEFAULT '0',
`ilike` tinyint(1) NOT NULL DEFAULT '1',
`tweet` tinyint(1) NOT NULL DEFAULT '1',
`linkedin` tinyint(1) NOT NULL DEFAULT '1',
`pinit` tinyint(1) NOT NULL DEFAULT '0',
`whatsapp` tinyint(1) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
ALTER TABLE `node` ADD PRIMARY KEY (`node_id`);
ALTER TABLE `node` MODIFY `node_id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT;
Les options pour les fils sont dans la table thread.
`thread_id` INT(10) UNSIGNED NOT NULL,
`user_id` INT(10) UNSIGNED NOT NULL DEFAULT '1',
`thread_type` enum('thread','folder','story','book','rss','newsletter') NOT NULL DEFAULT 'thread',
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
`number` INT(4) UNSIGNED NOT NULL,
`visits` tinyint(1) NOT NULL DEFAULT '1',
`nosearch` tinyint(1) NOT NULL DEFAULT '0',
`nocloud` tinyint(1) NOT NULL DEFAULT '0',
`nocomment` tinyint(1) NOT NULL DEFAULT '0',
`nomorecomment` tinyint(1) NOT NULL DEFAULT '0',
`novote` tinyint(1) NOT NULL DEFAULT '0',
`nomorevote` tinyint(1) NOT NULL DEFAULT '0',
`ilike` tinyint(1) NOT NULL DEFAULT '1',
`tweet` tinyint(1) NOT NULL DEFAULT '1',
`linkedin` tinyint(1) NOT NULL DEFAULT '1',
`pinit` tinyint(1) NOT NULL DEFAULT '1',
`whatsapp` tinyint(1) NOT NULL DEFAULT '1'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
ALTER TABLE `thread` ADD PRIMARY KEY (`thread_id`);
ALTER TABLE `thread` MODIFY `thread_id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT;
Code
Le code en JavaScript est ajouté par la vue finale standard du dossier layouts dans la balise <head> pour Pinterest et au début de la balise <body> pour Facebook.
Les vues ilike et pinit définissent les paramètres $pinteresetassets et $facebookjssdk.
Le paramètre de configuration $facebookid est défini dans le fichier config.inc.
Pour Tweeter et LinkedIn, le code est téléchargé en ajoutant une balise <script> avec la fonction head directement dans les vues tweetit et linkedin.
standard.phtml
Le code pour Pinterest est inséré dans la section <head> :
- <script>
- (function(d){
- var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
- p.type = 'text/javascript';
- p.async = true;
- p.src = '//assets.pinterest.com/js/pinit.js';
- f.parentNode.insertBefore(p, f);
- }(document));
- </script>
- <?php endif; ?>
- </head>
- <body>
Le code pour Facebook est inséré au début de la section <body> :
- <?php global $facebookjssdk; ?>
- <?php if ($facebookjssdk): ?>
- <?php global $facebookid, $facebookapiversion; ?>
- <div id="fb-root"></div>
- <script>
- window.fbAsyncInit = function() {
- FB.init({
- <?php if ($facebookid): ?>
- appId: '<?php echo $facebookid; ?>',
- <?php endif; ?>
- xfbml: true,
- status: false,
- version: '<?php echo $facebookapiversion; ?>',
- });
- };
- (function(d, s, id) {
- var js, fjs = d.getElementsByTagName(s)[0];
- if (d.getElementById(id)) {return;}
- js = d.createElement(s); js.id = id;
- js.src = "//connect.facebook.net/<?php echo $facebookjssdk; ?>/sdk.js";
- fjs.parentNode.insertBefore(js, fjs);
- }(document, 'script', 'facebook-jssdk'));
- </script>
Vues
| ilike.phtml | |
| tweetit.phtml | |
| linkedin.phtml | |
| pinit | pinit.phtml |
Commentaires