I want to provide my users the ability to add the Facebook checkbox plugin to their website through an iframe.
My application provides the iframe and hosts the page:
<iframe src="https://www.botletter.com/cif/GWoe6LUboG9YBrdudAA2naV5" style="border:none;width:100%;"></iframe>
And then people add this iframe to their website. I whitelist their website's domain name and put their domain name as origin:
<div class="fb-messenger-checkbox"
origin="<%= #checkbox.website %>"
page_id="<%= #core_bot.page_id %>"
messenger_app_id="MY APP ID"
user_ref="<%= #random_user_ref %>"
prechecked="false"
allow_login="true"
size="<%= #checkbox.button_size %>"></div>
Unfortunately, it does not render and I get the following error:
Refused to display
'https://www.facebook.com/v2.6/plugins/messenger_checkbox.php?allow_login=true&app_id=534768046912528&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FlY4eZXm_YWu.js%3Fversion%3D42%23cb%3Df2218eaf474e464%26domain%3Dwww.botletter.com%26origin%3Dhttps%253A%252F%252Fwww.botletter.com%252Ff1ea0c055b4547%26relation%3Dparent.parent&container_width=689&locale=en_US&messenger_app_id=534768046912528&origin=https%3A%2F%2Fwww.lalanguefrancaise.com%2F&page_id=1115924038427162&prechecked=true&sdk=joey&size=small&user_ref=437aa962df71ec4eea67'
in a frame because an ancestor violates the following Content Security
Policy directive: "frame-ancestors https://www.lalanguefrancaise.com".
The error bellow can be reproduced on this page.
Maybe this is caused because I render the checkbox in an iframe that I integrate in another website? Do you have any idea how I can make this work?
Related
I am trying to get the Facebook plugin working on my wiki. Using the guidelines provided by Facebook I copied the Java Script SDK in MediaWiki:Common.js, which should run it for all users.
Now I am trying to enter the simple HTML code also generated by Facebook :
<div id="Facebook" class="fb-page" data-href="(my FB page)" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>
'My FB page' is of course replaced by the actual URL.
I tried two ways of entering the code.
Making a Template:Facebook page and linking to it like {{Facebook}} on the actual page
Even though this is not recommended forcing the html by adding the parameter $wgRawHtml = true; and entering the code in the ... tags.
None of this ways resulted in the Facebook plugin appearing on my wiki.
I am trying to implement Facebook Register Plugin on my website for landing pages.
I am following this guide:
https://developers.facebook.com/docs/plugins/registration/v2.0
I've written following code:
<div id="registration">
<iframe src="https://www.facebook.com/plugins/registration?client_id=660604224016242&redirect_uri=http://automaton.in/store_user_data.php?&fields=[{"name":"name"},{"name":"email"},{"name":"password"},{"name":"gender"},{"name":"birthday"}]">
</iframe>
</div>
But nothing is showing up instead of a box with border.
I've also created my facebook app with app-id 660604224016242.
Also, I am running my site locally without a local server! Do I need to run this on a server?
Please help me, I really need to implement this plugin!
I am integrating Payflow Advanced into our site and am testing in Sandbox. I have a page with a Pay Now button. I have all the necessary accounts, hosted pages, etc. and I successfully get secure tokens I have tried two ways of accessing my hosted page with these tokens:
1) the Pay Now button opens another HTML page in which my hosted page is specified as the source of an iframe as in
<p>This is a test of hosted pages</p>
<iframe src="https://payflowlink.paypal.com?SECURETOKEN=73nQZctvqskKbJooHoBr9DQlB&SECURETOKENID=DTesting5991376569967&MODE=TEST& BILLTOSTREET=33 Ames Road&BILLTOCITY=Groton&BILLTOSTATE=MA&BILLTOZIP=01451&BILLTOPHONE=408-110-7975" name="test_iframe" scrolling="no" width="700px" height="700px"></iframe>
When this page opens, my hosted page is in the iframe and all info is correct. After a couple of seconds, something in the PayPal code redirects the browser to the full hosted page. Everything is correct on this full page as well.
2) In this method I bypass the intermediate HTML page and use an HTML form to access PayFlow directly. The form has the ACTION set to the exact same string as the src in method 1 and a button to submit the form. as in
<form id='payment' action="https://payflowlink.paypal.com?SECURETOKEN=73nQZctvqskKbJooHoBr9DQlB& SECURETOKENID=DTesting5991376569967&MODE=TEST&BILLTOSTREET=33 Ames Road&BILLTOCITY=Groton&BILLTOSTATE=MA&BILLTOZIP=01451&BILLTOPHONE=408-110-7975">
<input display="inline" type='button' id='paypalbutton' value="Pay with Credit Card or PayPal" class='buttons' onClick="buttonclick('ccpay');">
</form>
When the form is submitted an invalid merchant message is displayed and no hosted page is displayed.
I don't care which method I use if it would only work correctly. In method 1, how do I avoid the redirection?
In Method 2, why am I getting the invalid merchant error?
Thanks
You don't have a method="POST" in your <form> tag. This causes your browser to default to using the GET method to submit the form. This, in turn, causes the browser to strip off all the query parameters from the URL, resulting in an empty request.
So, the solution to this would be to add method="POST" to your <form> tag.
There is a problem with Facebook applications/page tabs and Chrome/Internet Explorer users that have checked "secure browsing" setting in their profile but not only.
Problem rises when facebook opens our app by https protocol. Let's assume that we have app and all our resourcess accessbile by https. When user visits our app, everything working but not iframe/JS widgets, provided by external sites without SSL like some counters, instant messaging widget etc.
What to do if the page where widget comes from doesn't let us to generate ssl-version code, and also just changing http to https doesn't work because of lack of certificates/ssl enabled etc ?
TripAdvisor widget
The answer is : replace this script tag with TripAdvisor script
This :
<script src="http://www.jscache.com/wejs?wtype=sswidecollectreview&uniq=612&locationId=1480219&lang=en_US&border=true"></script>
To This tag from TripAdvisor Script
<script src="https://www.tripadvisor.com/WidgetEmbed-sswidecollectreview?uniq=831&locationId=308116&border=true&lang=en_US"></script>
and add [ S ] character to link for images [https] like this :
<a target="_blank" href="http://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/medium-logo-12097-2.png" alt="TripAdvisor"/></a>
To This :
<a target="_blank" href="http://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/medium-logo-12097-2.png" alt="TripAdvisor"/></a>
its work ...
Basically what the "padlock"/SSL indicator in the browser indicates is that the whole page is secure.
That means, no insecure content is included on the page without explicit warning by the browser that that is the case.
There may be browser specific workarounds (aka bugs), but relying on them for your page to work is not a good idea.
The best "workaround" is likely to just contact the people hosting the widgets and inform them about your problem, or if possible just plain hosting the widgets on your own secure site.
Hey guys, I have developed a small site that i would like to embed into a tab on a facebook page.
Previously I used this code to load in an iframe, it worked great:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Link 1</a> | <a class="red" onClick="outside_location.setInnerFBML(link_2);" style="cursor: pointer;">Link 2</a>
<div id="outside_location"></div>
<fb:js-string var="link_1"><fb:iframe width="760" height="1280" frameborder='0' src='http://www.WebWhispers.in' /></fb:js-string>
<fb:js-string var="link_2"><fb:iframe width="760" height="1280" frameborder='0' src='http://google.com/' /></fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = d
document.getElementById('outside_location');
</script>
However, it has stopped working. I dont think facebook allows iframe inside of pages, only applications.
How can I load this page in without learning FBML? The site uses Jquery so I cant use FBML anyway.
I know applications can use iFrames, can I make it an application and then embed the application into a page tab somehow?
No. Tab pages can not contain iFrames. They must be written using FBML and FBJS.
One reason for this is that Facebook does not want to enable Tab pages to detect who looks at them. All requests (including images) on tab pages are proxied through Facebook for this reason. If iframes were allowed then the application would be able to detect who looked at it, which would present a privacy issue for Facebook users.
This is either a policy change by Facebook or, more likely, a bug. I say it's unlikely to be a policy change as it throws a script error, whereas a policy change would more likely strip the code out before it's rendered.
There's a bug report you can add votes to and follow here.