templates/front/social-media/index.html.twig line 1

Open in your IDE?
  1. <style>
  2.     #share-buttons a {
  3.         font-size: 20px;
  4.         margin-right: 15px;
  5.         color: #fff;
  6.         text-align: center;
  7.         border-radius: 50%;
  8.         box-shadow: 4px 6px 20px rgb(0 0 0 / 8%);
  9.         padding: 6px 10px;
  10.     }
  12.     .facebook-color {
  13.         background: #3b5998;
  14.     }
  16.     .twitter-color {
  17.         background: #55acee;
  18.     }
  20.     .linkedin-color {
  21.         background: #0077b5;
  22.     }
  24.     .reddit-color {
  25.         background: #cb2027;
  26.     }
  28.     .whatsapp-color {
  29.         background: #25D366;
  30.     }
  32.     .telegram-color {
  33.         background: #229ED9;
  34.     }
  36. </style>
  37. <div id="share-buttons">
  38.     <!-- facebook -->
  39.     <a class="facebook facebook-color"> <i class="fab fa-facebook"></i> </a>
  40.     <!-- twitter -->
  41.     <a class="twitter twitter-color" target="blank"><i class="fab fa-twitter"></i></a>
  42.     <!-- linkedin -->
  43.     <a class="linkedin linkedin-color" target="blank"><i class="fab fa-linkedin"></i></a>
  44.     <!-- reddit -->
  45.     {#     <a class="reddit" target="blank"><i class="fab fa-reddit"></i></a> #}
  46.     <!-- whatsapp-->
  47.     <a class="whatsapp whatsapp-color" target="blank"><i class="fab fa-whatsapp"></i></a>
  48.     <!-- telegram-->
  49.     {#      <a class="telegram" target="blank"><i class="fab fa-telegram"></i></a> #}
  50. </div>
  51. <script>
  52.     const link = encodeURI(window.location.href);
  53.     const msg = encodeURIComponent('Hey, I found this article');
  54.     const title = encodeURIComponent('Article or Post Title Here');
  56.     $(document).ready(function () {
  57.         $('.facebook').click(function (e) {
  58.             e.preventDefault();
  59.             window.open(`https://www.facebook.com/share.php?u=${link}`, 'fbShareWindow', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
  60.             return false;
  61.         });
  62.     });
  65.     const twitter = document.querySelector('.twitter');
  66.     twitter.href = `http://twitter.com/share?&url=${link}&text=${msg}`; /* &hashtags=javascript,programming */
  68.     const linkedIn = document.querySelector('.linkedin');
  69.     linkedIn.href = `https://www.linkedin.com/sharing/share-offsite/?url=${link}`;
  70.     /* const fb = document.querySelector('.facebook');
  71.         fb.href = `https://www.facebook.com/share.php?u=${link}`;*/
  72.     /* const reddit = document.querySelector('.reddit');
  73.     reddit.href = `http://www.reddit.com/submit?url=${link}&title=${title}`;*/
  75.     const whatsapp = document.querySelector('.whatsapp');
  76.     whatsapp.href = `https://api.whatsapp.com/send?text=${msg}: ${link}`;
  78.     /* const telegram = document.querySelector('.telegram');
  79.      telegram.href = `https://telegram.me/share/url?url=${link}&text=${msg}`;*/
  80. </script>