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 IE on SharePoint sites causes the user agent to be roughly that of IE10), that means trouble for SharePoint admins. Basically everyone, who’s using Twitter embeds on SharePoint, will be seeing empty feeds henceforth.
Well, save for SharePoint Online users, since SharePoint Online renders in whatever mode Microsoft chooses that week! For them, Twitter feeds will act like erratically, and I feel bad for whomever has to debug the behavior!
Anyway – that change’s immediate effects were surprisingly small. Widgets still rendered, until roughly 2 weeks ago (early May 2018). We started getting reports of Twitter being utterly broken – the embed being completely empty without any fallback rendering whatsoever. What’s worse, the embed fails silently, without any errors anywhere. Looking at the code, it looks like it just checks the user agent and ends the execution – 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!
Solution: Spoofing the user agent in SharePoint to fix Twitter
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… 🙂
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)
- Thanks for coming to my session at SPS New England 10/20 ! - October 20, 2018
- Speaking at SPS New England on 10/20! - October 17, 2018
- Ignite 2018 recap: What’s new for Azure Functions? - October 16, 2018
- Problematic behavior of web.AddSupportedUILanguage(int lcid) in SharePoint 2013 and 2016 - October 10, 2018