Add social sharing functionality with buttons for Facebook, Twitter, and LinkedIn

Author: jeeshumittal7

package.json

@@ -27,6 +27,7 @@
     "mongoose": "^8.1.1",
     "multer": "^1.4.5-lts.1",
     "openai": "^4.71.1",
+    "social-share-js": "^1.0.4",
     "tinymce": "^7.5.0"
   }
 }

public/css/style.css

@@ -15,3 +15,15 @@ nav.navbar {
     height: 20px;
     margin-left: 5px;
 }
+
+.social-share {
+  margin-top: 20px;
+}
+
+.share-button {
+  margin-right: 10px;
+}
+
+.share-button i {
+  margin-right: 5px;
+}

public/js/socialShare.js

@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const shareButtons = document.querySelectorAll('.share-button');
+
+  shareButtons.forEach(button => {
+    button.addEventListener('click', function(e) {
+      e.preventDefault();
+      const network = this.dataset.network;
+      const url = encodeURIComponent(window.location.href);
+      const title = encodeURIComponent(document.title);
+
+      let shareUrl;
+      switch(network) {
+        case 'facebook':
+          shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
+          break;
+        case 'twitter':
+          shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${title}`;
+          break;
+        case 'linkedin':
+          shareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}`;
+          break;
+        default:
+          console.error('Unsupported network:', network);
+          return;
+      }
+
+      try {
+        window.open(shareUrl, '_blank', 'width=600,height=400');
+      } catch (error) {
+        console.error('Error opening share URL:', error);
+        console.error(error.stack);
+      }
+    });
+  });
+});

views/article.ejs

@@ -47,6 +47,21 @@
           <a href="/articles/tag/<%= tag %>" class="badge bg-secondary text-decoration-none"><%= tag %></a>
         <% }) %>
       </div>
+      <!-- Add this section for social sharing buttons -->
+      <% if (article.status === 'published') { %>
+        <div class="social-share mt-4">
+          <h5>Share this article:</h5>
+          <button class="btn btn-primary share-button" data-network="facebook">
+            <i class="fab fa-facebook-f"></i> Facebook
+          </button>
+          <button class="btn btn-info share-button" data-network="twitter">
+            <i class="fab fa-twitter"></i> Twitter
+          </button>
+          <button class="btn btn-secondary share-button" data-network="linkedin">
+            <i class="fab fa-linkedin-in"></i> LinkedIn
+          </button>
+        </div>
+      <% } %>
     </article>
     <section id="comments" class="mt-5">
       <h3>Comments</h3>
@@ -66,6 +81,8 @@
     </section>
   </main>
   <%- include('partials/_footer.ejs') %>
+  <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script>
   <script src="/js/article.js"></script>
+  <script src="/js/socialShare.js"></script>
 </body>
 </html>

views/partials/_head.ejs

@@ -2,6 +2,6 @@
   <meta charset="UTF-8">
   <title>PythaSpace</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <link rel="stylesheet" href="/css/style.css">
-</head>
-
+</head>