On integrations.directory, there is a page for each integration. For click through rate (CTR) purposes, a well-optimized and customized preview (open graph image) of your URL can help improve the amount of people who will click on your post from social media.
Since I have over 600 pages for integrations, I’ll use integrations.directory to search for an integration that will enable me to create the images dynamically and embed those images in Bubble (the tool we use for integrations directory!)
1. Finding an integration to generate our open graph images
With our goals in mind, let’s head over to integrations directory and browse the directory to look for a solution.
Let’s try a search for “open graph” to see what comes up.
Looks like we have two options, let’s go to the solution that enables us to create branded social images
It’s free and we can connect via API. The next part of the tutorial will walk through using Tailgraph and how to add our images to Bubble but we can use any extendable no-code platform with this particular integration.
2. Reviewing TailGraph’s documentation and setting up our query
Looks like we have a few parameters we can add from TailGraph’s docs
We can also build our query through TailGraph’s visual editor. In this tutorial we tried the visual editor
Once we build our query we can copy the string it outputs
3. Adding our dynamic image to Bubble
Then paste it into the SEO image section of our page in Bubble
And replace any text inputs with dynamic text based on information from our Bubble page
In my case here’s what the generated open graph image looks like for the generated photos integration
And that’s a wrap! This post walked through creating open graph images dynamically and automatically. If you want to find more ways to extend your applications, be sure to subscribe to the integrations directory newsletter where we share new integrations each week.