Social media preview cards are a great way to give your audience a quick taste of what you are sharing.
They become especially impactful if the image changes based on the content of the page you are linking to
Here’s a quick guide on how to do this using @bubble in 3 steps👇
Step 1 - Make a new page in Bubble that will represent the Preview card image
You should clone the page you are trying to create a preview image for and modify it to fit for social media cards, for twitter the size is 1600x1900
Put everything in the same group
Step 2 - Use a screenshot API to formulate a dynamic link
I used @apiflash_com but any library would work, the key is to make sure you select “.bubble-element .Group” as your selector so it will screenshot the group containing the preview
I stored this URL in an option set
Step 3 - Set the Facebook metadata to point to this URL
For the last step, go to your original page (the one you want to have a preview card) and modify the “Image for FB” section to point to the Screenshot API URL
But can this be implemented for Users, let me explain further:
My app is enabling users to create their portfolio, and they can share their portfolio links through social networks, now I want to present with these links the user’s name, profile picture, and portfolio title, is this possible?
please be noted that a user can share his portfolio or others, so in some cases, it is the current user’s username and pic, and in other times it is the current portfolio’s user’s username and pic
Thanks a lot for this tutorial.
I am stuck on Step 2. I filled out the Query Builder and I “launched in new tab” and it worked. But I’m not sure what you mean by “I stored this URL in an option set” and I get lost. Some additional questions.
What’s the result from pasting the screenshot url:append Slug and how does that trigger a facebook post?
Regarding the same, Can we, by any chance, make the cards to be directly shared as an image in the social media applications, like how we usually share images and not as a metadata.
Is there any way to achieve this? Thanks in advance!
