Embed Latest Tweet Only on Website


#1

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


#2

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!


#3

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!


    #4

    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/


    #5

    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/


    #6

    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).


    #7

    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.


    #8

    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”.


    #9

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


    #10

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


    #11

    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>
    

    #12

    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


    #13

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


    #14

    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


    #15

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


    #16

    #17