From eda51dd4dadf71f335ddcdeb15fe18ca047d27ee Mon Sep 17 00:00:00 2001 From: Venkataramana Devathoti <114353712+Venkat-Entropik@users.noreply.github.com> Date: Thu, 26 Mar 2026 21:06:31 +0530 Subject: [PATCH] =?UTF-8?q?feat:=20add=20Facebook=20share=20button=20to=20?= =?UTF-8?q?allow=20users=20to=20share=20workshop=20prog=E2=80=A6=20(#66610?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Venkat --- client/i18n/locales/english/translations.json | 2 ++ client/src/components/share/index.tsx | 1 + .../src/components/share/share-template.test.tsx | 8 ++++++++ client/src/components/share/share-template.tsx | 15 ++++++++++++++- client/src/components/share/types.ts | 1 + client/src/components/share/use-share.test.tsx | 4 ++++ client/src/components/share/use-share.tsx | 11 ++++++++++- 7 files changed, 40 insertions(+), 2 deletions(-) diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index 9f799179915..3c0d7ca801f 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -116,6 +116,7 @@ "share-on-x": "Share on X", "share-on-bluesky": "Share on BlueSky", "share-on-threads": "Share on Threads", + "share-on-facebook": "Share on Facebook", "play-scene": "Press Play", "download-latest-version": "Download the Latest Version", "more-ways-to-sign-in": "More ways to sign in", @@ -442,6 +443,7 @@ "edit-my-profile": "Edit My Profile", "add-bluesky": "Share this certification on BlueSky", "add-threads": "Share this certification on Threads", + "add-facebook": "Share this certification on Facebook", "experience": { "heading": "Experience", "share-experience": "Share your professional experience", diff --git a/client/src/components/share/index.tsx b/client/src/components/share/index.tsx index 1c2b2e25689..649ba90bf47 100644 --- a/client/src/components/share/index.tsx +++ b/client/src/components/share/index.tsx @@ -18,6 +18,7 @@ export const Share = ({ xRedirectURL={redirectURLs.xUrl} blueSkyRedirectURL={redirectURLs.blueSkyUrl} threadsRedirectURL={redirectURLs.threadsURL} + facebookRedirectURL={redirectURLs.facebookUrl} minified={minified} /> ); diff --git a/client/src/components/share/share-template.test.tsx b/client/src/components/share/share-template.test.tsx index 2760cb602d1..dbcf21bd81f 100644 --- a/client/src/components/share/share-template.test.tsx +++ b/client/src/components/share/share-template.test.tsx @@ -11,6 +11,7 @@ describe('Share Template Testing', () => { xRedirectURL={redirectURL} blueSkyRedirectURL={redirectURL} threadsRedirectURL={redirectURL} + facebookRedirectURL={redirectURL} /> ); test('Testing share template Click Redirect Event', () => { @@ -34,5 +35,12 @@ describe('Share Template Testing', () => { expect(threadsLink).toBeInTheDocument(); expect(threadsLink).toHaveAttribute('href', 'string'); + + const facebookLink = screen.queryByRole('link', { + name: 'buttons.share-on-facebook aria.opens-new-window' + }); + + expect(facebookLink).toBeInTheDocument(); + expect(facebookLink).toHaveAttribute('href', 'string'); }); }); diff --git a/client/src/components/share/share-template.tsx b/client/src/components/share/share-template.tsx index b5ae2881dec..99d9af4066b 100644 --- a/client/src/components/share/share-template.tsx +++ b/client/src/components/share/share-template.tsx @@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next'; import { faXTwitter, faBluesky, - faInstagram + faInstagram, + faFacebook } from '@fortawesome/free-brands-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ShareRedirectProps } from './types'; @@ -12,6 +13,7 @@ export const ShareTemplate: React.ComponentType = ({ xRedirectURL, blueSkyRedirectURL, threadsRedirectURL, + facebookRedirectURL, minified }) => { const { t } = useTranslation(); @@ -50,6 +52,17 @@ export const ShareTemplate: React.ComponentType = ({ {!minified && t('buttons.share-on-threads')} {t('aria.opens-new-window')} + + ); }; diff --git a/client/src/components/share/types.ts b/client/src/components/share/types.ts index da7192f120d..76730316336 100644 --- a/client/src/components/share/types.ts +++ b/client/src/components/share/types.ts @@ -8,5 +8,6 @@ export interface ShareRedirectProps { xRedirectURL: string; blueSkyRedirectURL: string; threadsRedirectURL: string; + facebookRedirectURL: string; minified?: boolean; } diff --git a/client/src/components/share/use-share.test.tsx b/client/src/components/share/use-share.test.tsx index d160342c7e1..65e4760ef02 100644 --- a/client/src/components/share/use-share.test.tsx +++ b/client/src/components/share/use-share.test.tsx @@ -43,5 +43,9 @@ describe('useShare', () => { expect(shareResult.current.threadsURL).toBe( `https://${threadsData.domain}/${threadsData.action}?original_referer=${threadsData.developerDomainURL}&text=${tweetMessage}${nextLine}&url=${redirectFreeCodeCampLearnURL}` ); + + expect(shareResult.current.facebookUrl).toBe( + `https://www.facebook.com/sharer/sharer.php?u=${redirectFreeCodeCampLearnURL}&hashtag=${hastag}freecodecamp` + ); }); }); diff --git a/client/src/components/share/use-share.tsx b/client/src/components/share/use-share.tsx index c5d4f81e69f..919e9895028 100644 --- a/client/src/components/share/use-share.tsx +++ b/client/src/components/share/use-share.tsx @@ -24,10 +24,16 @@ export const threadsData = { developerDomainURL: 'https://developers.facebook.com' }; +export const facebookData = { + action: 'sharer/sharer.php', + domain: 'www.facebook.com' +}; + interface ShareUrls { xUrl: string; blueSkyUrl: string; threadsURL: string; + facebookUrl: string; } export const useShare = ({ superBlock, block }: ShareProps): ShareUrls => { @@ -43,9 +49,12 @@ export const useShare = ({ superBlock, block }: ShareProps): ShareUrls => { const threadRedirectURL = `https://${threadsData.domain}/${threadsData.action}?original_referer=${threadsData.developerDomainURL}&text=${tweetMessage}${nextLine}&url=${redirectFreeCodeCampLearnURL}`; + const facebookRedirectURL = `https://${facebookData.domain}/${facebookData.action}?u=${redirectFreeCodeCampLearnURL}&hashtag=${hastag}freecodecamp`; + return { xUrl: xRedirectURL, blueSkyUrl: blueSkyRedirectURL, - threadsURL: threadRedirectURL + threadsURL: threadRedirectURL, + facebookUrl: facebookRedirectURL }; };