Update ShareButtons component to include Facebook share count and modify Twitter icon; adjust Content Security Policy for Facebook Graph API

Author: geekskai

app/tag-data.json

@@ -1 +1 @@
-{"audio":1,"video":2,"website-review":1,"online-resources":2,"user-engagement":1,"seo":4,"homework":1,"books":1,"crypto-engine-pro-blog":1,"cryptocurrency-insights":1,"crypto-trading":1,"nextjs":2,"tailwind-css":1,"blog-review":3,"tech-blog":1,"developer-resources":1,"video-editing":1,"quotes":2,"wisdom":2,"inspiration":2,"motivation":2,"life-lessons":2,"travel":1,"hidden-gems":1,"lifestyle":1,"odrive":1,"error-fix":1,"json":1,"cloud-storage":1,"omg-blog":1,"content-analysis":1,"me-engineering":1,"engineering-career":1,"mechanical-engineering":1,"electrical-engineering":1,"primevue":2,"css":3,"vue":2,"frontend":3,"web-development":5,"ui-components":1,"first-child":1,"tailwind":1,"programming":8,"cloudflare":1,"blog":1,"pages":1,"electronics":1,"smt":1,"manufacturing":1,"technology":2,"ai":1,"businesses":1,"eco-friendly":1,"sustainability":1,"marketing":1,"business":1,"content-strategy":1,"etsiosapp":1,"productivity":1,"collaboration":1,"task-management":1,"mobility":1,"electric-scooters":1,"australia":1,"javascript":9,"objects":1,"property-checking":1,"string-manipulation":2,"regex":1,"cms-systems":1,"content-management":1,"coding-tips":1,"character":1,"double-quote":1,"programming-techniques":2,"infinity":1,"number-handling":1,"dynamodb":1,"csv":1,"data-conversion":1,"aws":1,"date":1,"milliseconds":1,"async":1,"promises":1,"settimeout":1,"react":1,"debugging":2,"performance":1,"roblox":1,"jujutsu-shenanigans":1,"game-codes":1,"gaming-tips":1,"anime-games":1,"typescript":1,"refactoring":1,"jsdoc":1,"code-maintenance":1,"override":1,"windows":4,"troubleshooting":1,"startup":1,"uuid-error":1,"icloud":1,"data-management":1,"remote-desktop":2,"windows-11":2}
+{"audio":1,"video":2,"website-review":1,"online-resources":2,"user-engagement":1,"seo":4,"homework":1,"books":1,"crypto-engine-pro-blog":1,"cryptocurrency-insights":1,"crypto-trading":1,"nextjs":2,"tailwind-css":1,"blog-review":3,"tech-blog":1,"developer-resources":1,"video-editing":1,"quotes":2,"wisdom":2,"inspiration":2,"motivation":2,"life-lessons":2,"travel":1,"hidden-gems":1,"lifestyle":1,"odrive":1,"error-fix":1,"json":1,"cloud-storage":1,"omg-blog":1,"content-analysis":1,"me-engineering":1,"engineering-career":1,"mechanical-engineering":1,"electrical-engineering":1,"ai":1,"businesses":1,"eco-friendly":1,"sustainability":1,"marketing":1,"business":1,"content-strategy":1,"electronics":1,"smt":1,"manufacturing":1,"technology":2,"cloudflare":1,"blog":1,"pages":1,"web-development":5,"primevue":2,"css":3,"vue":2,"frontend":3,"ui-components":1,"first-child":1,"tailwind":1,"programming":8,"etsiosapp":1,"productivity":1,"collaboration":1,"task-management":1,"javascript":9,"objects":1,"property-checking":1,"string-manipulation":2,"regex":1,"cms-systems":1,"content-management":1,"coding-tips":1,"character":1,"double-quote":1,"programming-techniques":2,"infinity":1,"number-handling":1,"dynamodb":1,"csv":1,"data-conversion":1,"aws":1,"date":1,"milliseconds":1,"async":1,"promises":1,"settimeout":1,"react":1,"debugging":2,"performance":1,"mobility":1,"electric-scooters":1,"australia":1,"roblox":1,"jujutsu-shenanigans":1,"game-codes":1,"gaming-tips":1,"anime-games":1,"override":1,"typescript":1,"refactoring":1,"jsdoc":1,"code-maintenance":1,"windows":4,"troubleshooting":1,"startup":1,"uuid-error":1,"icloud":1,"data-management":1,"remote-desktop":2,"windows-11":2}

components/ShareButtons.tsx

@@ -4,6 +4,7 @@ import {
   EmailShareButton,
   FacebookIcon,
   FacebookShareButton,
+  FacebookShareCount,
   LinkedinIcon,
   LinkedinShareButton,
   RedditIcon,
@@ -12,6 +13,7 @@ import {
   TelegramShareButton,
   TwitterIcon,
   TwitterShareButton,
+  XIcon,
 } from 'react-share'
 import siteMetadata from '@/data/siteMetadata'
 
@@ -20,9 +22,9 @@ const shareUrl = typeof window !== 'undefined' ? window.location?.href : siteMet
 const title = typeof document !== 'undefined' ? document.title : siteMetadata.title
 
 const ReactShare = [
-  <FacebookShareButton key="facebook" url={shareUrl} title={title}>
-    <FacebookIcon size={32} round />
-  </FacebookShareButton>,
+  <FacebookShareCount key="facebook" url={shareUrl} title={title}>
+    {(count) => count}
+  </FacebookShareCount>,
   <LinkedinShareButton
     key="linkedin"
     url={shareUrl}
@@ -48,7 +50,7 @@ const ReactShare = [
     <EmailIcon size={32} round />
   </EmailShareButton>,
   <TwitterShareButton key="twitter" url={shareUrl} title={title}>
-    <TwitterIcon size={32} round />
+    <XIcon size={32} round />
   </TwitterShareButton>,
 ]
 

next.config.js

@@ -7,7 +7,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 // You might need to insert additional domains in script-src if you are using external services
 const ContentSecurityPolicy = `
   default-src 'self';
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app analytics.umami.is https://www.googletagmanager.com https://googleads.g.doubleclick.net https://doubleclick.net;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app analytics.umami.is https://www.googletagmanager.com https://graph.facebook.com https://googleads.g.doubleclick.net https://doubleclick.net;
   style-src 'self' 'unsafe-inline';
   img-src * blob: data:;
   media-src *.s3.amazonaws.com;