IGAPP-100: Add opportunity to share a integreat page on social media

[jira-to-github-migrator-test[bot]]

Steffen Kleinle - 25.9.2020, 17:58:10

As a user I want to be able to share a page on social media directly from the web app. It should automatically add all the required information to the social media draft (e.g. set the sharing text as post content).

Acceptance criteria:

• A Share button is added to the toolbar on both desktop and mobile
• On press on the button a popup is opened with the buttons of the different social media sites (Facebook, WhatsApp, Twitter, E-Mail) and a close button closing the popup
• On press on a social media site, the social media site is opened with pre-filled information of the shared site

Design (use v2.1): https://www.figma.com/file/cA4F2MwHs2LNGviOWUjfE9/Integreat-Tickets-Jira?node-id=1081%3A4233&t=oNWl5KFAfG2ja7ES-1 A design for the sharing popup on mobile is missing, but it should look the same as for desktop.

Feedback and copy url will be done in separate tickets.

Old description: As a user I want to be able to directly share interesting pages and content of the integreat web app on social media. See the Süddeutsche for examples: https://www.sueddeutsche.de/sport/paralympics-pandemie-mitglieder-1.5391082

1. Buttons für: Facebook, Twitter, WhatsApp, E-Mail, PD
2. Welcher Text wird angezeigt, wenn man mit der Maus über die Icons fährt? • Facebook: auf Facebook teilen • WhatsApp: in WhatsApp teilen • Twitter: auf Twitter teilen • E-Mail: via E-Mail empfehlen • PDF: als PDF anzeigen
3. Was soll beim Teilen passieren? Medium: • Facebook: Beitrag teilen, Sharing-Text als Beitragstext • WhatsApp: Auswahl öffnet sich, an wen es geschickt werden soll, Sharing-Text als Beitragstext • Twitter: Beitrag teilen, Sharing-Text als Beitragstext • Mail: neue E-Mail zum Verfassen öffnet sich, Sharing-Text als E-Mail-Text, Betreff: „Integreat Leseempfehlung: Titel des Beitrags“ (Betreff-Text in die jeweilig genutzte Sprache in der Web App übersetzen) • PDF: Format öffnet sich Ansicht: Anzeigebild (vorhandenes Bild aus der Web App (wenn kein Bild vorhanden ist, dann vom Promo Team ausgewähltes Bild benutzen), Titel, Anfang vom Text (Teaser) Sprache: Anzeige in der jeweilig genutzten Sprache Sharing-Text: „Gerade in der #IntegreatApp entdeckt. Was hältst du davon?“ • Auch in die jeweilige Sprache übersetzen, die für den Integreat Inhalt genutzt wurde

If you have any questions, message <_{steffen.kleinle> or <}jacqueline.pech> .

Picture to use if no picture is available: see down below (Anhänge)

Environment: - Linked issues:

• Cloners: IGAPP-1315
• Cloners: IGAPP-930
• Issue split: IGAPP-1220
• Relates: IGAPP-1247
• Relates: IGAPP-32
• Relates: IGAPP-1251

[jira-to-github-migrator-test[bot]]

Andreas Fischer - 17.5.2023, 14:22:34

please update acceptance criteria when design review is finalized