开发者

Post dynamic twitter updates

I currently have some script on my page that parses title/artist information from my online radio station. I am displaying it as plain text in html by using

<span id="song_title"></span>

How can I take this dynamic information that is going into the span id and use it for a "post to twitter" link so listeners can share the current song title on Twitter?

I did some research and found a few variations on posting to twitter, but I had no luck with posting this dynamic text.

Here's the script code:

<!-- Begin Now Playing Script -->
            <script>
            (function () {
                // we need a JSON parser, if it does not exist, load it
                if (typeof JSON == "unde开发者_StackOverflow中文版fined") {
                    var s = document.createElement("script");
                    // json2.js retrieved from https://github.com/douglascrockford/JSON-js
                    s.src = "json2.js";
                    document.getElementsByTagName("head").appendChild(s);
                }
            })();
            var song_ends = 0;
            function update_song () {
                if ((new Date).getTime() < song_ends) {
                    // use cached result as the song has not ended yet
                    return;
                }
                var req = new XMLHttpRequest();
                // IE compatbility:
                var textContent = 'textContent' in document ? 'textContent' : 'innerText';
                req.onreadystatechange = function () {
                    if (req.readyState == 4) {
                        var song = JSON.parse(req.responseText);
                        if (song.title) {
                            var img = document.getElementById("song_image");
                                if(song.image.src){
                            img.alt = song.image.alt;
                            img.src = song.image.src;
                            img.width = 100;
                            img.height = 100;
                                }else{
                            img.src="images/default_art.png";
                            img.width = 100;
                            img.height = 100;
                                }
                            document.getElementById("song_title")[textContent]  = song.title ;
                            document.getElementById("song_artist")[textContent] = song.artist;
                            document.getElementById("song_next")[textContent]  = song.next ;
                            // store the end date in javascript date format
                            song_ends = (new Date).getTime() + song.wait_ms;
                        }
                    }
                };
                req.open('get', 'php/PlayingNow.php', true);
                req.send(null);
            }
            // poll for changes every 20 seconds
            setInterval(update_song, 20000);
            // and update the song information
            update_song();
            </script>
<!-- End Now Playing Script -->

I want to be able to post it to Twitter like this: Currently listening to (song_title) by (song_artist)

Here is the code for the PHP file referenced in the script above:

<?php // filename: PlayingNow.php
$json = null;
$cache = 'song.json';
// if there is no usuable cache
if (!$json) {
    // retrieve the contents of the URL
    $ch = curl_init('http://bigcountry.streamon.fm/card');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $res = curl_exec($ch);
    curl_close($ch);
    $json = json_decode($res);
    // if the title exists, assume the result to be valid
    if ($json && $json->title) {
        // cache it
        $fp = fopen('song.json', 'w');
        fwrite($fp, $res);
        fclose($fp);
    } else {
        $json = null;
    }
}
if ($json) {
    $info = array();
    // contains the time in milliseconds
    $info['wait_ms'] = $json->interval->ends_at - 1000 * microtime(true);
    $info['title']   = $json->title ;
    $info['artist']  = $json->artist;
    $info['album']   = $json->album ;
    $info['next']   = $json->next_song;
    $info['image']   = $json->album_art;
    // display a JSON response for the HTML page
    echo json_encode($info);
}
?>


The "right" way to do this is to use Twitter's Web Intents, which is designed specifically for this scenario. Take a look at the "Tweet or Reply to a Tweet" section. In practice you'll just include the Web Intents script (http://platform.twitter.com/widgets.js) on your page, create a link, and set its href, e.g.:

var link = document.createElement('a');
link.innerHTML = "Link Text";
link.href = 'http://twitter.com/intent/tweet?text=Currently listening to "' + songTitle + '" by ' + songArtist;

var parentElement = document.getElementById('SOME_ELEMENTS_ID');
parentElement.appendChild(link);

You can add the url parameter if you also want the tweet to include your site's URL.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜