By pheski on

The problem: Twitter no longer supports widgets, and all the Twitter feed extensions use the WID or widget ID as the key to connecting to a Twitter feed. Work appears to have stalled on updating the modules.

The solution (with key hints and thanks to @hassebasse):

  • Go to Twitter development Documentation
  • Get the embed code for your timeline
  • Create a block the usual way
  • Use Full HTML, click the Source button, and paste the embed code in. Then unclick the Source button, save.
  • Place your block in the usual way.

The basic code for a timeline will look like this:

 <a class="twitter-timeline"
  href="https://twitter.com/{screen_name}">
Tweets by @{screen_name}
</a>

The development documentation lists additional parameters used to control number of tweets, style, size...)

⋅ Categories: Drupal 7.x, Drupal 8.x

Comments

leopinzon’s picture

leopinzon commented

Pheski, I think you missed the javascript include that's actually the responsible for building the timeline. Final code would be something like this. 

<a class="twitter-timeline" href="https://twitter.com/{screen_name}">
Tweets by {screen_name}</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
harri00413’s picture

harri00413 commented

I tried this but no tweets appeared. I remember something about javascript in blocks not allowed. Could that be the problem?

leopinzon’s picture

leopinzon commented

I see, actually that's a different issue. To solve it, you have to edit your Code styling configuration (ej. full html) and add the <script> tags to the allowed ones so Drupal stops filtering them in the future inside your full html blocks. 

Hope it helps

corneliusd’s picture

corneliusd commented

Thanks so much for this comment! It makes perfect sense, but I was beating my head against the wall with the same blank twitter feed problem. Now, I'm slapping my hand against my forehead!  (Doh!)

sprite’s picture

sprite commented

The following very nice and easy to use module is also available. 
This module is available for D7 and D8. 
I can verify that it functions well on both D7 and D8 websites. 
The module is also very easy to configure.

https://www.drupal.org/project/twitter_block

spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...

wotney’s picture

wotney commented

This module relies on widget IDs which Twitter doesn't support any more.

There is another way though. 
Preceeding the instructions above - you need to add <script> tags to the "Extra allowed content filter" in the CK editor profile.

  • Visit /admin/config/content/ckeditor
  • Click on the edit link of the "Full" profile
  • Choose "Advanced Content Filter"
  • In the "Extra allowed content" text box, enter "<script>;</script>"
  • Click save

Whilst the tags are allowed when saved, I've noticed they disappear if you back in to the block and try to edit it further, so keep a copy of the embed tag somewhere !

Once you've done this, follow the instructions given above.

BamaJohn’s picture

BamaJohn commented

In case someone else finds this thread, following these directions worked for me. I have other sites running the older means using Widget ID and I started down the same path with a new customer only to find out Widget IDs are not available...

VM’s picture

VM commented

suggest use of a custom block.module to hold the JS and keep it out of the database.

matthieuscarset’s picture

matthieuscarset commented

As state in the first description of this post, embed tweets have changed quite a bit with the latest API versions of Twitter.

The Twitter API Block module provides a new sustainable way of displaying your tweets in Drupal, as custom Block.

Check it out!

glitz’s picture

glitz commented

Hello,

I have a content type that has a field for twitter handle.

Is there a way I can inject that field value, or reference that field value in this code?

I'd like to display the twitter feed of a user by automating this code if possible.

Something like:

<a class="twitter-timeline" href="https://twitter.com/{field_twitterhandle}">
Tweets by {field_name}</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Thanks

Chris