0

I need to fetch latest tweet using latest twitter api and append that to my website div. I am using below code but not working.

So can please someone guide me how can i achieve this.I have tried below example but that is also expired now

Setting up Twitter API, getting the last few Tweets

Community
  • 1
  • 1
user1770461
  • 87
  • 3
  • 17

2 Answers2

0

You can set data-tweet-limit="1"

Example:

<a class="twitter-timeline" 
    href="https://twitter.com/YOUR_HANDLE" 
    data-widget-id="YOUR_WIDGET_ID" 
    data-theme="light" 
    data-link-color="#2393aa" 
    data-chrome="noheader nofooter noborders noscrollbar transparent" 
    data-tweet-limit="1" 
    aria-polite="polite">Loading tweets...</a>

<script src="http://platform.twitter.com/widgets.js"></script>
Khalid T.
  • 10,039
  • 5
  • 45
  • 53
  • Is it possible to fetch latest tweet without using Widget. Because i need to integrate that latest tweet text and tweet date in my design . This widget will add its own design. – user1770461 Jun 25 '14 at 09:12
  • You can use this: var tweet = $('.twitter-timeline li:first .e-entry-title').val(); – Khalid T. Jun 25 '14 at 09:16
  • Thanks Khalid.Can you please provide some reference according to latest Twitter API in jquery – user1770461 Jun 25 '14 at 09:18
  • I don't think there is such thing. You just need to inspect the rendered widget elements in your browser (right-click > Inspect element) and choose the appropriate jQuery selector to access whatever you need. – Khalid T. Jun 25 '14 at 09:27
0

I was able to get the latest tweet by using the following jquery script.

<div class="tweet-item">
   <a class="twitter-timeline" 
     href="https://twitter.com/YOUR_HANDLE"  
     data-theme="light" 
     data-link-color="#2393aa" 
     data-chrome="noheader nofooter noborders noscrollbar transparent" 
     data-tweet-limit="1" 
     aria-polite="polite">Loading tweets...</a>
</div>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Then using jquery, I used this code:

<script type="text/javascript">
$(document).ready(function(){
    var target = document.querySelector('.twitter-item');

            var observer = new MutationObserver(function(mutations) {
                LoadTweet("twitter-widget-0"); 
            });

            var config = { attributes: true, childList: true, characterData: true };

            observer.observe(target, config);

            function LoadTweet(item){

               if($('.twitter-item').hasClass("Loaded")){
                    // do nothing
               } else {
                    console.log("LoadTweet Fired "+ item);

                    var timelineId = item;
                    var media = $('#' + timelineId).contents().find('.timeline-Tweet-media img').attr("src") || "";
                    var tweet = $('#' + timelineId).contents().find('.timeline-Tweet-text').html() || "";
                    if(tweet){ 
                        $('.twitter-item').html("").html(tweet); }
                        $('.twitter-item').addClass("Loaded"); // prevent loop
                    }
              }
        }
 });

 </script>

The jquery script replaces the container with the tweet. Hope this helps or points you in the right direction.

Michael Rosario
  • 56
  • 5