Merge pull request #1369 from prezly/fix/dev-21884-social-sharing-message

e1himself · web-flow · commit 8c82ad8680bd · 2025-10-29T14:47:59.000+01:00
[DEV-21884] Fix - Story custom social sharing text
diff --git a/src/components/SocialShare/SocialShare.tsx b/src/components/SocialShare/SocialShare.tsx
@@ -24,8 +24,7 @@ import { analytics } from '@/utils';
 import styles from './SocialShare.module.scss';
 
 interface Props {
-    summary?: string;
-    title: string;
+    text: string;
     url: string | null;
     className?: string;
     socialNetworks: ThemeSettings['sharing_actions'];
@@ -36,13 +35,12 @@ interface Props {
 }
 
 export function SocialShare({
+    text,
+    url,
     className,
     socialNetworks,
-    summary,
     thumbnailUrl,
-    title,
     trackingContext,
-    url,
     withLabels,
     uuid,
 }: Props) {
@@ -85,7 +83,7 @@ export function SocialShare({
                     className={styles.socialLink}
                     href={createUrlWithQuery('https://www.linkedin.com/sharing/share-offsite', {
                         url,
-                        text: [title, summary, url].filter(Boolean).join('\n\n'),
+                        text,
                     })}
                     onClick={() => trackSharingEvent(SocialNetwork.LINKEDIN)}
                     rel="noopener noreferrer"
@@ -116,7 +114,7 @@ export function SocialShare({
                     className={styles.socialLink}
                     href={createUrlWithQuery('https://twitter.com/intent/tweet', {
                         url,
-                        text: title,
+                        text,
                     })}
                     onClick={() => trackSharingEvent(SocialNetwork.TWITTER)}
                     rel="noopener noreferrer"
@@ -131,7 +129,7 @@ export function SocialShare({
                     aria-label={generateAriaLabel(SocialNetwork.MASTODON)}
                     className={styles.socialLink}
                     href={createUrlWithQuery('https://mastodon.social/share', {
-                        text: [title, summary, url].filter(Boolean).join('\n\n'),
+                        text: `${text}\n\n${url}`,
                     })}
                     onClick={() => trackSharingEvent(SocialNetwork.MASTODON)}
                     rel="noopener noreferrer"
@@ -148,7 +146,7 @@ export function SocialShare({
                     href={createUrlWithQuery('https://pinterest.com/pin/create/button/', {
                         url,
                         media: thumbnailUrl,
-                        description: [title, summary].filter(Boolean).join(' '),
+                        description: text,
                     })}
                     onClick={() => trackSharingEvent(SocialNetwork.PINTEREST)}
                     rel="noopener noreferrer"
@@ -162,7 +160,7 @@ export function SocialShare({
                 <a
                     aria-label={generateAriaLabel(SocialNetwork.REDDIT)}
                     className={styles.socialLink}
-                    href={createUrlWithQuery('https://www.reddit.com/submit', { title, url })}
+                    href={createUrlWithQuery('https://www.reddit.com/submit', { title: text, url })}
                     onClick={() => trackSharingEvent(SocialNetwork.REDDIT)}
                     rel="noopener noreferrer"
                     target="_blank"
@@ -182,7 +180,7 @@ export function SocialShare({
                     aria-label={generateAriaLabel(SocialNetwork.WHATSAPP)}
                     className={styles.socialLink}
                     href={createUrlWithQuery('https://api.whatsapp.com/send', {
-                        text: `${title} ${url}`,
+                        text: `${text} ${url}`,
                     })}
                     onClick={() => trackSharingEvent(SocialNetwork.WHATSAPP)}
                     rel="noopener noreferrer"
@@ -197,7 +195,7 @@ export function SocialShare({
                     aria-label={generateAriaLabel(SocialNetwork.THREADS)}
                     className={styles.socialLink}
                     href={createUrlWithQuery('https://www.threads.net/intent/post', {
-                        text: `${title} ${url}`,
+                        text: `${text} ${url}`,
                     })}
                     onClick={() => trackSharingEvent(SocialNetwork.THREADS)}
                     rel="noopener noreferrer"
@@ -213,7 +211,7 @@ export function SocialShare({
                     className={styles.socialLink}
                     href={createUrlWithQuery('https://t.me/share/url', {
                         url,
-                        text: title,
+                        text,
                     })}
                     onClick={() => trackSharingEvent(SocialNetwork.TELEGRAM)}
                     rel="noopener noreferrer"
@@ -228,7 +226,7 @@ export function SocialShare({
                     aria-label={generateAriaLabel(SocialNetwork.BLUESKY)}
                     className={styles.socialLink}
                     href={createUrlWithQuery('https://bsky.app/intent/compose', {
-                        text: `${title} ${url}`,
+                        text: `${text} ${url}`,
                     })}
                     onClick={() => trackSharingEvent(SocialNetwork.BLUESKY)}
                     rel="noopener noreferrer"
diff --git a/src/modules/Gallery/Gallery.tsx b/src/modules/Gallery/Gallery.tsx
@@ -34,10 +34,9 @@ export function Gallery({ localeCode, gallery, href, socialNetworks }: Props) {
                     socialNetworks.length > 0 &&
                     href && (
                         <SocialShare
-                            summary={description ?? undefined}
                             socialNetworks={socialNetworks}
                             url={href}
-                            title={name}
+                            text={[name, description].filter(Boolean).join(' - ')}
                             className={styles.shareLinks}
                             uuid={uuid}
                             trackingContext="Gallery"
diff --git a/src/modules/Story/Share/Share.tsx b/src/modules/Story/Share/Share.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ACTIONS, DOWNLOAD } from '@prezly/analytics-nextjs';
-import type { Story } from '@prezly/sdk';
+import type { ExtendedStory, Story } from '@prezly/sdk';
 import { translations, useIntl } from '@prezly/theme-kit-nextjs/index';
 import classNames from 'classnames';
 import { useState } from 'react';
@@ -24,11 +24,11 @@ interface Props {
     actions: StoryActions;
     socialNetworks: SocialNetwork[];
     thumbnailUrl?: string;
-    title: string;
+    text: ExtendedStory['social_text'];
+    title: Story['title'];
     url: string | null;
     uploadcareAssetsGroupUuid: Story['uploadcare_assets_group_uuid'];
     slug: Story['slug'];
-    summary: Story['summary'];
     uuid: Story['uuid'];
 }
 
@@ -37,7 +37,7 @@ export function Share({
     uploadcareAssetsGroupUuid,
     socialNetworks,
     slug,
-    summary,
+    text,
     title,
     thumbnailUrl,
     url,
@@ -105,9 +105,8 @@ export function Share({
                     <SocialShare
                         socialNetworks={socialNetworks}
                         url={url}
-                        summary={summary}
+                        text={text}
                         thumbnailUrl={thumbnailUrl}
-                        title={title}
                         trackingContext="Story Page Footer"
                         uuid={uuid}
                         withLabels={socialShareButtonsCount <= 2}
diff --git a/src/modules/Story/Story.tsx b/src/modules/Story/Story.tsx
@@ -48,12 +48,12 @@ export async function Story({
         thumbnail_url: thumbnailUrl,
         title,
         slug,
-        summary,
         uuid,
         uploadcare_assets_group_uuid,
     } = story;
     const nodes = JSON.parse(story.content);
     const [headerImageDocument, mainDocument] = pullHeaderImageNode(nodes, withHeaderImage);
+    const sharingText = story.social_text || story.title;
     const sharingUrl = links.short || links.newsroom_view;
     const sharingSocialNetworks = getRenderableSocialSharingNetworks(
         sharingOptions.sharing_actions,
@@ -98,8 +98,7 @@ export async function Story({
                         <SocialShare
                             socialNetworks={sharingSocialNetworks}
                             url={sharingUrl}
-                            title={title}
-                            summary={summary}
+                            text={sharingText}
                             uuid={uuid}
                             thumbnailUrl={thumbnailUrl}
                             trackingContext="Story Page Header"
@@ -108,19 +107,19 @@ export async function Story({
                 </div>
                 <ContentRenderer story={story} nodes={mainDocument} />
             </article>
-            <Share
-                actions={actions}
-                thumbnailUrl={thumbnailUrl}
-                socialNetworks={
-                    sharingOptions.sharing_placement.includes('bottom') ? sharingSocialNetworks : []
-                }
-                summary={summary}
-                slug={slug}
-                title={title}
-                uploadcareAssetsGroupUuid={uploadcare_assets_group_uuid}
-                url={sharingUrl}
-                uuid={uuid}
-            />
+            {sharingOptions.sharing_placement.includes('bottom') && (
+                <Share
+                    actions={actions}
+                    thumbnailUrl={thumbnailUrl}
+                    socialNetworks={sharingSocialNetworks}
+                    slug={slug}
+                    title={title}
+                    text={sharingText}
+                    uploadcareAssetsGroupUuid={uploadcare_assets_group_uuid}
+                    url={sharingUrl}
+                    uuid={uuid}
+                />
+            )}
             {relatedStories.length > 0 && (
                 <RelatedStories locale={locale} stories={relatedStories} />
             )}
