-3

I run a website where I post a new story every day. Since I've had trouble learning coding languages, like JavaScript, I've pretty much kept to HTML and CSS. My site is in the form of a blog, which is great for any readers who want to see what's new every day. But if you're trying to catch up, it's a little difficult, because the posts are in reverse order. I'm currently working on archive pages, which will be in the form of calendars. Each box (day) will display links, not only to the story that I posted on that day, but also to the tweets that I posted. The tweets are sometimes topical, but not time-sensitive, so I also want people to be able to go back and read really old ones at their leisure. I feel like it would be easier for them, if they just clicked on a link to a tweet, that that tweet will appear on my website, hovering over the page. I don't want them to have to click each tweet, go back, click the next one, and so on. It would be like clicking on/hovering over a thumbnail, and seeing a larger version of the image, but instead of a picture, I want the tweet, as it would look if it were just embedded. Does that make sense, and is that possible, or am I asking too much?

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Tavis Highfill
  • 1
  • 1
  • 1
    Use AJAX and the Twitter API. – Barmar Oct 08 '19 at 17:09
  • Contain the tweet page content in a modal. See here how to access a tweet in a new window (useful for getting the page HTML) - https://stackoverflow.com/a/31579101/11700321, now capture the page in a modal/iframe - https://stackoverflow.com/a/17955439/11700321 – EGC Oct 08 '19 at 21:30

1 Answers1

1

You can create a Twitter widget easily using this: https://publish.twitter.com/ Copy the code from there and insert it into the code I am giving you below.

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
<button onclick="myFunction()">Click me to show Twitter widget</button>

<div id="myDIV" style="display:none;">
  YOUR TWITTER WIDGET CODE WILL GO HERE
</div>
MistaPrime
  • 1,591
  • 1
  • 10
  • 20
  • Thanks. I couldn't get that to work, but that's not surprising. JavaScript never seems to work for me, at least not on Blogger. Even if I could, though, it would be too much work. That's a lot of code to copy and paste 11,501 times (as of today). It's more reasonable for me to just use a hidden span that appears on hover. That way, I only have to worry about the html for each link. I appreciate it, though. EDIT: 23,002 times, since I would need to edit JavaScript for each one, plus the link. – Tavis Highfill Oct 09 '19 at 13:54
  • Why didn't that work for you? Perhaps you didn't wrap the javascript code inside of a `` I tested that and it works. If you want send the URL of your Twitter feed/account and I will create a codePen for you. – MistaPrime Oct 09 '19 at 13:59
  • Only the javascript code goes into the ` – MistaPrime Oct 09 '19 at 14:06
  • Okay, I made a small mistake in my div ID, because I erased it when it didn't work the first time. But it's still too much code. Blogger has a limit for each page, and I'm not certain I'll even get my HTML/CSS version to work for the hundreds of links I'll need. Thanks again. – Tavis Highfill Oct 09 '19 at 14:09