How to do dynamic social media preview cards

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👇Image

Step 1 - Make a new page in Bubble that will represent the Preview card image :framed_picture:

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 groupImage

Step 2 - Use a screenshot API to formulate a dynamic link :camera_flash:

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 setImage

Step 3 - Set the Facebook metadata to point to this URL :link:

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

And thats it - Dynamic cards!

Hope this was useful to y’allImage

7 Likes

Hi @ben16 ,

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.

  1. What’s the result from pasting the screenshot url:append Slug and how does that trigger a facebook post?
  2. How did you end up posting to twitter?

Hi,

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!

In my section, I could not see the Current page. Why is that?