Two things are 100% true, progress is inevitable and people hate change.
I should state upfront that I’m a web designer, not a programmer and while I can work my way around things like PHP (which I’ve finally started reading up on properly), APIs, and the lot, I don’t pretend to fully grasp the intricate nature and scale of the tediousness Twitter developers must be dealing with or their ultimate motivation in handling their workflow and dealing with millions of users and the backlash that involves, when undertaking an update like this.
That being said, I do find some of the new changes to be frustrating, which is no doubt the natural reaction I’m seeing from most, from the basic end-user that has absolutely no tech-savviness at all to respectably seasoned programmers. While that’s to be expected, some of the backlash these Twitter employees are getting over in the developer’s forum is absolutely ridiculous.
Ignorant, selfish, arrogant, and cliche rant after rant of the same mindless predictable statements we’ve all seen in these situations.
Things like (paraphrasing from comments I was reading and with better spelling, sentence structure, and punctuation):
- “How can you guys do this? Do you even know how to think?“
- “Good going guys, thanks for breaking thousands of websites, are you now going to go fix all of them?“
- “This is complete nonsense, I’ll make sure to inform all my clients of what you’re doing and to stop using Twitter!“
I particularly love that last one, I see this all the time. It’s this weird arrogant threat similar to refund threats that people use inferring that they’re a big-shot (possibly with power?) and that if you don’t heed their warnings, they’ll somehow ruin you by revealing your evil ways to the world? It’s bizarre and laughable.
I see the same thing on the Google forums, people feel entitled, they actually expect a Google employee to respond directly to them and it better be exactly what they want to hear or else. It’s very childish behavior, especially for free products and services that they’re not even paying for, which I’ve covered more in-depth here.
Possible Solutions
Dynamic Twitter Widgets Without the Need for Authorization or an App
Focusing on a Timeline widget for this example, though I’m sure the same concept can be adapted to all widget types.
It appears that many are under the impression (as I first was too) that now with API v1.1, that every single user of social networks or WordPress themes that offer a Twitter profile integration feature will have to create a separate, individual app, enter special keys, and so on just to use the feature (which anyone who deals with their own user-base knows won’t go over well), as opposed to just entering their Twitter username, which is as easy as it’s been with most of these services for some time now.
Perhaps that is all true and the “workaround” I found is a loophole that will be patched after I publish this article, hope not! But for now, I indeed have found a way. I use “” around workaround, because really this is pretty straightforward and might even be how Twitter intended this to be used, I’m simply not sure. In any case, it’s nowhere near as messy and overkill as any of the other solutions I’ve seen around. Let’s get to it…
You will need to create an official widget (just you though, one time, don’t worry):
https://twitter.com/settings/widgets/new
It doesn’t matter what settings you choose frankly, because we just need to generate a Data Widget ID that is mandatory with the new API. And here’s the key piece of info that everyone seems to be missing, you can use the same ID for multiple widgets and designate a different user! So, we have our anchor and constant to program in and then just dynamically change the username around it for user accounts, WordPress themes, whatever the case.
I’ve put together a customized Twitter widget embed code (from parts found here) that holds pretty much all the good stuff you’ll want to manipulate or allow your users to manipulate.
<a class="timeline" data-theme="light" data-link-color="#0099ff" data-chrome="noheader nofooter noborders noscrollbar transparent" data-tweet-limit="1" data-show-replies="false" data-screen-name="username" href="https://twitter.com/username" data-widget-id="1234567890">Tweets by @username</a>If you don’t already have an appropriate Twitter account representing your business, service, or product, just create one. As soon as you create your widget you’ll see the ID in the browser URL field:
https://twitter.com/settings/widgets/1234567890/edit – Just make sure to replace data-widget-id=”1234567890“ with your own ID.
However you have your users save or set their Twitter usernames, just make sure to instruct them to leave out the @ symbol and then output the dynamic username how you’ve been doing so, so far with PHP, JS, or whatever in place of username, in 3 spots. That’s it. You don’t even need to change how you’re currently serving up https://platform.twitter.com/widgets.js. You don’t need to replace with the new:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>Whether Twitter will have a problem with this solution or impose any kind of limitations on it, I sincerely have no idea… but it works! No authorization or app hassle!
UPDATE — According to the following, this is indeed an approved method:
https://dev.twitter.com/web/embedded-timelines
However, since others continue to think it’s not okay or somehow won’t work I continue to second guess it a bit. But, it works for me and it appears to be supported by Twitter officially, so until I experience a pitfall using this method, I’ll continue using it.
Controlling the New Widget’s Width
Twitter has imposed a minimum width and maximum width restriction on the new widgets, even through documented customization, they don’t allow you full control over this, super easy workaround though! Just add the following to your stylesheet:
.timeline{width:100% !important}I know most people are after that 100% with the responsive obsession and all, but it should work for whatever you want, including fixed px too.
So, are these good, viable solutions or did I miss the memo on something? What do you think of the new API? What are some solutions you think are better than what I’ve managed to cobble together?