Search code examples
javascripthtmlimagetwittermeta-tags

Using dynamic image as Twitter meta image


I have a Twitter application that publishes every 20 minutes the title being broadcast on my web radio. It can publish the title, the artist, the number of listeners or the current playlist, but not the album covers.

As a workaround, I try to get her to also post the link to an HTML page containing the cover art in her twitter meta tag, so that the image is embedded in the tweet as well.

It works fine for a single image, but I don't know how to refresh the process when the app posts the HTML page to Twitter on a music change.

For that I have:

  • A Twitter app that reads my radio's API info and tweets info like artist and title.
  • An HTML page that retrieves the link to the cover image linked to the title being broadcast.

So I'm trying to make the link of the image retrieved by my HTML page (and which changes with each new music) become the link of the Twitter meta tag.

Here is the code I currently have for my HTML page:

<!DOCTYPE html>
<html>
<HEAD>
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="Lorem IpsTest Website">
    <meta name="twitter:creator" content="@u_animity">
    <meta name="twitter:title" content="Now on air">
    <meta name="twitter:description" content="Now, there is this on air">
    <meta name="twitter:image" content="">
    <title>Redirection automatique dans un instant</title>
</HEAD> 
<BODY>
    <CENTER><p>Vous allez être redirigé vers la webradio dans un instant...</p></CENTER>
</BODY> 
<script>
         var nowPlayingTimeout;
var nowPlaying;

function loadNowPlaying() {
    $.ajax({
        cache: false,
        dataType: "json",
        url: 'https://rdx.kaed-tzo.com/api/nowplaying_static/orx_radio.json',
        success: function(np) {
            // Do something with the Now Playing data.
            nowPlaying = np;
              $('.current-playlist img').attr("content", np.now_playing.song.art);

            nowPlayingTimeout = setTimeout(loadNowPlaying, 15000);
        }
    }).fail(function() {
        nowPlayingTimeout = setTimeout(loadNowPlaying, 30000);
    });
}

$(function() {
    loadNowPlaying();
});
</script>
</html>

How can I proceed?


Solution

  • Answered by GrafiCode with PHP code.