1
votes

I am messed with 2 issue & unable to figure it out yet.

1 - I am trying to put a box on website that displays ALL tweets for a particular hashtag. The default twitter embedded timeline widget is not working so - because I need to show ALL the tweets that are being shown here:

https://twitter.com/search/realtime?q=%2323Dec&src=typd

I tried creating a widget but for the hashtag - #23Dec & it gave this code:

<a class="twitter-timeline" width="300" height="500" href="https://twitter.com/search?q=%2323Dec" data-widget-id="279943570356584449">Tweets about #23Dec</a>

<script>
!function(d,s,id){
    var js,fjs=d.getElementsByTagName(s)[0];
    if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);
    }
}(document,"script","twitter-wjs");
</script>

I replaced the href="https://twitter.com/search?q=%2323Dec" with href="https://twitter.com/search/realtime?q=%2323Dec&src=typd" but still its not working....

What should I do to pull all the tweets ? and put it on website that updates automatically ?

2 - Second is, how can I style it ? because i dont find any stylesheet in given script which i can over-ride with custom stylesheet ?

Please help me....

1
Why is this tagged as twitter-bootstrap?DivZero
@divzero: Sorry ! tagged that by mistakeShumail

1 Answers

2
votes

I think this may help you.. pay attention to how the search params obj is built and from there is just passing it. You sill see an input box for hashtag searching, as well see how I extract them from locale trending topics.

Hey guys, I put together a nice JS fiddle that should answer all your questions when it comes to dealing with the Twitter API. The webapp grabs the trending locales, and allows you to drill down to the trending topics, and then see the Tweets within.

I also included a standard Twitter search submission box, so in a weird way, this is a barebones Tweetdeck client for you to examine. Also, to push the adaption of the new Jquery libraries, I have used 1.91 which utilities the new live.bind click event syntax.

Enjoy

http://jsfiddle.net/jdrefahl/5M3Gn/

    function searchTwitter(query) {
    $.ajax({
        url: 'http://search.twitter.com/search.json?' + jQuery.param(query),
        dataType: 'jsonp',
        success: function (data) {
            var tweets = $('#tweets');
            tweets.html('');
            for (res in data['results']) {
                tweets.append('<div>' + data['results'][res]['from_user'] + ' wrote: <p>' + data['results'][res]['text'] + '</p></div><br />');
            }
        }
    });
}

$(document).ready(function () {

    function getTrendsByID(id) {
        $.ajax({
            url: 'http://api.twitter.com/1/trends/' + id + '.json',
            dataType: 'jsonp',
            success: function (data) {
                $.each(data[0].trends, function (i) {
                });
            }
        });
    };

    function getLocales() {
        $.ajax({
            url: 'https://api.twitter.com/1/trends/available.json',
            dataType: 'jsonp',
            success: function (data) {
                var locales = $('ul#locales');
                locales.html('');
                $.each(data, function (i) {
                    localeID[i] = data[i].woeid;
                    $('ul#locales').append('<li>' + data[i].name + '</li>');
                });
            }
        });

    };

    function getTrends(id) {
        $.ajax({
            url: 'https://api.twitter.com/1/trends/' + id + '.json',
            dataType: 'jsonp',
            success: function (data) {
                var trends = $('ul#currentTrends');
                trends.html('');
                $.each(data[0].trends, function (i) {
                    $('ul#currentTrends').append('<li>' + data[0].trends[i].name + '</li>');
                });
            }
        });
    };

    // Event Handlers
    $(document).on("click", "#locales li", function () {
        var $this = $(this);
        var localesHdr = $('#currentTrendsCont h3');
        var tweets = $('#tweets');
        var trendsHdr = $('#tweetsCont h3');
        trendsHdr.html('');
        tweets.html('');
        localesHdr.html('');
        $('#currentTrendsCont h3').html($this.text());
        getTrends(localeID[$this.index()]);
    });

    $(document).on("click", "#currentTrends li", function () {
        var $this = $(this);
        var trendsHdr = $('#tweetsCont h3');
        trendsHdr.html('');
        $('#tweetsCont h3').html($this.text());
        var params = {
            q: $this.text(),
            rpp: 10
        };
        searchTwitter(params);
    });

    $('#submit').click(function () {
        var trendsHdr = $('#tweetsCont h3');
        var trends = $('#currentTrends');
        var local = $('#currentTrendsCont h3');
        local.html('');
        trendsHdr.html('');
        trends.html('');
        $('#tweetsCont h3').html('search query: '+$('#query').val());
        var params = {
            q: $('#query').val(),
            rpp: 10
        };
        searchTwitter(params);
    });

    // Globals
    var localeID = new Array();

    // Init
    getLocales();

});