Embed tweets from url

šŸŒˆShare & Showcase
#1

I often put twitter urls in my inbox and then forget what it was about. Instead of having to open each URL separately, I wrote a little tampermonkey script that embeds the tweet.

image
image912Ɨ1276 266 KB 

// ==UserScript==
// @name         Dynalist Tweet preview
// @namespace    http://louiskirsch.com/
// @version      0.1
// @description  Resolves twitter links and displays them as tweets inline
// @author       Louis Kirsch
// @match        https://dynalist.io/d/*
// @grant        GM.xmlHttpRequest
// @run-at       document-idle
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://platform.twitter.com/widgets.js";
s.async = true;
document.head.append(s);

waitForKeyElements("a.node-link[href^='https://twitter.com/", actionFunction, false);

function actionFunction(links) {
    links.each((i, l) => {
        var requestUrl = 'https://publish.twitter.com/oembed?omit_script=1&url=' + l.href;
        GM.xmlHttpRequest({
            method: "GET",
            url: requestUrl,
            onload: function(response) {
                var data = JSON.parse(response.responseText);
                $(l).after(data.html);
                if (twttr.widgets != undefined) {
                    twttr.widgets.load();
                }
            }
        });
    });
}
9 Likes
#2

This is welcome. I note this has been possible in Roam. When I install the script, it get the plain text from the Twitter post, but not the formatting as in yours. There may be a clash with CSS.

1 Like
#3

I am not entirely sure now what you meant. Roam embeds tweets by default or you run my script in Roam?

in Dynalist?

#4

So this is a tweet in Twitter:
image

And how it appears when the link is copied into Dynalist with your script.

image
image1439Ɨ133 6.12 KB

Itā€™s still useful, but not embedded.

#5

Hum okay, thatā€™s odd. Are there any errors in the console?

#6

Iā€™m not sure if it is relevant, but this is the error message:

Refused to load the font ā€˜ā€™ because it violates the following Content Security Policy directive: ā€œdefault-src *ā€. Note that ā€˜font-srcā€™ was not explicitly set, so ā€˜default-srcā€™ is used as a fallback

#7

Hey @Louis_Kirsch, I tried your script but it doesnā€™t seem to work (Iā€™m on Firefox). I got error messages on lines 19, 29, 30 :

  • eslint : no undef - waitforkeyelements is not defined
  • eslint : no undef - ā€˜$ā€™ is not defined
  • eslint : no undef - ā€˜twttr is nor definedā€™

Regards

#8

Could this be tweaked to embed other stuff? Like say a YouTube video or a Google sheet table?

#9

Absolutely. Both in principle allow embedding through scripts or iframes.
E.g. google sheets
http://www.bdnyc.org/2012/08/how-to-embed-a-live-google-docs-spreadsheet-into-a-webpage/

#10

But Iā€™m guessing it wonā€™t work with your script without some tweaking?

#11

Yeah it requires a little bit of javascript knowledge.

#12

Iā€™m sure Iā€™m doing something wrong, but I canā€™t get anything to workā€¦ I installed the Tampermonkey extension in FF and I pasted the code above in a new script. But nothing seems to happen when I paste a Twitter URL in Dynalistā€¦ Is there something else I should do ? Thx

#13

To be honest I havenā€™t tested it in Firefox but in Chrome. Maybe it has to do with that. Did you refresh the page after adding the script? Are there any errors in the console? Does tamper monkey claim the script is running?

#14

Works for me in Chrome ( Vivaldi)

#15

@Louis_Kirsch Youā€™re right, it works in Chrome ! I needed to refresh both Twitter and Dynalist though. Iā€™ll try again in FF, and Iā€™ll let you know. Huge thanks, both for QuickDynalist and this script (so useful with Twitter !!!). Cheers.

1 Like
#16

Works in FF as well after all ! GREAT !!! Thanks again.

1 Like