Merge pull request #49 from rtCamp/feature/udpating-facebook-demo

Udpating facebook demo
rtCamp · Feb 15, 2024 · e047bcc · e047bcc
2 parents 8a22efb + 5b28e3a
commit e047bcc
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 18 deletions.
diff --git a/.env.example b/.env.example
@@ -7,3 +7,4 @@ domain-c=localhost # domain-ccc.com
 domain-c-background=bg-red-100
 port=8080 # port to listen on
 google-client-id= # google client id
+facebook-app-id= # facebook app id
diff --git a/app.js b/app.js
@@ -34,6 +34,7 @@ app.use((req, res, next) => {
 	res.locals.domainB = process.env['domain-b'];
 	res.locals.domainC = process.env['domain-c'];
 	res.locals.googleClientId = process.env['google-client-id'];
+	res.locals.facebookAppId = process.env['facebook-app-id'];
 	res.locals.port = process.env.port;
 	res.locals.isPortPresent = req.get('host').includes(':');
 	res.locals.currentDomain = req.get( 'host' );

diff --git a/src/common/index.ejs b/src/common/index.ejs
@@ -9,7 +9,7 @@
 <% } %>
 
 <div class="container-lg mx-auto py-8">
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 mt-8 w-[60rem] mx-auto max-w-full">
+    <div class="grid grid-cols-1  md:grid-cols-4 gap-6 mb-8 mt-8 w-full md:w-[60rem] mx-auto max-w-80 md:max-w-full">
         <%= renderCard('Analytics Tracking', '🔎', '/analytics') %>
         <%= renderCard('Embedded Content', '📽️', '/embedded-video') %>
         <%= renderCard('E-Commerce', '🛒', '/ecommerce') %>

diff --git a/src/scenarios/social-media/index.ejs b/src/scenarios/social-media/index.ejs
@@ -2,24 +2,29 @@
 
     <%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
         <div id="fb-root"></div>
-        <script
-            async
-            defer
-            crossorigin="anonymous"
-            src="https://connect.facebook.net/en_EN/sdk.js#xfbml=1&version=v19.0&appId=222635294526394"
-            nonce="T4XgOzUp"
-        ></script>
-        <div id="status" class="text-center font-bold text-lg my-4"></div>
-        <div class="flex justify-center">
-            <div
-                class="fb-like"
-                data-href="<%= currentDomain %>"
+        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v19.0&appId=<%= facebookAppId %>" nonce="GKOY1kp9"></script>
+
+        <div id="status" class="text-center font-bold text-lg mb-4"></div>
+        <div class="mb-6">
+            <h2 class="block text-xl font-bold text-center mb-4">Like Button</h2>
+            <!-- Your like button code -->
+            <div class="fb-like" 
+                data-href="<%= currentDomain %>" 
                 data-width=""
-                data-layout=""
-                data-action=""
-                data-size=""
-                data-share="true"
-            ></div>
+                data-layout="button_count" 
+                data-action="like" 
+                data-size="large"  
+                data-share="false">
+            </div>
+        </div>
+
+        <div class="mb-6"> 
+            <h2 class="block text-xl font-bold text-center mb-4">Share Button</h2>
+            <div class="fb-share-button" data-href="<%= currentDomain %>" data-layout="button" data-size="large"></div>
+        </div>
+        <div class="mb-6">
+            <h2 class="text-xl font-bold text-center mb-4">Comments</h2>
+            <div class="fb-comments" data-href="<%= currentDomain %>" data-width="" data-numposts="5"></div>
         </div>
     <%- include(commonPath + '/internal-page/footer.ejs') %>
 <%- include(commonPath + '/footer.ejs') %>