I am experiencing trouble in Facebook brand tab, for my client's Facebook page.
I have created a tab inside Facebook Page.
I have HTML code for the same.
In this code i have used iframe to showcase video from Youtube.
When i open this html file with google chrome from my desktop entire design of 810 x 800px is visible with 'youtube video' and video gets played.
but the moment I create a new tab inside Facebook page, give my app id and url only background image is visible and no video!
All my content comes from SSL certified site.
Here is the code i am using.
enter code here
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Kich Video</title>
<style type="text/css">
body {
margin:0;
background-color:#f0f0f0;
}
#container {
width:810px;
height:695px;
padding-top:115px;
padding-left:260px;
margin:0px;
background-image:url(https://spotlightcommunication.com/work/kichtvad/background.jpg);
background-repeat:no-repeat;
}
#container object {
width:560px;
height:315px;
}
</style>
</head>
<body style="margin:0">
<div id="container">
<iframe width="500" height="281" src="http://www.youtube.com/embed/4CjayX3GNmU?rel=0"
frameborder="0" allowfullscreen></iframe>
</div>
<div style="padding-left:0px;">
<a href="http://www.crowdmultiplier.com"><img
src="http://i1160.photobucket.com/albums/q495/chandansolanki/CMPowered810x60_Px.jpg"></a></div>
</body>
</html>
I have currently keep this tab alive on Facebook page.
there you can see, only background image is visible and not video.
Facebook page link Facebook.
Tab marked as Kich TV Ad needs to show this video.
Can anyone help me on this?
Kirit JAsani
All my content comes from SSL certified site.
Well, you always need to use https. If you take a look in the Browser console, it will tell you that the youtube link got blocked because it´s unsafe content (http instead of https). Use https for ALL absolute URLs. That goes for the youtube src and for the photobucket src.
Related
I have this TWDC(tableau web data connector) app hosted on our company's private cloud.
Every app that are deployed there are accessed after the user logs in via a Single Sign On login page, then redirected to the app.
When I try to use my web data connector on my Tableau Desktop it gets stuck on an infinite loop, after i push the button which does tableau.submit().
I've set the debugger and found out, that when I push the button, the page that is loaded is not the index.html of my WDC but the redirect page from the SSO login.
I have no idea why is this happening, doesn't make much sense, because it loaded the index.html in the first place, but after i push this button it gets back to somewhere in the middle of SSO login and redirect page.
Just a note: It works fine on the simulator.
Any thougths on this?
Here's my code:
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TableauAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/tableauwdc-2.3.latest.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<button id="submitButton">Send</button>
<br />
<br />
<textarea id="log" style="border: 1px solid #000; width: 100%; height: 700px;"></textarea>
<br />
<div id="placeholder"></div>
</body>
</html>
JavaScript
$(document).ready(function() {
try {
$("#submitButton").click(function() { tableau.submit() });
var myConnector = tableau.makeConnector();
// these are function which are not important for this question;
myConnector.getSchema = fnGetSchema;
myConnector.getData = fnGetData;
tableau.registerConnector(myConnector);
} catch (e) {
logger("ERROR: " + JSON.stringify(e));
}
});
This isn't a problem with your code. With the WDC there is an interactive phase where the user is shown a screen and can interact (this is your first SSO sign-in) but then there is a non-interactive (Get Data) phase where Tableau will try to retrieve the data and never shows the SSO login to the user. See docs. Given this page is loaded without user interaction it can't/shouldn't have SSO security on it.
I am currently integrating a HTML5 app into Facebook and testing the iFrame mechanism. I am self-hosting the game content however when I point the Facebook app system to the content, the page is not being displayed.
My hosted page is a simple Hello World app for now as illustrated below, and can be found at: https://bluebeck.space/alienz/fb/
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>Alienz</title>
</head>
<body>
<div><p>Hello, World!</p></div>
</body>
</html>
The app configuration in the Facebook app developer console appears as:
I have used the following HTTPS url which has a valid SSL certificate as required:
The app page contents are empty and upon inspection of the Facebook app page DOM, it is apparent that the iframe contents have been stripped from the hosted page:
My expected result would be that the contents of the self-hosted webpage would be visible in the Facebook app page. The actual result is that the contents are empty and the DOM contains an iframe tag with empty head and body tags.
Thanks to #cbroe I was able to pin this down to an X-Frame-Options error. My solution has been to include the following php headers to the page:
<?php
header('X-Frame-Options: ALLOW-FROM https://apps.facebook.com/');
header('Content-Security-Policy: frame-ancestors https://apps.facebook.com/');
?>
I have this next code, but I cant make the icon show nor the image on the iphone render. How could I fix this problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="contruccion">
<img id="Construccion" width="801" height="601" name="Construccion" alt="propiedad de CharLi Guatemala" src="images/siteCon.png"></img>
</div>
</body>
</html>
Safari on iOS does not support the favicon.ico file. You should create a touch icon, as defined by Apple.
The easiest way to get the job done is to create a 152x152 picture named apple-touch-icon.png and placed at the root of your web site. The iOS devices will find it and use it in bookmarks and for link on homepage.
You can also use this favicon generator to create all iOS pictures and HTML declarations at once. Full disclosure: I am the author of this site.
I'm working on a simple FB app of a type I've done many times before. It works perfectly outside FB but once it's in FB, the youtube embed simply doesn't load.
I pulled the code out into a test file, and it still won't load. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<iframe width="669" height="391" src="http://www.youtube.com/embed/48P1jc5tyTw" frameborder="0" allowfullscreen></iframe>
</body>
Absolutely nothing displays when this is loaded as an app on a FB page. The FB debugger says "Can't Download Could not retrieve data from URL."
Any ideas?
Try changing the src of the iframe to "https://...".
Since Facebook is served over HTTPS, your browser will block any content from loading on the page that's not over HTTPS too. Fortunately, youtube supports https versions of their URLs.
We are looking at allowing users to share a link via a few different social media networks. The Tweet, Pin it and LinkedIn share button are each working, but the issue we are encountering revolves around the Facebook Send button.
The button appears to load fine, but when clicked on it puts up a message that "The page at www.website.com/page1.jsp?order_nbr=123456 could not be reached".
When using the object debugger # the Facebook Developers site, something interesting happens:
Trying to debug www.website.com/page1.jsp?order_nbr=123456 the Response code of the scrape is a 502 error (URL returned a bad HTTP response code).
Trying to debug www.website.com/page1.jsp we get a 200 (normal response).
Trying to debug m.website.com/page1.jsp or m.website.com/page1.jsp?order_nbr=123456, both return the same 502 error.
It appears like there is an issue when there are parameters in the URL after the ?, but then we are wondering if there is something else that needs to be set, or if this might be a server configuration issue.
If there are technical explanations of how facebook scrapes a page, or why their send button might be getting a 502 error, while the others mentioned above are operating normally? Any insight would be appreciated.
Here is the bare bones code we have stripped things down to in order to test on the mobile site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Testing - Order #123456</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/icon.png" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<meta name="format-detection" content="telephone=no" />
<link href="/css/test.css" rel="stylesheet" type="text/css" />
<meta property="og:title" content="Test - Order #123456" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://m.website.com/page1.jsp?order_nbr=123456"/>
<meta property="og:image" content="../../images/mobile_files/logo.png" />
<!--asynchronous loader-->
<script src="../../js/init.js" type="text/javascript"> </script>
</head>
<body>
<DIV id="fb-root"></DIV>
<DIV id="menu">
<DIV style="float: left; padding:2px; "><fb:send ref="top_left_m" ></fb:send></DIV>
<DIV style="float: left; padding:2px;">Tweet </DIV>
<DIV style="float: left; padding:2px;"> <a data-pin-config="none" data-pin-do="buttonPin" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fm.website.com%2Fjsp%2Forder.jsp%3Fjob_order_id%3D%3C%25%3DjobOrderId%25%3E&media=http%3A%2F%2Fm.website.com%2Fimages%2Fmobile_files%2Flogo.png&description=Testing..."><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a> </DIV>
<DIV style="float: left; padding:2px;"><script type="IN/Share"></script> </DIV>
<DIV style="clear:both;"></DIV>
</DIV>
</body>
</html>
UPDATE: The output of debugger is different than it was the other day, I believe due to a redeploy and/or cached (server and/or local)previous tests, however two main issue remain.
.#1 - The main site is scraping fine (Return code 200). The mobile site returns a 502 and returns nothing.
.#2 - If I am not logged in to Facebook, a pop-up appears asking me to sign in. Once I do, the window disappears completely. If I am logged in to Facebook, a pop-up appears briefly and then disappears completely.
.#3 - Parameters in the URL have been ruled out as an issue.
Based on the nature of the biggest issue (#2)... I am going to change my question to be...
"Why does the Facebook Send button pop-up window close?"
(I will break #1 into a separate question if that's more appropriate, but I think the entirety of my problems are best served by leaving everything in one question )
Just in case it's relevant, here is the JS asynch loader:
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
add = function(url, id) {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
fjs.parentNode.insertBefore(js, fjs);
};
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk');
// Pinterest
add('http://assets.pinterest.com/js/pinit.js');
// Twitter SDK
add('//platform.twitter.com/widgets.js', 'twitter-wjs');
// LinkedIN
add('//platform.linkedin.com/in.js');
}(document, 'script'));
The issue is that Facebook sends a Range Request as part of the request. Fails if within the range (0-52K), however pages bigger than this range scrape fine. Seems older versions of Oracle have an issue dealing with the range, so you need to strip Facebook's range request out of the request headers.