I updated the userscript, it now supports embedding
threads.net posts similar to twitter embeds and supports embedding
x.com posts.
if the x.com url is marked NSFW by twitter than the embed won't load just like regular twitter embeds currently don't.
Code:
// ==UserScript==
// @name Mastodon Embed Links
// @version 1.1.3
// @description Embed Mastodon posts in Xenforo-compatible forums
// @match https://www.thecoli.com/threads/*
// @match https://thecoli.com/threads/*
// ==/UserScript==
(function() {
'use strict';
// Regex pattern to match Mastodon and x.com links
const mastodonRegex = /^https?:\/\/([a-z\d-_]+\.)*([a-z\d-_]+)\.([a-z]{2,})(\/@[a-zA-Z0-9-_]+(@[a-zA-Z0-9-_]+)?\/\d+|\/@[a-zA-Z0-9-_]+\/post\/\w+|\/t\/\w+)/;
const xcomRegex = /^https?:\/\/(www\.)?x\.com\/.*\/status\/(\d+)/;
// Find all links on the page
const links = document.getElementsByTagName("a");
for (let i = 0; i < links.length; i++) {
const link = links[i];
let href = link.getAttribute("href");
// Check if the link matches the Mastodon regex pattern
if (mastodonRegex.test(href)) {
const match = href.match(mastodonRegex);
const username = match[4].split("/")[1];
let domain = match[2];
const postID = match[4].split("/")[2];
// Check if there are two "@" symbols in the URL
if ((username.match(/@/g) || []).length === 2) {
// Rewrite the URL
domain = username.split("@")[2];
href = `https://${domain}/@${username.split("@")[1]}/${postID}`;
}
// Create the iframe embed code
const embedUrl = `${href}/embed`;
const scriptSrc = `https://${domain}/embed.js`;
const iframe = document.createElement("iframe");
iframe.src = embedUrl;
iframe.classList.add("mastodon-embed", "gh-fit");
iframe.style.maxWidth = '550px';
iframe.style.border = "0";
iframe.style.width = '100%';
iframe.style.height = '620px';
iframe.style.maxHeight = '650px';
iframe.style.overflow = 'hidden';
iframe.setAttribute("allowfullscreen", "allowfullscreen");
const script = document.createElement("script");
script.src = scriptSrc;
script.async = true;
iframe.appendChild(script);
// Replace the link with the embedded post
link.parentNode.replaceChild(iframe, link);
}
// Check if the link matches the x.com regex pattern
else if (xcomRegex.test(href)) {
const match = href.match(xcomRegex);
const postID = match[2];
// Create the iframe embed code
const embedUrl = `https://s9e.github.io/iframe/2/twitter.min.html#${postID}`;
const iframe = document.createElement("iframe");
iframe.setAttribute("data-s9e-mediaembed", "twitter");
iframe.setAttribute("allow", "autoplay *");
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("scrolling", "no");
iframe.style.height = '1210px';
iframe.style.width = '550px';
iframe.src = embedUrl;
iframe.setAttribute("loading", "eager");
// Replace the link with the embedded post
link.parentNode.replaceChild(iframe, link);
}
}
function fit() {
var iframes = document.querySelectorAll("iframe.gh-fit")
for(var id = 0; id < iframes.length; id++) {
var win = iframes[id].contentWindow
var doc = win.document
var html = doc.documentElement
var body = doc.body
if(body) {
body.style.overflowX = "scroll"; // scrollbar-jitter fix
body.style.overflowY = "hidden";
}
if(html) {
html.style.overflowX = "scroll"; // scrollbar-jitter fix
html.style.overflowY = "hidden";
var style = win.getComputedStyle(html);
iframes[id].width = parseInt(style.getPropertyValue("width")); // round value
iframes[id].height = parseInt(style.getPropertyValue("height"));
}
}
requestAnimationFrame(fit);
}
addEventListener("load", requestAnimationFrame.bind(this, fit));
})();
one particular issue with the userscript is that it doesn't embed a mastodon url like this
https://mstdn.social/@theseeduneed@mastodon.social/111259225096817564
it needs to be like
https://mastodon.social/@theseeduneed/111259225096817564 instead.
The userscript you provided is designed to replace certain types of links on a webpage with embedded posts. Here’s what it does when it encounters each of the URLs you provided:
https://twitter.com/BaldyNFL/status/1709212004026548631: This URL matches the x.com regex pattern in the userscript. The script will replace this link with an embedded post from x.com. The embedded post will be displayed in an iframe with a height of 693px and a width of 550px.https://mstdn.social/@noelreports/111275312521478534: This URL matches the Mastodon regex pattern in the userscript. The script will replace this link with an embedded post from Mastodon. The embedded post will be displayed in an iframe with a height of 620px and a width of 100% (up to a maximum width of 550px).
Please note that the userscript only modifies links that are present on the page at the time the script runs (i.e., when the page loads). If new links are added to the page after it loads, those links will not be modified by the script.
The userscript you provided is designed to embed Mastodon posts and x.com links in Xenforo-compatible forums.
When the userscript encounters the URL `
https://twitter.com/SamAdlerBell/status/1715800138273226959`, it will match the URL with the `xcomRegex` regular expression pattern. This pattern is designed to match URLs from x.com that contain a status ID.
Once a match is found, the script extracts the status ID from the URL (in this case, `1715800138273226959`). It then creates an iframe element and sets its source (`src`) to an embed URL that includes this status ID. The iframe is then used to replace the original link on the page.
This means that instead of seeing a simple link to the x.com post, viewers of the page will see the embedded post directly on the page. This makes it easier for users to view the content without having to navigate away from the page.
Please note that this userscript is set to run on pages that match `
https://www.thecoli.com/threads/*` and `
https://thecoli.com/threads/*` as specified in the `@match` metadata. If you want this script to run on different pages, you would need to modify these match patterns accordingly.
edit:
test with urls in these threads
https://www.thecoli.com/search/search/?keywords=https://x.com/&users=&date=
https://www.thecoli.com/search/search/?keywords=https://www.threads.net/&users=&date=
https://www.thecoli.com/search/search/?keywords=https://mastodon.social/&users=&date=
xenforo.com
github.com
