0

I can embed a tweet in an ol3 popup using a simple iframe code stored in a geojson. The code uses a free service called twitframe.com:

<iframe border=0 frameborder=0 height=250 width=250 src=https://twitframe.com/show?url=https://twitter.com/exploreorg/status/1002995854159089664></iframe>

Working fiddle here: http://jsfiddle.net/Brian393/mr4n3w8z

However I would like to embed a full timeline, not just a single tweet from an individual's status. Instead it should be a hashtag, or even better, a moment (ie a curated collection of tweets), such as these:

https://twitter.com/hashtag/bearcam

https://twitter.com/i/moments/1006256948990312448

When I insert the URLs into the iframe above, they don't work. It seems that twitframe is designed to show only an individual tweet. Does anyone know how to embed a full timeline in an ol3 popup?

Improve this question
3
  • Is there any reason you are not using the official Twitter version?
    – bennos
    Commented Jun 12, 2018 at 6:48
  • Yes, because I haven't been able to get it work! If you or anyone could show how that is done on the fiddle it would really be a help.
    – Brian Holmes
    Commented Jun 12, 2018 at 14:34
  • Just to be clear, I want to see a full timeline in the popup, including pictures and videos. When I paste the official code from publish.twitter.com I just get a hyperlink. It may be necessary to add a function of some kind in the js, but I have been unable to find an example and can't figure it out.
    – Brian Holmes
    Commented Jun 12, 2018 at 21:09

1 Answer 1

Reset to default
0

I found a simple hack that works for a curated collection (as well as a moment, a handle and some other things). It would be great to see a more flexible solution, particularly for displaying a hashtage timeline. But anyway, this might help someone.

Sign in to Twitter, then go to https://tweetdeck.twitter.com and create a collection of tweets. Click "share" and then "embed" in the editing tab. That will take you to publish.twitter.com, which will produce your script (choose "timeline" as display option). Using a text editor, place the generated code in an html file, like this:

<html>
<head></head>
<body>
<a class="twitter-timeline" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw">National Park Tweets - Curated tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>

Save it as, for example, "tweet.html" and put that in a subfolder inside your map folder. Then put an iframe inside your geojson:

<iframe border='0' frameborder='0' height='600' width='350' src=MAPFOLDER/SUBFOLDER/tweet.html></iframe>

Adjust the iframe options as desired. I had minor formatting problems that were resolved by removing data-partner="tweetdeck" from the generated code stored in the html file.

If no one has a better solution I will accept this answer to my own question.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.