How to create Tweet Embeds in Bubble
How to Bubble Tutorial
Hello Fellow Bubbler,
In this issue, we’ll cover how to create tweet embeds in Bubble. This is a feature that I built into my latest application, hirelist.co, and it’s actually quite simple to implement.
Getting Started.
You can create Tweet embeds that are linked to data in your database, or that represent static info on your page.
To get started you’ll need to find a tweet you would like to embed. Click on the three dots at the top right corner of the tweet, then select ‘Embed Tweet’. This will open a new Twitter page where you can customize the tweet you selected.
On the new page, scroll down to the customization section and click on ‘copy code’, then head to your Bubble editor. In the design tab, add an HTML element from your visual elements section onto the page, then paste your code into the property editor. It should look like this:
If you preview your page now, you should see that the tweet that you copied is embedded on your page.
It’s that simple!
Linking to Data
Let’s say that you want to link a specific tweet to a specific thing in your database. To do so, you’ll need to create a data field in the data type you want your tweet to be linked to. For example, in Hirelist, I wanted the tweets to be linked to my ‘Companies’ data type, so any time a user clicks on a job listing, they will see the tweet that states that the company is hiring.
To create a feature like this, create a new field in your data type and label it accordingly. If you want multiple tweets linked to a thing in your database, you would check the box for ‘multiple entries’. This is useful if you want to display a series of related tweets in a repeating group.
Now instead of pasting the code directly into your HTML element, you can link your HTML element to the data type that has the field for the Tweet, using dynamic data. (Note: If your data is already loaded on the page, you can reference the tweet via the data on the page rather than via a search)
Finally, in your database, save the code that you copied from Twitter as a new data thing. The HTML element will reference the code from the database.
That’s it! You’ve now learned how to embed tweets in your Bubble app 🎉.
If you found this article helpful, share it on Twitter (and tag me @shikuwangombe if you do!) or your social platform of choice. And make sure you’re subscribed to my newsletter :).
Happy Bubbling!