Embedding a Tweet

I’d like to embed a twitter card on a page with Bubble. I’ve found this API from Twitter that does just what I want but I don’t see an existing plug-in that leverages it.

https://dev.twitter.com/rest/reference/get/statuses/oembed

Just to clarify, are you looking to embed a specific, static, tweet/user card or something dynamic?

If static, each tweet includes a simplified embed link, accessible from the dropdown menu on the tweet. See: https://dev.twitter.com/web/embedded-tweets. You can pull that and then put it into an HTML block on your page.

I’m looking for when someone provides a URL to an individual twitter post, I display it as a card dynamically. It appears Embed.ly offers what I need so I’m pursuing this for now in the hopes I won’t have to interpret each link and display dynamically like this. Thanks.

@bkelly did you ever figure anything out with this? I’m trying to figure out how to add a twitter feed in Bubble…so if I associate my twitter account with my user I can display all my tweets on my profile in Bubble. Anything you have run across could be helpful!

This is all you need:

https://publish.twitter.com/

4 Likes

Thanks @keith!!!

1 Like

@keith - do you have a running list of these types of resources? I feel like you’ve had some great finds

That’s very nice of you to say, @dan1, but I don’t have a running list of this stuff. Things like what I just posted here are hardly even answers… This is just “How the Web Works 101” if you know what I mean.

It’s like, anytime you see a web thing over and over and over (like FB or Twitter share buttons), you can be sure that it’s the vendor that provides that. (And FB and Twitter have had these features for many years now.)

The only “hard” part is that one never knows where they’ve moved the handy interface for generating embed codes. That’s the part that’s constantly changing and so when you need to do this sort of thing, it always starts here for me:

Or like this:

In both cases, the top non-sponsored results are Twitter’s own documentation and a link to publish.twitter.com (which actually is new since the last time I had to Google this, and is a big improvement over a wordy help article! Compare that handy service to FB’s equivalent: https://developers.facebook.com/docs/plugins).

Anyway, I’m not sure there’s an easy way to learn all of this stuff except by experience and by knowing the “one simple trick” of Googling first and asking questions later! :laughing:

As someone who’s been involved with making (or supervising the making of) websites of varying levels of quality and sophistication for a loooong time, all of this feels (to me) like “everybody knows that.”

But of course not everyone knows these things. But luckily our future overlord, the Google machine, does.

With the above being said, maybe I’ll jot down a Medium article soon about the basics of how the web works and how to learn it. A lot of the questions here are not about Bubble at all, but are about basic web design or basic web dev issues that have nothing to do with one’s authoring platform (be it Dreamweaver or Muse or Webflow or Notepad or whatnot) and little to do with the building of web-based applications.

I tried to obtain the HTML for an embedded tweet on this site (Twitter Publish) and the following code appeared:

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sunsets don't get much better than this one over <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash&amp;ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&amp;ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">May 5, 2014</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

At first glance, it seems that you cannot dynamically create the HTML for an embedded tweet, but I was able to display a similar embedded tweet by modifying it as follows:

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/Interior/status/463440424141459456"></a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

The article is in Japanese, but for reference, please see the link below with Google translate.
https://nocodejp.hatenablog.com/entry/2020/02/05/184603