Facebook Page Tab external URL - facebook

What should contain a HTML file to display it on a Facebook Page's Tab. I have added the tab, but I get blank page, I have tried everything, searched hours, my URL is HTTPS, so I really don't know...
Could you paste anybody a full HTML code that works, appears in a Page's Tab with an app? Thanks!

That would be the minimum, it definitely works:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
hello there
</body>
</html>
As you can see, nothing fancy there. Without any test URL, we can only tell you to open the browser console and search for errors.

We found the answer, the server doesn't enable the iframing, so what I tried was good, but
Console's JavaScript error: Load denied by X-Frame-Options: https://www.... does not permit cross-origin framing.
So we contacted to our hosting company to solve this.
UPDATE: Hosting support added the following code to my .htaccess file: Header always unset X-Frame-Options, what solved my problem.

Related

using .php with .css or some thing better?

I have a log in page for my web site. The log in file is "index.php" this will be the first page you come to when comming to my site. The rest of my site is HTML with a style.css file providing the look for my site. Now my questions is how do I get my index.php file too look like the rest of my web site?
Right now when you come to mydomain.com/index.php it is just a white page with a log in and password box. I would like my log in page to look like the rest of my web site. Can some one please refer me as how to do this?
I have other .php files that would also need to be linked with the .css such as register.php and so forth. thanks guys.
If there is a different/better method of doing what I need please feel free to chime in, I'm all ears at this point I've been trying to do this for 2 days.
Like you would do in every other html page you will have to link the file the same way.
I guess that you have already seen that in every php file there is html code?
Just stay out of the php brackets
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body
<?php
"php code in here"
?>
</body>
</html>
If you don't find the usual html markup somewhere search for a include function in the php file.
Maybe the html header is in other php file and it is being called from there.
They would be included like this
include '_header.php';
You can use the CSS file, similar to how you use it in your HTML files. You can either post the CSS tag below your PHP code, or you can use an echo "cssTagHere"; call within your PHP code.
If you're using a login page, though, are you maintaining that security with the rest of your site by using PHP on your other pages?

Facebook iFrame canvas app PHP sessions issue

I've been working on a problem for the last day and a half now and have still yet to find a solution.
When visitng my game on facebook (which is in facebook's iFrame) php sessions don't work. This is for IE and Safari. Chrome works fine.
I've already read all the posts on stack about this problem, which seems to be down to third party cookie security and needing interaction with the iFrame first. There was a workaround by making javascript post some form data to the iFrame first, but this seems to have been 'fixed' in the latest versions of the browsers very recently as this no longer works.
I even tried implementing a start page that would require them to click a link first (in the iFrame) to load another page which would then create the session. But even THAT doesn't work.
I'm also having trouble even loading new pages in the iFrame using javascript, which seems to always cause infinite loop refreshes.
And no, P3P headers do NOT solve it.
Does anyone have a solution to this problem? I can't be the only one with it, considering how many facebook apps exist!
I came across this problem using a client that had "Accept third party cookies" disabled. My solution was to force PHP to embed the session ID into the URI by putting this line at the start of each page:
ini_set('session.use_trans_sid', true);
As the URLs are in iframe within Facebook the SID is not seen in the top window.
For IE, you will need the P3P Headers set. Something like:
<?php header('P3P: CP="CAO PSA OUR"'); ?>
Safari blocks 3rd-party cookies by default. Currently, the only work-around that is working for me is to "pop-up" a new window to set the cookies. I have something like this:
<script type="text/javascript">
function safariFix(){
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1){
window.open('https://yourdomainname.com/safari.php', 'Safari Fix','width=100,height=100');
}
}
</script>
And safari.php will have this:
<?php
setcookie("safari_test", "1");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Safari Fix</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
window.close();
});
</script>
<body>
Since Safari does not accept third-party cookies by default, we are forced to open this window.
This window will automatically close once we have set the cookies.
</body>
</html>
PROBLEM: This won't work if users have "block pop-ups" enabled in Safari. If anyone has a better solution for this, inform me ;)

facebook application FBML: error code 405 when changing app from Iframe to FBML

I'm trying to write a simple facebook application using FBML.
when I configure my application to work as an IFrame and I view the source
i see the following:
<html>
<head>
</head>
<body>
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://url/file.swf'
width='340' height='270' />
</body>
</html>
When I change my application to be an FBML application i get the following error:
Application Temporarily Unavailable
Received HTTP error code 405 while loading http://xpofb.xpogames.com:5080/xpogame- servlet/Canvas?
Sorry, the application you were using is experiencing a problem. Please try again later.
Any ideas?
Try to put just plain text to FBML so you can be sure that it is not some FBML tag that is causing problem.
Facebook may act funny if your Canvas URL doesn't end with a slash. Try to map your controller to a directory and try again.
Also FBML apps don't support html, head, body tags, so that would be your next error message.
Welp... after a lot of research on the internet i read that some people added rewrite rules to /foo will be /foo.html and that would work.
When I tried to add rewrite rules in my case it didn't resolve the issue.
moving from a servlet to a jsp page did resolve the issue.
the Servlet was at url/Canvas
rewriting it to url/Canvas.html did not resolve the issue
creating a new jsp file at url/canvas.jsp resolved the issue.

(ASP.NET 2008) opens the file within browser rather than showing a Open/SaveAs dialog

we have image files in IIS6.0 server, and wanted to open in browser using ASP.NET2008.
My problem is that it always shows the open/saveas dialog, but what I wanted is, it should open the file in the browser directly. we are using ASP.NET2008. It would be great if you provide the sample code.
thanks
You could try to embed those file(s) into a simple HTML page. This will make browsers display it without prompting the user.
Making your code output bare bones like:
<html>
<head><title>YOUR_IMAGE_NAME</title></head>
<body>
<img src = 'YOUR_IMAGE' alt='YOUR IMAGE DESC' />
</body>
</html>
to the browser should be sufficent.
HTH

How to prevent favicon.ico requests?

I don't have a favicon.ico, but my browser always makes a request for it.
Is it possible to prevent the browser from making a request for the favicon from my site? Maybe some META-TAG in the HTML header?
I will first say that having a favicon in a Web page is a good thing (normally).
However it is not always desired and sometime developers need a way to avoid the extra payload. For example an IFRAME would request a favicon without showing it.
Worst yet, in Chrome and Android an IFRAME will generate 3 requests for favicons:
"GET /favicon.ico HTTP/1.1" 404 183
"GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 197
"GET /apple-touch-icon.png HTTP/1.1" 404 189
The following uses data URI and can be used to avoid fake favicon requests:
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
For references see here:
https://github.com/h5bp/html5-boilerplate/issues/1103
https://twitter.com/diegoperini/status/4882543836930048
UPDATE 1:
From the comments (jpic) it looks like Firefox >= 25 doesn't like the above syntax anymore. I tested on Firefox 27 and it doesn't work while it still work on Webkit/Chrome.
So here is the new one that should cover all recent browsers. I tested Safari, Chrome and Firefox:
<link rel="icon" href="data:;base64,=">
I left out the "shortcut" name from the "rel" attribute value since that's only for older IE and versions of IE < 8 doesn't like dataURIs either. Not tested on IE8.
UPDATE 2:
If you need your document to validate against HTML5 use this instead:
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
Just add the following line to the <head> section of your HTML file:
<link rel="icon" href="data:,">
Features of this solution:
100% valid HTML5
very short
does not incur any quirks from IE 8 and older
does not make the browser interpret the current HTML code as favicon (which would be the case with href="#")
You can use the following HTML in your <head> element:
<link rel="shortcut icon" href="#" />
I tested this on a forced full refresh, and no favicon requests were seen in Fiddler. (tested against IE8 in compat mode as IE7 standards, and FF 3.6)
Note: this may download the html file twice, so while it works in hiding the error, it comes with a cost.
You can't. All you can do is to make that image as small as possible and set some cache invalidation headers (Expires, Cache-Control) far in the future. Here's what Yahoo! has to say about favicon.ico requests.
if you use nginx
# skip favicon.ico
#
location = /favicon.ico {
access_log off;
return 204;
}
Put this into your HTML head:
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC">
This is a bit larger than the other answers, but does contain an actually valid PNG image (1x1 pixel white).
The easiest way to block these temporarily for testing purposes is to open up the inspect page in chrome by right-clicking anywhere on the page and clicking inspect or by pressing Ctrl+Shift+j and then going to the networking tab and then reloading the page which will send all the requests your page is supposed to make including that annoying favicon.ico. You can now simply right click the favicon.ico request and click "Block request URL".
All of the above answers are for devs who control the app source code. If you are a sysadmin, who's figuring out load-balancer or proxying configuration and is annoyed by this favicon.ico shenanigans, this simple trick does a better job. This answer is for Chrome, but I think there should be a similar alternative which you would figure out for Firefox/Opera/Tor/any other browser :)
You can use .htaccess or server directives to deny access to favicon.ico, but the server will send an access denied reply to the browser and this still slows page access.
You can stop the browser requesting favicon.ico when a user returns to your site, by getting it to stay in the browser cache.
First, provide a small favicon.ico image, could be blank, but as small as possible. I made a black and white one under 200 bytes. Then, using .htaccess or server directives, set the file Expires header a month or two in the future. When the same user comes back to your site it will be loaded from the browser cache and no request will go to your site. No more 404's in the server logs too.
If you have control over a complete Apache server or maybe a virtual server you can do this:-
If the server document root is say /var/www/html then add this to /etc/httpd/conf/httpd.conf:-
Alias /favicon.ico "/var/www/html/favicon.ico"
<Directory "/var/www/html">
<Files favicon.ico>
ExpiresActive On
ExpiresDefault "access plus 1 month"
</Files>
</Directory>
Then a single favicon.ico will work for all the virtual hosted sites since you are aliasing it. It will be drawn from the browser cache for a month after the users visit.
For .htaccess this is reported to work (not checked by me):-
AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"
A very simple solution is put the below code in your .htaccess. I had the same issue and it solve my problem.
<IfModule mod_alias.c>
RedirectMatch 403 favicon.ico
</IfModule>
Reference: http://perishablepress.com/block-favicon-url-404-requests/
Elaborating on previous answers, this might be the shortest solution from the HTML file itself:
<link rel="shortcut icon" href="data:" />
Tested working, no error messages or failed requests on Chrome Version 94.0.4606.81
Just make it simple with :
<link rel="shortcut icon" href="#" type="image/x-icon">
It displays nothing!!!!
In Node.js,
res.writeHead(200, {'Content-Type': 'text/plain', 'Link': 'rel="shortcut icon" href="#"'} );
Personally I used this in my HTML head tag:
<link rel="shortcut icon" href="#" />
I need prevent request AND have icon displayed i.e. in Chrome.
Quick code to try in <head>:
<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEU0OkArMjhobHEoPUPFEBIu
O0L+AAC2FBZ2JyuNICOfGx7xAwTjCAlCNTvVDA1aLzQ3COjMAAAAVUlEQVQI12NgwAaCDSA0888G
CItjn0szWGBJTVoGSCjWs8TleQCQYV95evdxkFT8Kpe0PLDi5WfKd4LUsN5zS1sKFolt8bwAZrCa
GqNYJAgFDEpQAAAzmxafI4vZWwAAAABJRU5ErkJggg==" />
In our experience, with Apache falling over on request of favicon.ico, we commented out extra headers in the .htaccess file.
For example we had
Header set X-XSS-Protection "1; mode=block"
... but we had forgotten to sudo a2enmod headers beforehand. Commenting out extra headers being sent resolved our favicon.ico issue.
We also had several virtual hosts set up for development, and only failed out with 500 Internal Server Error when using http://localhost and fetching /favicon.ico. If you run "curl -v http://localhost/favicon.ico" and get a warning about the host name not being in the resolver cache or something to that effect, you might experience problems.
It could be as simple as not fetching (we tried that and it didn't work, because our root cause was different) or look around for directives in apache2.conf or .htaccess which might be causing strange 500 Internal Server Error messages.
We found it failed so quickly there was nothing useful in Apache's error logs whatsoever and spent an entire morning changing small things here and there until we resolved the problem of setting extra headers when we had forgotten to have mod_headers loaded!
Sometimes this error comes, when HTML has some commented code and browser is trying to look for something. Like in my case I had commented code for a web form in flask and I was getting this.
After spending 2 hours I fixed it in the following ways:
1) I created a new python environment and then it threw an error on the commented HTML line, before this I was only thrown error 'GET /favicon.ico HTTP/1.1" 404'
2) Sometimes, when I had a duplicate code, like python file existing with the same name, then also I saw this error, try removing those too
If you are not using HTML and it's auto-generated by Flask or some frameworks you can always add a dummy route in the app to just return dummy text to fix this issue.
Or
.
.
.
you can just add the favicon :)
Eg for Python Flask Application.
#app.route('/favicon.ico')
def favicon():
return 'dummy', 200
I solved this problem by using the Content-Security-Policy HTTP response header. By using this, is possible to block the browser from making further media queries like images (other types are also possible). I added the following header to the response:
Content-Security-Policy: img-src 'none'
The problem is it will block ALL image queries. If your HTML has any image, they won't be loaded. In my case it was very likely a bug in Firefox because the browser was requesting the favicon.ico for a response whose Content-type is text/xml!
It also depends on the browser implementing this feature as is enforced on the client side.
Check https://content-security-policy.com for a complete guide on CSP.
Cheers!
You could use
<link rel="shortcut icon" href="http://localhost/" />
That way it won't actually be requested from the server.