Facebook 'Like' button breaks https/SSL

StackOverflow https://stackoverflow.com/questions/3587021

Question

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?

Was it helpful?

Solution

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>

OTHER TIPS

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top