I am trying to implement the Facebook Page Plugin and it works fine on all browsers except Safari for both iOS and MacOS
Here's the code I'm adding (straight from the docs - https://developers.facebook.com/docs/plugins/page-plugin)
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v15.0&appId=123456789012345&autoLogAppEvents=1" nonce="Dbo7zqru"></script>
and
<div class="fb-page" data-href="https://www.facebook.com/myfacebookhandle" data-tabs="timeline" data-width="" data-height="550" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"></div>
All I get is spinning loading graphic and various console errors like
Refused to display
'https://www.facebook.com/login/?next=https%3A%2F%2Fwww.facebook.com%2F'
in a frame because it set 'X-Frame-Options' to 'DENY'.
Any ideas why Safari has an issue but no other browsers, and what I can do to fix it?
Thanks
EDIT
Safari -> Preferences -> Privacy
Then unchecking "Hide IP Address from trackers" allows it to work on MacOS
Related
I'm trying to use the plugin
https://developers.facebook.com/docs/plugins/page-plugin/
to load the timeline of a page on a php site
I also created at https://developers.facebook.com
an app ... and I put it live
but nothing has changed.
it's strange because on some computers it works, on others it doesn't
how it doesn't work on mobile.
I don't understand why.
the error message makes me think that the problem is browsers blocking the plugin and I tried to follow this, to catch the problem.
Facebook Sdk blocked : How to detect if a user is using Ghostery?
the code taken from fb is the following:
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v15.0&appId=536891684570335&autoLogAppEvents=1" nonce="Y1MwGcHs"></script>
<div class="fb-page" data-href="https://www.facebook.com/autodriveskicup/" data-tabs="timeline" data-width="500" data-height="725" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/autodriveskicup/" class="fb-xfbml-parse-ignore">
Autodrive Ski Cup
</blockquote>
</div>
the result can be seen here:
www.autodrive.org
Can anyone help me?
I just want the plugin to load the timeline
or alternatively be able to read the error and hide the fb div and show an alternative image when the plugin doesn't work
I need a embedded facebook page plugin.
But the code generator of facebook doesn't work. When i give the url of the facebook page, the generator doens't give the code for this page.
Also doesn't appear the page in the preview modus.
The facebook page is: https://www.facebook.com/Tapas.Enschede/
The code generator is on this page.
https://developers.facebook.com/docs/plugins/page-plugin/
For other facebookpages the code generator works perfect. I have no idea what the problem is.
I really appreciate any help.
I had the same issue today.
Check to see if:
Your page is unpublished.
You have Age Restriction (which was my issue) activated. Any age restriction above 13+ will cause the page plugin to not work.
You have Country Restrictions activated.
Any of the above will cause the page plugin not to display.
You can find these settings in the General tab in your page settings.
In my case,I remove the heading (h4) from the class="fb-page".Working now.
Old Code
<div class="fb-page" data-href="https://www.facebook.com/PageTest/"
data-tabs="timeline" data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false" data-show-facepile="true">
<h4 class="center">Follow Us On Facebook</h4>
<blockquote cite="https://www.facebook.com/PageTest/" class="fb-xfbml-parse-ignore">Testing.</blockquote>
</div>
New Code
<div class="fb-page" data-href="https://www.facebook.com/PageTest/"
data-tabs="timeline" data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/PageTest/" class="fb-xfbml-parse-ignore">Testing.</blockquote>
</div>
I found it was due to some stale Facebook Cookies on my browser. Deleted the Facebook Cookies, refreshed and all worked great then
use data-show-posts="true" instead of data-tabs="timeline"
I have an html page in ionic that loads another html file from S3 using iframe. my ionic html looks like this:
<ion-view view-title={{header1}}>
<div class="item item-divider item-{{colorTheme}}">Privacy policy</div>
<ion-content class="padding has-header">
<iframe ng-src="http://backoffice.taralets.com.ph.s3-website-ap-northeast-1.amazonaws.com/partials/partial-privacyPolicy.html"
style="height:100%; width:100%;overflow:hidden;"
height="100%"
width="100%"></iframe>
</ion-content>
</ion-view>
After my initial testing, the html file from S3 is being displayed correctly. Here is the html file in S3:
<div class="text-left">
<h2>Privacy Policy</h2>
<p>Apps Privacy Policy</p>
</div>
The problem that I am having is that when I change the content of the html file in s3 - say change "Apps Privacy Policy" to "This is a Privacy Policy", the display in my ionic app is still showing the original content "Apps Privacy Policy". I am debugging this in the browser using ionic serve. Even if I clear the Application site data when doing "inspect" in chrome, the problem still exists. Is there a cache somewhere that's causing this problem? Note that if I try to access the page from our website, it is reflecting the updated content.
Use the below code for disabling cache for the specific page
<ion-view cache-view="false">
you can disable caching globally by using
$ionicConfigProvider.views.maxCache(0);
in your configurations
I have a fairly simple jQuery mobile app, which works fine as a web app (tested in browsers on desktops/smartphones) but when porting it to android using phonegap, I have one major issue. It occurs both on a real phone and in an AVD.
there's a form in the app, like:
<div data-theme="a" data-role="dialog" id="a-form">
<div data-role="content">
<h3>...</h3>
<form action="http://a-live-site.com/a-form.php" method="post">
...
<div data-role="fieldcontain">
<button type="submit">Submit</button>
</div>
</form>
</div>
</div>
Its response content loads perfectly in the browser (the action is a relative link there), but within phonegap I just get a white screen and the hardware back button exits the app instead of the usual step back in history. The puzzling thing is that the request actually gets through. The server side code triggers an email, so I know the server is getting the request. I have added the appropriate <access /> rules in the phonegap.xml file, but I'm not sure that's enough.
EDIT: the form is in static content so, in phonegap, it's loaded by file:// and shouldn't have cross-domain issues.
The problem was due to data-role="dialog" in the result. Using page fixed it. It only broke in phonegap and phonegap's logs made it look like it was something else. A real PITA.
The following code works fine on www but opens a blank window in an internal network. That is, it'll work on http://www.foobar.com, but it'll die on http://myserver.foobar.com, where myserver is a private-facing web server.
<html>
<head>
<script Language="JavaScript">
function OpenWindow()
{
var popup=window.open("","");
popup.document.write("<H1>TEST</H1>");
}
</script>
</head>
<body>
<input type="button" value="button" onclick="OpenWindow();">
</body>
</html>
FYI, the code above works in IE, FireFox, Chrome, and Safari on the internal network. Only Opera (tested on version 11.50) doesn't like it. It basically ignores document.write, I think.
Is this a bug with Opera?
Thank you.
I've tried your code in Opera 11.52 running on localhost (converted to a JSP and running in a tomcat container) and it works fine.
Some things to check:
is your Opera set to block popups? (Ctrl+12 -> General -> Pop-ups)
is your Opera set to notify you when it blocks popups? (Ctrl+F12 -> Advanced -> Notifications -> Show notification for blocked pop-ups)
is your Opera set to block content from the domain you're having problems with, or are there "hidden" errors? (Right-click on page -> Edit site preferences...; then, look at your Pop-ups setting on General tab; tick "Open console on error" on Scripting tab; and check whether your proxy settings are correct on Network tab; finally, right-click on the page -> Block content -> Details..., and check whether anything might be blocked.
are your proxy settings correct (internal server seems to suggest a corporate network which is typically behind a proxy)?
is there a problem with your site certificate (often the case with intranet sites where you don't really need internal certificates)? (Ctrl+F12 -> Advanced -> Security -> Manage Certificates...
If it's none of the above, try posting your questions on the Opera forums, they're generally very helpful and very knowledgeable.
Cheers :-)