Facebook 'Like' button breaks https/SSL

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?

Answers


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>

Here is a hint, facebook.com supports SSL ;)


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%2Fl

<iframe src="//www.facebook.com/plugins/follow?href=https%3A%2F%2Fwww.facebook.com%2Fludwika.karuna&amp;layout=standard&amp;show_faces=true&amp;colorscheme=light&amp;width=450&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Need Your Help

Xcode consistency error: Setting the No Action Delete Rule... is an advanced setting

iphone objective-c xcode core-data data-modeling

After creating a data model in Xcode, it's throwing the following error for each of the object relationships:

Rails - AJAX a Modal Dialog?

jquery ruby-on-rails ruby-on-rails-3

I'm interested in learning how to AJAX a modal dialog. Typically if I wanted to add a modal dialog to my web site I added the jquery UI dialog code in my main JS file and binded it to an ID.