CODEWITHSUNDEEP
twitterinstagram-apioembed
Davabo
Davabo

Reputation: 115

How to intergrate a single tweet into your website

Right now im building a simple html/css site for a friend. The homepage is a series of grid block divs that hold some content.

There are currently 3 block divs we have marked for social media posts. So for example, he wants his latest tweet to appear in one of those divs. His latest instagram post to appear in another and facebook in the last.

We can ignore facebook for the time being as I'm only focusing on the twitter/instagram for now.

I'm struggling with where to begin for this project. In the past I have only embedded twitter timelines, Instagram posts using widgets etc....nothing too complicated.

But for this project I will need separate stripped down posts, ie: just the plain text from his tweet inside the twitter div. The image from his Instagram post as the background image on the Instagram block etc...

I've spent the last few hours trying to get my head around oEmbed, and I can safely say I'm failing miserably.

I'm actually more confused now then before I started, so if any kind soul could give me a dummies guide to how I can approach this, that would be absolutely amazing.

Thank you!

Upvotes: 2

Views: 930

Answers (1)

peregrine42
peregrine42

Reputation: 341

You can acheive a single embedded tweet using an embedded timeline.

To get just one tweet, use the data-tweet-limit attribute on the embed tag, as detailed here: https://dev.twitter.com/web/embedded-timelines/parameters

For example:

<a class="twitter-timeline" href="https://twitter.com/TwitterDev" data-widget-id="some_id" data-tweet-limit="1"></a>

According to twitter's documentation, that is the recommended way of getting tweets onto websites. From your description of the use case, I'd highly recommend just using Twitter's official widget.

If you really want to use Twitter's REST API and generate your page server side, I'd check out this stack overflow question as a starting point: Setting up Twitter API, getting the last few Tweets

Hope that helps!

Upvotes: 2

Related Questions