Including Twitter Widgets.js via HTTPS

Question

I'm having a minor problem with Mixed-content on HTTPS served pages on our site, when we include the http://platform.twitter.com/widgets.js

Apparently Twitter doesn't have a valid certificate -- but hopefully I am mistaken.

Do any of you have a solution to the problem. I've searched here and on google for a related problem, and have found:

1. Serve the file myself, via HTTPS (but this gives me something I'll need to maintain)
2. Exclude the file from my pages, when serving via HTTPS (which means I lose functionality)

Suggestions ?

Update

See resolution on accepted answer below.

Solution 1

Everything said here before is no longer true. The main culprit, the widgets.js file from Twitter is now served via HTTPS with a valid certificate.

See for yourself: https://platform.twitter.com/widgets.js

In other words, you can now have your Twitter buttons working over HTTPS without any problems!

Solution 2

There is an easier workaround using PHP that requires no maintenance, unless Twitter changes their JS file location.

Create a PHP file in your JS folder, called twitter.platform.js.php or something along those lines. Paste the following into the file.

<?php
header('Content-type: text/javascript'); 
echo file_get_contents('http://platform.twitter.com/widgets.js');
?>

Then include the PHP script instead of Twitter's JS.

<script type="text/javascript" src="/location/to/js/twitter.platform.js.php"></script>

The above code will pull Twitter's non-secure JS from their server and render the output as JavaScript and allow you to serve it over SSL without the warnings, as it will originate from your site.

Update: The above workaround does, as @paul-mcmahon mentioned in the comments, cause SSL errors, when using the Twitter Follow button.

Solution 3

Had this same problem.

Was able to work around it by making my own javascript popup window and passing the params in manually. Doesn't depend on any external twitter stuff.

You'll have to download the tweet button image and save it locally on your own servers as well.

<a href="#" onclick="window.open('http://twitter.com/share?text=your%20tweet&url=yoururl.com','Tweeter','menubar=no,width=550,height=450,toolbar=no'); return false;"><img src="/images/tweet.png"></a>

You can use something like this to encode the text of the tweet and url if needed: http://meyerweb.com/eric/tools/dencoder/

Here is a description of the params you can pass in to that URL: http://dev.twitter.com/pages/tweet_button#properties

Solution 4

I managed to solve this by looking at the code behind the Follow button on https://dev.twitter.com

You don't need to include the http://platform.twitter.com/widgets.js. On the place where you want your Follow button, simply put the following:

<iframe src="https://dev.twitter.com/widgets/follow_button_dtc.html#_=YOUR_TWITTER_ID&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=en&amp;link_color=0080A6&amp;screen_name=YOUR_TWITTER_HANDLE&amp;show_count=false&amp;show_screen_name=&amp;text_color=999999" allowtransparency="true" frameborder="0" scrolling="no" class="twitter-follow-button" style="width: 300px; height: 20px; " title=""></iframe>

This allows you to have an https Twitter Follow button without the Mixed Content message.

View more solutions

Comments

[Admin]

It's a work-around, and it's not terrible. But this also means I'll lose functionality, like the Retweet-counter etc. But a viable option. Like it's been mentioned, Twitter ought to get a valid certificate.

[Paul McMahon]

Except widgets.js loads other resources that aren't over https, so it will trigger warnings.

[Byron Rode]

I have not noticed any warnings when using intents, but it may be that I am not using the full suite. However, it is only a workaround. Hopefully Twitter will offer SSL served JS soon.