This post was most recently updated on January 18th, 2019.
Twitter has always been good for developers, except for those who’d like to embed anything – hence making it possible to interact with their contents 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.
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” (latest IE mode available, NOT the browser). And 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 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.
On to the investigation
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!
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 “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.
Luckily, there’s a dirty hack for this situation!
What makes things worse, is the fact that you shouldn’t change the document mode of SharePoint 2013/2016. 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 you can’t really trust the users to change it either, 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 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… :)
Note: At least in some scenarios, this hack might cause issues with page responsiveness. 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!
If you want to further tweak the embed, there’s 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:
Latest posts by Antti K. Koskela (see all)
- Fixing “-2147024891, System.UnauthorizedAccessException” when accessing SharePoint SOAP Web Services - January 17, 2019
- “500 Internal Server Error” after switching a WordPress site to PHP 7.3 - January 15, 2019
- Azure Functions failing on “OPTIONS” call? Quick fix! - January 9, 2019
- Thanks for an amazing 2018! - December 28, 2018