Search code examples
javascripthtmltwitterjekyllgithub-pages

Embedded Twitter timeline not working on Jekyll site

Objective: Embed my organization's Twitter timeline on our Jekyll GitHub Pages website.

When I create a local index.html with the following code in it and open it with Google Chrome, it correctly displays the timeline, however this doesn't work in JSFiddle nor on our site itself.

<html>
  <head>
    <title>"Hello, World"</title>
  </head>
  <body bgcolor=white>
    <h1>Hello, World</h1>

    <div>
      <a class="twitter-timeline" data-theme="dark" href="https://twitter.com/CodeForBuffalo?ref_src=twsrc%5Etfw">Tweets by CodeForBuffalo</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

  </body>
</html>

This is the context that the code is in. I've tried adding the script to the js folder that contains the other js script files (and then referring to that file path). I tried including it in head.html and then footer.html but none of those attempts worked.

The script Twitter provided should work since it was successful locally, but all it is displaying is the hyperlink to the Twitter timeline itself. Is this something on Twitter's end or just me using Jekyll/JavaScript incorrectly? If not, is there another way to embed our Twitter timeline?

Here's the link to the GitHub Repo

<section id="main-description">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
          ...
      </div>
      <div class="col-md-4">
        <div>
          <a class="twitter-timeline" href="https://twitter.com/CodeForBuffalo?ref_src=twsrc%5Etfw">Tweets by CodeForBuffalo</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
      </div>
    </div>
  </div>
</section>

Solution

  • I tested this on my Jekyll website and it worked straight away. I simply created a new page in root/twitter/.index.html:

    ---
layout: page
title: "Twitter feed"
heading: "Twitter feed"
excerpt: "Twitter feed."

permalink: twitter

---

Twitter feed placeholder:



<section id="main-description">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        ...
      </div>
      <div class="col-md-4">
        <div>
          <a class="twitter-timeline" href="https://twitter.com/CodeForBuffalo?ref_src=twsrc%5Etfw">Tweets by CodeForBuffalo</a>
          <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
      </div>
    </div>
  </div>
  </section

    And got the expected result:

    enter image description here

    If you're still having issues, please check the browser console for any errors. Maybe you're missing a JS dependency? I didn't add anything except for the code above but my site does have Bootstrap and the related JS libraries already included. Not sure if these are needed or already provided in the async script.