Full timestamps in embedded Collections

embeddedtimeline

#1

is there any way to show the full timestamp in an embedded collection the same as they appear on individual tweets? I would like for my visitors to see the time and date for each tweet, not just the date where you have to hover over the text for a timestamp. I’ve tried searching here and on Google for “twitter collection show time”, “twitter collection full timestamp”, etc etc but haven’t found anything useful


#2

No, that’s not supported in the embedded timeline widgets that Twitter provides.


#3

Is there a way to add support on top of the existing timeline widget or am I looking at having to implement my own in order to get this?


#4

I’m not aware of a way to do this. I suppose you could attempt to use some post-render Javascript to update the relevant part of the page.


#5

post-render JS as in JQuery? Hrm… that’s an interesting thought I have some experience there and will see what I can figure out in identifying and modifying the proper page elements, thanks for the idea.


#6

Yeah, that’s what I was thinking as a technique - good luck!


#7

ok, hopefully I can get a little more help because I think I’m close but for some reason I can’t get JQuery to locate the page elements I need to modify. I have my WordPress theme setup to run a JS file in the footer and I’m calling the default JQuery that ships with WordPress. Then I’m waiting for the twitter elements on the page to load (there are three, the follow button, user timeline and collection timeline) before trying to print out a list of all the <time> elements. I did an element query in FireFox and those are the elements that contain the timestamp info for each tweet. But I always get nothing. If I run the code for <p> tags I get a proper output so I know the code is working it’s just not finding any <time> tags for some reason.

var $j = jQuery.noConflict();

twttr.events.bind(
  'loaded',
  function (event) {
    if (event.widgets.length == 3) {
      console.log("loaded");
      $j( "time" ).each(function( index ) {
        console.log( index + ": " + $j( this ).text() );
      });
    }
  }
);

(I’ve since realized I need to wrap the binding in a twttr.ready() callback function and have made that edit)

HANG ON I’ve realized I’m looking inside an iframe and have done a $j("#twitter-widget-1").contents().find("time") call and have gotten a return array filled with time elements. May not need help after all


#8

Ok I nailed it. Here is the full code for anyone else that needs it. I used this article to learn how to enque my script into WordPress. You can see this script in action on this page.

// use proper JQuery Wordpress version
// https://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/
var $j = jQuery.noConflict();

// ensure that widgets.js is loaded
$j(document).ready(function() {

  // https://dev.twitter.com/web/javascript/events
  twttr.ready(
    function (twttr) {
      twttr.events.bind(
        'loaded',
        function (event) {
        
          // callback can be triggered when event.widgets is 0, so make sure it isn't
          if (event.widgets.length) {
          
            // locate all the <time> elements and hack up the text in the title to insert into the tweet
            // you are going to want to change "twitter-widget-1" to the ID of the widget you are targeting on your page
            // change the color to always be visible, not just on hover
            var times = $j("#twitter-widget-1").contents().find("time").each( function () {
              $j(this).html($j(this).attr("title").split(": ")[1]);
              $j(this).css("color", "#8899A6");
            });
            
            // setup a callback for when the "Show More Tweets" is clicked to update timestamps for new tweets
            // I could not find an event that fires when new tweets are loaded, so just wait a second
            $j("#twitter-widget-1").contents().find("button").each( function () {
              $j(this).click(function() {
                setTimeout(function() {
                  var times = $j("#twitter-widget-1").contents().find("time").each( function () {
                    $j(this).html($j(this).attr("title").split(": ")[1]);
                    $j(this).css("color", "#8899A6");
                  });
                }, 1000);
              });
            });
          }
        }
      );
    }
  );
});

I should also add that if the page does not have a twitter timeline or anything that loads widgets.js then this code will throw a JS reference error, but it should not interfere with any other JS operations


#9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.