How to fix Twitter embed in SharePoint
Twitter has always been (relatively) good for developers - except for anyone who'd like to embed anything - hence making it possible to interact with their content on other sites than Twitter. I guess it's understandable, but they seem to hate anyone trying to embed feeds, searches, or anything on their sites. And they express their hate by making the developers' lives more difficult... This time by silently breaking the embed script in a way, that's tricky to work around.
The Problem
Table of Contents
Table of Contents
In February 2018, Twitter announced that their widgets will start rendering fallback markup on IE9 and IE10 "in the near future". Since SharePoint 2013 and 2016 are locked in document mode of IE 10 (i.e. using Internet Explorer on SharePoint sites causes the user agent to be roughly that of IE10), that means trouble for SharePoint admins.
Why? Basically, everyone, who's using Twitter embeds on SharePoint, will be seeing empty feeds henceforth. No matter if you're using Internet Explorer 9, 10, or 11.
Well, everyone but SharePoint Online users, since SharePoint Online renders in whatever mode Microsoft chooses. It's usually either IE 10 or IE 11, sometimes "edge" (the latest IE mode available, NOT the browser). And as a result, Twitter embeds sometimes work, sometimes they don't.
So for SharePoint Online users, you'll have to verify the used document mode before figuring anything else out.
Anyway - the change's immediate effects were surprisingly small. Widgets are still rendered, until early May 2018. Then, we started getting reports of Twitter being utterly broken - the embed being completely empty without any fallback rendering whatsoever.
This post describes how to fake the user agent for the Twitter embed, and avoid their annoying IE-block, which they're applying in the laziest possible way - by checking if User Agent contains Internet Explorer 10 (or earlier), and if it does, by stopping their script from executing.
The investigation
So the embeds are left completely empty, and there's nothing in the console, and even the network tab is empty after the inclusion of Twitter's JavaScript library.
Annoyingly, the embed just fails silently, without telling what's wrong. Looking at the code, it looks like it just checks the user agent for MSIE10 or less, and ends the execution. No logging, no output, no nothing.
Thanks a lot, Twitter, much appreciated! It would've been nice to get a fallback of sorts, or at least an error message or some logging. But I guess not, then.
What's even worse, is that it applies to IE11 users, too - if they're in SharePoint, or on a site that's running in compatibility mode (such as all sites on the "intranet" zone). And since IE seems to be most actively used in large organizations, especially on internal communication channels, Twitter just decided to block the majority of IE users in the world from accessing their service via embeds.
Ouch.
Luckily, there's a dirty hack for this situation!
Solution: Spoofing the user agent to fix Twitter
This fix applies to pretty much any website, but since my main concern is SharePoint, I'm mainly talking about applying the fix there.
So, SharePoint in the intranet or local zone will jump into compatibility mode - which in turn sets the document mode to IE10, even in IE11. What makes things worse, is the fact that you shouldn't change the document mode of SharePoint 2013/2016/2019 - and not really in SharePoint Online either, if you happen to encounter the issue there.
You should not edit master pages, and if you do, you'll probably break a dozen OTHER things, since SharePoint relies on being shown in IE10 mode (like IE11 does in compatibility mode - more info about that here).
And even if you don't have compatibility mode set on (which will lead you to run into other issues with SharePoint), you can't really trust your users to change the document mode to anything else, so you're left with changing it via code.
That way, we can only change it on the pages where Twitter exists, thus isolating the changes and hence the risks of breaking SharePoint completely. The code below is something you can selectively insert on the pages where you have Twitter embed.
A low-tech solution would be to throw this piece of code right here on a page. The easiest way would be by inserting it into a script editor web part. This same script works in other CMSs than SharePoint as well.
<div></div>
function setUserAgent(window, userAgent) {
// Works on Firefox, Chrome, Opera and IE9+
if (navigator.__defineGetter__) {
navigator.__defineGetter__('userAgent', function () {
return userAgent;
});
} else if (Object.defineProperty) {
Object.defineProperty(navigator, 'userAgent', {
get: function () {
return userAgent;
}
});
}
// Works on Safari
if (window.navigator.userAgent !== userAgent) {
var userAgentProp = {
get: function () {
return userAgent;
}
};
try {
Object.defineProperty(window.navigator, 'userAgent', userAgentProp);
} catch (e) {
window.navigator = Object.create(navigator, {
userAgent: userAgentProp
});
}
}
}
<div></div>
try
{
/* First we check if the User Agent matches to MSIE at all */
if (window.navigator.userAgent.indexOf('MSIE ') >= 0) {
setUserAgent(window, "Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136");
}
} catch (e) {
console.log({e});
}
This piece of code uses a function (from here), to change the User Agent of the browser runtime.
This particular User Agent ("Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136") is actually for Microsoft Edge, as Twitter supports that. This causes the annoying, execution ending User Agent -string check to fail in Twitter's code... :)
Caveats
Updated 18.1.2019, note this: At least in some scenarios, this hack might cause issues with page responsiveness. And of course, it will - you're messing with the user agent, so there's a decent chance you'll mess up some iframe-based functionality - such as a Twitter embed :)
The good news is, that the effect is local only to the page, where you're applying the workaround on. The current solution only needs to be applied to different flavors of Internet Explorer - so while setUserAgent() -function works with most, the code sample only should run for IE.
I've updated the sample to reflect this, to minimize any side effects. Thanks for the heads-up, Tuukka!
Further reading
If you want to further tweak the embed, there are a number of parameters you could use. For example, you can limit the number of shown tweets (probably the most typical scenario). Refer to these pages for a reference of attributes you could use:
Comments