Facebook 'Like' button breaks https/SSL

Asked 27/8, 2010 at 18:17 Answered 23/11, 2016 at 3:49

Solved facebook ssl https facebook-like mixed

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?

Maddock answered 27/8, 2010 at 18:17 Comment(0)

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>

Baptistry answered 31/3, 2011 at 21:4 Comment(6)

I didn't know about this trick. Does it work with all broswers? Thanks for introducing it to me. – Maddock 15/4, 2011 at 20:54

This does not work for facebook. The issue is that the actual image is ONLY on their http site as of now. – Freightage 27/6, 2011 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... – Baptistry 8/7, 2011 at 19:1

@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? – Freightage 19/7, 2011 at 15:36

@Noah, i see this sprite 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? – Baptistry 21/7, 2011 at 15:6

@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: 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. – Freightage 21/7, 2011 at 16:28

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

Planoconcave answered 27/8, 2010 at 18:28 Comment(4)

facebook.com/plugins/… – Planoconcave 27/8, 2010 at 18:28

Do you mean replace all occurrences of 'http' in the above <iframe> 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). – Maddock 27/8, 2010 at 20:13

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. – Planoconcave 27/8, 2010 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. – Emulsion 10/5, 2011 at 18:19

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

Jobber answered 23/11, 2016 at 3:49 Comment(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>

Moneylender answered 13/3, 2015 at 13:40 Comment(1)

While this code snippet may solve the question, including an explanation 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. – Moralez 13/3, 2015 at 13:54

Recommended topics

Hot tags