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

Answer 1

A good solution for this kind of thing is to leave the http: or https: out of the src or href attributes of included content. Usually the browser can figure out which protocol to use.

In your case, you can use //platform.twitter.com/widgets.js as the url to the file now that Twitter serves things over https.

Answer 2

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

Answer 3

There is this script from miloops that's supposed to provide Twitter SSL support WITH Tweet-Count support.

http://miloops.com/post/8138215285/implementing-ssl-tweet-button

But I still got a mixed-content warning because it still loads the <iframe> from Twitter which then loads unsecured content. :-(

Answer 4

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.

Answer 5

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!

Answer 6

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.