Embed Latest Tweet Only on Website

GrantG182 · 2012-12-10T20:23:16.000Z

Hi

I only want to embed the latest tweet, not the last 3+ which is what the new Embedded Timeline appears to do. I also cannot have it displaying at a minimum height of 200px+ - I’m limited to a div of approx 200px x 140px.

Are there any other solutions? It appears every solution I found through Google no longer works, such as this one, which was working up to October 19th 2012: http://www.kristarella.com/2009/01/display-your-tweets-without-a-plugin/

Thanks

sue_wong · 2013-02-19T16:10:23.000Z

Did you ever find an answer to this? trying to do the same thing here. And just found out that all my twitter feeds on older sites are no longer working!

MattFiler · 2013-04-04T16:11:00.000Z

Hi this is the code I found on the internet and also modified myself.

HTML:

CSS:

ul {
list-style-type: none;
}

#twitter{
background-color: #F2F2F2;
font-size: 13px;
display: inline-block;
border-radius: 10px;
padding: 6px 15px 6px 15px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

Enjoy!

MattFiler · 2013-04-05T13:47:02.000Z

Twitter have disabled the old code.
Here is some code I placed together from some sources on the internet and code I added myself.
Hope it works ok for you!!
http://jsfiddle.net/F6p3W/

MattFiler · 2013-04-05T13:47:09.000Z

Twitter have disabled the old code.
Here is some code I placed together from some sources on the internet and code I added myself.
Hope it works ok for you!!
http://jsfiddle.net/F6p3W/

kevinpajak · 2013-07-10T10:26:00.000Z

I was also using the code that MattFiler had been using, was working fine, and at some point, Twitter must have just stopped supporting it. Their new method is to do “Create/ set up a widget,” then your embed code will successfully display tweets from your Twitter timeline on your web page. So here’s what to do:

Read more here https://dev.twitter.com/docs/embedded-timelines and/or go here:
https://twitter.com/settings/widgets and set up a widget! (You can also tweak the width and height settings right within your <a …> tage. Hope this helps! (Worked for me).

webeecho · 2013-11-15T20:48:02.000Z

the Widgets work well, except when you want to do what I was doing - add a one line text only most-recent-tweet to a basic site as here:

http://goborder.com (the tweet used to appear in the red box to the right of the little birdy icon)

Now that area is blank, and all the methods I’ve tried to get it working again have failed.

vincentisambart · 2013-11-18T02:40:01.000Z

This must not have been working since at least June.
Your page was calling directly the API from Javascript, but you can’t do it that anymore with API v1.1. You now have to use embedded timelines (https://dev.twitter.com/docs/embedded-timelines).
To display only one tweet, in the client-side options (https://dev.twitter.com/docs/embedded-timelines#options) have a look at “Tweet limit”.

PeeyushPD · 2013-11-29T09:41:00.000Z

Man, can you please have a look at this discussion.
https://dev.twitter.com/discussions/23403

ravijoon · 2013-11-29T18:27:13.000Z

since you all are wasting my time, i have a solution check here…
Home Page Widget: http://creativealive.com

mhensen1 · 2014-01-24T06:48:00.000Z

This section here sets up the variables for the Script:
Basically, below if you look at the data item -‘data-chrome’ that line sets
up a blank twitter feed (no boarders, chrome, header, or scrollbar.
The width and height are set to max. (to give the one line tweet appearance)
Then you will notice, data-tweet-limit is set to ‘1’ - this basically takes your latest tweet,
increase this number for the last number of tweets. Data-link-color is set to a custom
color that matches my current webpage. Also, you will have your standard tweet text color.
That is actually set in your widget setup. If you need to change, revisit your widget setup
and change accordingly. Place code below in your HTML page. Include the script below, as
that pulls the data stream from your twitter account. Hope this helps!

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

mhensen1 · 2014-01-24T06:50:00.000Z

As others have said, the description of each data variable function can be found here:
(how each data item effects the twitter widget look and feel)
https://dev.twitter.com/docs/embedded-timelines

LimpaFossaWeb · 2014-03-24T15:20:09.000Z

Thanks for the code @MattFiler. I managed to solve my problem with the site, http://dedetizadoraonline.com/

SearchIndiaInfo · 2014-05-16T17:50:22.000Z

I have accomplished that in my site (www.searchindia.info home page bottom) by using twitter widget

https://twitter.com/settings/widgets

avoid using 3rd party plugins as twitter has an awesome one-click-go widget that have a robust support

ragewebdesign · 2014-05-22T16:03:57.000Z

Brilliant thanks for the info Micheal - I’ll read more documentation see if I can’t get even more minimalist!

niall · 2016-02-05T23:24:05.309Z

niall · 2016-02-05T23:25:44.631Z