Only show social network button if users want's them (mga#18072)

2 files changed, 57 insertions, 17 deletions

diff --git a/en/downloads/get/index.php b/en/downloads/get/index.php
index 2680199ad..d3e3cc485 100644..100755
--- a/en/downloads/get/index.php
+++ b/en/downloads/get/index.php
@@ -332,28 +332,57 @@ gpg:          There is no indication that the signature belongs to the owner.
                 </div></div>
             <?php endif; ?>
     </div>
+    <div class="d-flex justify-content-center">
+    <button type="button" class="btn btn-secondary btn-sm share-icon" title="<?php _g('By continuing this navigation, you agree to the use of cookies to enable you to share content via social network sharing buttons.')?>"><?php _g('Share')?></button>
+        <div class="row">
+        <span class="col"><a href="https://twitter.com/mageia_org" class="twitter-follow-button" data-show-count="true" data-lang="<?php echo $locale; ?>"></a></span>
+        <span class="col"><div class="fb-like" data-href="https://www.facebook.com/Mageia" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div></span>
+        <span class="col"><div class="g-plusone" data-annotation="inline" data-size="medium" data-width="120"></div></span>
+        </div>
+    </div>
+</div>
+
+<?php echo common_footer($locale); ?>
 <script>
 document.getElementById("other_mirrors_btn").onclick = function () {
     var el = document.getElementById("other_mirrors");
     el.style.display = (el.style.display != 'none' ? 'none' : '' );
 };
+
+<?php
+/* workaround for https://developers.facebook.com/docs/internationalization */
+function getFBlocale($locale){
+    $FBlocal = array(
+        'de'    => 'de_DE',
+        'es'    => 'es_ES',
+        'fr'    => 'fr_FR',
+        'pt-br' => 'pt_BR',
+    );
+    if (array_key_exists($locale, $FBlocal)) {
+        return $FBlocal[$locale];
+    } else {
+        return 'en_US';
+    }
+};?>
+
+$(function() {
+    $('.share-icon').on('click', function(){
+        $.getScript('//platform.twitter.com/widgets.js');
+
+        (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 getFBlocale($locale); ?>/sdk.js#xfbml=1&version=v2.9";
+            fjs.parentNode.insertBefore(js, fjs);
+            }(document, 'script', 'facebook-jssdk')
+        );
+
+        $.getScript('https://apis.google.com/js/plusone.js');
+        {lang: '<?php echo $locale; ?>'}
+
+    });
+});
 </script>
-<div class="yui-gb" style="border-top: 1px solid #ccc; background:#f8fcff; text-align: center;">
-    <div class="yui-u first"><div class="para" style="background: transparent;">
-        <a href="https://twitter.com/mageia_org" class="twitter-follow-button" data-show-count="true" data-lang="<?php echo $locale; ?>">Follow @mageia_org</a>
-        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-    </div></div>
-    <div class="yui-u"><div class="para" style="background: transparent;">
-        <g:plusone href="//mageia.org/"></g:plusone>
-    </div></div>
-    <div class="yui-u"><div class="para" style="background: transparent;">
-        <div id="fb-root"></div><script src="//connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:facepile href="facebook.com/Mageia" width="270" max_rows="1"></fb:facepile>
-    </div></div>
-</div>
-<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
-  {lang: '<?php echo $locale; ?>'}
-</script>
-</div>
-<?php echo common_footer($locale); ?>
 </body>
 </html>
diff --git a/g/style/bootstrap_theme.css b/g/style/bootstrap_theme.css
index 6bcf515c4..fd13fed97 100644..100755
--- a/g/style/bootstrap_theme.css
+++ b/g/style/bootstrap_theme.css
@@ -121,6 +121,17 @@ https://codepen.io/jakob-e/pen/doMoML
    background-size: 100%;
    background-repeat: no-repeat;
 }
+.share-icon:after{
+   content:'';
+   width: 1rem;
+   height: 1rem;
+   margin-left: 0.3rem;
+   display: inline-block;
+background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E %3Cpath d='M.75 0c-.41 0-.75.34-.75.75v5.5c0 .41.34.75.75.75h4.5c.41 0 .75-.34.75-.75v-1.25h-1v1h-4v-5h2v-1h-2.25zm5.25 0v1c-2.05 0-3.7 1.54-3.94 3.53.21-.88.99-1.53 1.94-1.53h2v1l2-2-2-2z' /%3E %3C/svg%3E");
+   background-size: 100%;
+   background-repeat: no-repeat;
+}
+
 
 /* custom css for website*/
 /* overwrite all.css */