JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div id="twitter-song-share">

</div>

JavaScript

$(document).ready(function() {
    var config = {
        link: "http://www.wmgk.com/listen-live/",
        related: "WMGK:Official 102.9 MGK Twitter Account,jdbshow:The John DeBella Show",
        // related are the suggested twitter accounts and their descriptions you want people to see after they finish sending the tweet.
        short_name:"102.9 MGK",
        twitter_user:"wmgk"
    };
    updateShareButton(config);
});

function updateShareButton(config) {
    $.ajax({
        type: "GET",
        // using YQL to do cross-domain AJAX request to WMGK.com. If this script were running on WMGK.com, wouldn't need this:
        url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D%22http%3A%2F%2Fwww.wmgk.com%2F_SHARED%2FNowPlaying%2FRecentlyPlayed.ashx%3FNumberOfSongs%3D1%22&diagnostics=true",
        //url: "http://www.wmgk.com/_SHARED/NowPlaying/RecentlyPlayed.ashx?NumberOfSongs=1",
        dataType: "xml",
        success: function(xml) {
            $(xml).find("Song").each(function() {
                var caption = "I'm listening to "+$(this).attr("title")+" by "+ $(this).attr("artist") +" on "+config["short_name"] + "- ♬";

                var twShare = '<a href="'+ config["link"] +'" data-via="'+ config["twitter_user"] +'" data-url="'+ config["link"] +'" data-text="'+caption+'" data-related="'+ config["related"] +'" class="twitter-share-button">Tweet</a>';
                    
                $("#twitter-song-share").html(twShare); // replace the button with the updated HTML
                $.getScript("http://platform.twitter.com/widgets.js"); // re-render the Twitter button each time you re-create it
            });

        },     
        complete: function() {
            setTimeout(updateShareButton, 15000, config); // repeat in 15 seconds
        },
        error:function (xhr, ajaxOptions, thrownError){
            console.log(xhr.status);
            console.log(thrownError);
        }
    });
}