Facebook 'Like' button breaks https/SSL

facebook ssl https facebook-like mixed
Android Eve picture Android Eve · Aug 27, 2010 · Viewed 29.5k times · Source

On an e-commerce website I maintain, I added a Facebook 'Like' button per the instructions here:

http://developers.facebook.com/docs/reference/plugins/like

I am using the iframe method:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" 
  scrolling="no" frameborder="0" style="border:none; overflow:hidden; 
   width:450px; height:80px;" allowTransparency="true">
</iframe>

It works, but if a customer happens to be logged into her account, she gets the infamous "mixed content warning"

Is there a way to use the same Facebook 'Like' button code but in a way that will not interject non-https content when in SSL mode?

Answer

todd picture todd · Mar 31, 2011

You can avoid SSL warnings for domains that support SSL by not being specific about the transport protocol. e.g. instead of including http:// or https://, use //.

instead of

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

use

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Related questions

Facebook JavaScript SDK over HTTPS loading non-secure items

I have a Facebook application that uses the Facebook Connect.js. I am running my application over HTTPS. All content on the site is delivered from https:// with the exception of some content that must be included within Facebook's Connect.…

Read More
Facebook App: any way to run the app without SSL?

I am working on my first app for Facebook and facing (probably) with the SSL problem. If I am testing the app, so it's working well. But then I wanted to test the app by my friend - so I …

Read More
Facebook canvas apps HTTPS and HTTP

I have created two Facebook canvas apps. I am having problems with people accessing the apps. In the app settings you must enter: Canvas URL Secure Canvas URL Secure Canvas URL wont accept HTTP links but only HTTPS. When some …

Read More