feat: Social Media Sharing for Verse Sharing

[JustinhSE]

Overview

We need to add social media sharing functionality to our scripture output feature. This will allow users to share scriptures on X (Twitter), Meta Threads, and Pinterest. We'll also reorganize our existing UI to accommodate these new sharing options.

Tasks

1. Implement Sharing Functionality

• Create a Typescript function to generate sharing links for X, Threads, and Instagram Stories
• Implement proper URL encoding of scripture text using encodeURIComponent()

2. UI Updates

• Add a new "..." button to the main UI for each bullet point
• Create a pop-up landscape bar that opens when clicking the "..." button. Use the icon buttons example for the UX #78
• Move the existing "Copy to Clipboard" button to this new bar
• Add a new "Share" icon button to the landscape bar
• Implement a sub-menu for the "Share" button with icons for X, Threads, and Instagram

Additional Considerations

• Consider adding sharing options for other relevant platforms (e.g., Facebook, LinkedIn, WhatsApp)

[muriloapparecido]

I'd like to get this

[JustinhSE]

Hey @muriloapparecido, I just wanted to let you know that I made a menu for you, so you do not need to make one. All your issue does contain is adding the share feature with a sub menu within that button for the diff social channels when someone hovers on the Share Button

[JustinhSE]

@muriloapparecido any update regarding this issue? Due to inactivity, you may be removed from this issue if no updates are reported in the next week.

[muriloapparecido]

I've successfully created the TypeScript function to generate shareable links using encodeURIComponent(). Currently, I'm working on integrating this functionality with the share button. I apologize for not communicating effectively but I'll have it done within the next couple of days.

[JustinhSE]

@muriloapparecido thanks so much for the update! Make sure to run npm run build before committing!

[muriloapparecido]

Hey Justin, I’ve completed all the main functionality for the issue a few days ago, but I’m running into an issue while trying to test and view the results before committing. When I run the frontend server and input a theme, it fails to fetch the data. I've checked the backend server (which is running simultaneously without an issue), I've added the necessary Firebase configurations, and I’ve set the backend URL (https://localhost:5000) in my .env.local file. Despite these steps, the verses associated with the theme are not displaying on the frontend, preventing me from testing the functionality of the share button. I’d appreciate any guidance on what I might be missing or additional troubleshooting steps. Thank you for your time, and Merry Christmas!

[JustinhSE]

@muriloapparecido sorry for the delay

[JustinhSE]

When you say run simultaneously, the backend does take a long time to load. When you install all requirements on the backend, and run python app.py, are you waiting? There should be some delay at least for the backend for it to build, create sentence vectors and be able to send an api request.

TLDR: after running the backend, wait 5 mins, then run the front end and test

[muriloapparecido]

I finally got it to work. The link to share a verse on twitter and pinterest is working, I just need to fix the links for sharing on Threads and Instagram Stories and to fix the styling for the button and I'll be done. I'll hopefully be done with it by tomorrow, if not then definitely by the end of the week.

[muriloapparecido]

Threads does not support direct content sharing via URL links like Twitter. As of now, there's no public API to share content directly to a user's Threads feed from external websites. Therefore, my current implementation redirects users to the Threads web version where they can manually share the content.

Instagram also has strict limitations on direct sharing from websites. Instagram primarily supports sharing through its mobile app, and the ability to post content directly to an Instagram feed requires complex API integrations like the Instagram Graph API. Additionally, Instagram's web sharing capabilities are very limited, and third-party sharing of text content is restricted. Currently, my implementation opens the web version of Instagram for users to manually post the scripture text.

These limitations are inherent to the platforms and cannot be bypassed without their official APIs or mobile-specific features.

Please let me know if you'd like me to adjust the implementation or if this approach is fine!

[muriloapparecido]

Hey Justin, sorry for the spam. I've finished implementing the share buttons, including for X, Pinterest, Threads and Instagram. I'm currently waiting on your thoughts about the functionality for Instagram and Threads, as those have some restrictions for direct sharing. I've included a screenshot of the final design below for your reference. Please let me know if anything needs tweaking before I submit it.

[JustinhSE]

Thanks @muriloapparecido. UX looks great!

####Few questions:

• when the more button is hit does all of that appear, or are the share options only shown when hovered over share
• is there a way to remove the word share on the icon and just keep the button have the share icon similar to the copy button?

To answer your IG/threads question:

Describe to me the restrictions you are finding for Threads? I am going to guess you are talking about format for IG…..If so you can remove sending to IG.

[JustinhSE]

Wait just saw you had other messages regarding threads give me a second

[JustinhSE]

Okay, yes your current implementations are a great alternative!!!!!

The only thing I would as is copy to clipboard as well so a user can just paste it when they make that post. And just add at the end “~ Made with Versify”

[muriloapparecido]

Yes, I've removed the word share from the button and the sub-menu appears when the share button is clicked, not when hovered on. Just to confirm, you'd like me to implement functionality that copies the verse to the clipboard when the user attempts to share on Instagram and Threads, right?

[JustinhSE]

Sorry for the late reply, but yes @muriloapparecido