1
101

Sharing on social networks

You can choose which pages are shared, on which networks and how share buttons are displayed and where. The implementation is careful to add just what is needed to a page like the tags in the <head> section of the document which are read by search engines and the code in JavaScript required to interface the server.

Configuration

The type of buttons and the position of the bar for sharing a page on social networks are configured by the parameters $socializing and $socializingmode of the file config.inc.

global $socializing, $socializingmode;

$socializing='either';  // false, 'inline', 'bar', 'either', 'both'
$socializingmode='standard';       // 'standard', 'lite', 'awesome'

If $socializing is inline, the bar is displayed at the end of the content of the page.

If $socializing is bar, the bar floats to the left of the page of the site. If the display is too small, the bar is hidden.

If $socializing is either, the bar floats to the left of the page of the site. It's hidden as soon as the display is too small and replaced by the bar at the end of the content of the page.

If $socializing is both, the bar is always displayed at the end of the content of the page but it also floats to the left of the page if the display is large enough.

If $socializing is false, the bar is not displayed.

If $socializingmode is standard, the bar display the complete buttons buttons generated by the corresponding services. IMPORTANT: In this mode, the JavaScript code of the different providers is loaded on demand by the navigator and the buttons appear progressively. The display takes longer. Some protection modules of the navigators might block the JavaScript and mask the buttons.

With $socializing at bar or at either or both if the display is large enough:

With $socializing at inline or at either or both if the display is not large enough:

The buttons wrap automatically to the next line if necessary:

NOTE: iZend Bootstrap always shows share buttons in the page, i.e. inline, and $socializing can only be set to true or false.

If $socializingmode is lite or awesome, the bar displays buttons which call the interface of the service with a URL. In this mode, no JavaScript code is loaded and run by the navigator. The display is therefore faster but no counter is available. If $socializingmode is lite, the code displays icons in the buttons. If $socializingmode is awesome, the code uses a character font to draw the logos of the services.

To use another set of icons, replace the file social.png in the folder images/theme and edit the CSS for the tags #socialbar and #sharebar in theme.css.

IMPORTANT: When $socializingmode is set to awesome, make sure the CSS file of Font Awesome is loaded by the navigator by editing the view head.phtml:

<?php if (false): ?>
<?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; ?>

You can copy the CSS of Font Awesome in a folder font-awesome in the folder css at the root of the website and modify the URL in the tag <link> in head.phtml.

Editing
Options

Check the boxes facebook twitter linkedin pinit whatsapp to share the node on Facebook, Twitter, LinkedIn, Pinterest or WhatsApp.

An option for a node is only enabled if the same option is checked for the thread.

Options

NOTE: Options are the same for all languages.

DB

The database records the options for nodes in the table node.

CREATE 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;

The options for threads are in the table thread.

CREATE 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

The code in JavaScript is added to the final view standard of the folder layouts in the tag <head> for Pinterest and at the beginning of the tag <body> for Facebook. The views ilike and pinit define the parameters $pinteresetassets and $facebookjssdk. The configuration parameter $facebookid is defined in the file config.inc. For Tweeter and LinkedIn, the code is downloaded by adding a tag <script> with the fonction head directly in the views tweetit and linkedin.

standard.phtml

The code for Pinterest is inserted in the <head> section:

  1. <script>
  2. (function(d){
  3.     var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
  4.     p.type = 'text/javascript';
  5.     p.async = true;
  6.     p.src = '//assets.pinterest.com/js/pinit.js';
  7.     f.parentNode.insertBefore(p, f);
  8. }(document));
  9. </script>
  10. <?php endif; ?>
  11. </head>
  12. <body>

The code for Facebook is inserted at the beginning of the <body> section:

  1. <?php global $facebookjssdk; ?>
  2. <?php if ($facebookjssdk): ?>
  3. <?php global $facebookid, $facebookapiversion; ?>
  4. <div id="fb-root"></div>
  5. <script>
  6. window.fbAsyncInit = function() {
  7.     FB.init({
  8. <?php if ($facebookid): ?>
  9.         appId:      '<?php echo $facebookid; ?>',
  10. <?php endif; ?>
  11.         xfbml:      true,
  12.         status:     false,
  13.         version:    '<?php echo $facebookapiversion; ?>',
  14.     });
  15. };
  16. (function(d, s, id) {
  17.     var js, fjs = d.getElementsByTagName(s)[0];
  18.     if (d.getElementById(id)) {return;}
  19.     js = d.createElement(s); js.id = id;
  20.     js.src = "//connect.facebook.net/<?php echo $facebookjssdk; ?>/sdk.js";
  21.     fjs.parentNode.insertBefore(js, fjs);
  22. }(document, 'script', 'facebook-jssdk'));
  23. </script>
Views
facebook ilike.phtml
twitter tweetit.phtml
linkedin linkedin.phtml
pinit pinit.phtml

Comments

Your comment:
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip help 2000

Enter a maximum of 2000 characters.
Improve the presentation of your text with the following formatting tags:
[p]paragraph[/p], [b]bold[/b], [i]italics[/i], [u]underline[/u], [s]strike[/s], [quote]citation[/quote], [pre]as is[/pre], [br]line break,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]command[/code], [code=language]source code in c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].