Facebook 'Like' button breaks https/SSL

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?

score 20 · Accepted Answer · edited Jul 13 '13 at 02:29

20

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>

edited Jul 13 '13 at 02:29

Ry-

218,210
55
464
476

answered Mar 31 '11 at 21:04

todd

2,381
1
20
11

I didn't know about this trick. Does it work with all broswers? Thanks for introducing it to me. – Android Eve Apr 15 '11 at 20:54
2

This does not work for facebook. The issue is that the actual image is ONLY on their http site as of now. – Noah Jun 27 '11 at 18:38
@Noah, it's working for me? @android-eve the user agent will inherit the protocol when you leave it blank... this trick has been around since the early browser days... – todd Jul 08 '11 at 19:01
@todd, I don't know how. If you try to view the like image itself via https, do you see it? If so, what URL are you using to view it? – Noah Jul 19 '11 at 15:36
@Noah, i see this sprite https://s-static.ak.facebook.com/rsrc.php/v1/z7/r/ql9vukDCc4R.png being requested... could be you need to update the like button embed code on your end? – todd Jul 21 '11 at 15:06
@todd, Ahh, that has some images, such as the thumbs up image. There is another image that we are using though. If you go to this page: https://developers.facebook.com/docs/reference/plugins/like/ and check out the thumbs up button with the word 'like' next to it with a blue border around it. That's what we cannot find in https. – Noah Jul 21 '11 at 16:28

score 10 · Answer 2 · edited Mar 08 '11 at 16:37

10

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

edited Mar 08 '11 at 16:37

Yahel

37,023
22
103
153

answered Aug 27 '10 at 18:28

Byron Whitlock

52,691
28
123
168

1

https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80 – Byron Whitlock Aug 27 '10 at 18:28
Do you mean replace all occurrences of 'http' in the above with 'https'? If so, could there be any side effects? For example, "mixed content" when a customer is NOT logged in? Or... will this slow down search engine bots crawling? (there are hundreds of pages with this button on the aforementioned website, if the answer is 'yes', this could result in significant problem for SEO). – Android Eve Aug 27 '10 at 20:13
3

Yes, replace http, with https. Facebook will not serve any "mixed" content when you use ssl, so it should work fine. Search engines will not load iframe content. You aren't the first to have this problem which is why they serve both http and https. – Byron Whitlock Aug 27 '10 at 20:39
Any idea how this will work in case of Live Stream Box ? I use Iframe with https and its not able to refresh Box page back.With HTTP works fine. – Pit Digger May 10 '11 at 18:19

score 1 · Answer 3 · edited Nov 23 '16 at 03:51

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

score 0 · Answer 4 · edited Mar 16 '15 at 06:18

0

<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>

edited Mar 16 '15 at 06:18

Lea Cohen

7,990
18
73
99

answered Mar 13 '15 at 13:40

user4667514

1

1

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Bono Mar 13 '15 at 13:54

Facebook 'Like' button breaks https/SSL

4 Answers4

Linked