link A >> 301 >> link B
The Facebook link preview displays data from link A. I want it to display data from link B.
How can I fix this?
I used this code for the redirect.
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body>
<script type="text/javascript">
window.location.replace("http://www.yahoo.com");
</script>
</body>
</html>
Thank you
In general Facebook should be following the redirects because the users will be redirected and facebook does not want to present unexpected results causing disruptive experience.
Since 301 is permanent redirect you could also use the final URL, I presume.
Also, take a look at https://developers.facebook.com/tools/debug/ - enter the URL and it will display what facebook crawler is doing.
Related
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 am using the smtp sendmail function, in the anchor <a> tag href attribute we have reference other than http:// ie something like below
transauth://some other data
but the gmail is not creating the hyperlink of transauth but creating of http://gmail.com ,Any solutions regarding this.
Gmail strips links that use custom uri schemas.
A work around however is that if you have a website somewhere you can host a simple redirect page that will redirect you to the correct schema.
This is a pretty bullet proof redirect here I copied from this answer to another question
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1;url=http://example.com">
<script type="text/javascript">
window.location.href = "http://example.com"
</script>
<title>Page Redirection</title>
</head>
<body>
<!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
If you are not redirected automatically, follow the <a href='http://example.com'>link to example</a>
</body>
</html>
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.
This is my first time posting a question on this site, but certainly not the first time finding answers in it.
I have used stackoverflow as a resource to fix several issues I've faced with my new blog, that is until last night, when I found this issue which I just can't fix.
When I try to share the home page of my blog, I don't get the proper image specified in the og:image tag... once I check my site via de FB debugger, it shows me this:
https://developers.facebook.com/tools/debug/og/object?q=ivanfuentes.com
Curiously enough, I do not find any issues when I check for a page, or a post:
https://developers.facebook.com/tools/debug/og/object?q=ivanfuentes.com%2Fvideos%2F
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fivanfuentes.com%2Fthe-popularity-contest%2F
So, I know it's an issue that is generated in the home page only, but during the last 18 hours, have been unable to find it.
I have OG meta tags specified dinamically via a wordpress plugin... currently, it's "Facebook AWD", but I've had several other Facebook sharing, all-in-one's, and OG plugins, which give me the same results in the debugger, which makes me think I messed up somewhere else. I have no embarrassment in admitting I'm quite a newbie, so it's highly likely I messed up while trying to modify some code... probably when I added a few lines to make the site IE compliant?
Hope I gave enough information, and someone gets to help me, as this is not only about the proper image being displayed on a Facebook link, but rather about me likely having a mess in my code, and that could (WILL) mean trouble once I make any mods/updates to my site in the future.
Thanks for the time!
Your html is a complete mess and that's why the debugger is complaining.
Visiting your page and looking at the code I can see this:
<!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" xml:lang="en" lang="en">
<div id="fb-root"></div>
<script>
...
</script>
<!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:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div id="fb-root"></div>
<script>
...
</script>
<title>Ivan Fuentes Hagar</title>
Two problems there:
The sdk code is inserted twice
In both cases there's a div placement before the body
In the debugger result for this page when clicking the bottom link (Scraped URL: See exactly what our scraper sees for your URL) you can also see broken html but in another variation:
<!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" xml:lang="en" lang="en"><body>
<div id="fb-root"></div>
<script>
...
</script><meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
...
</script><title>Ivan Fuentes Hagar</title>
There problems here:
The body definition is right after the html
There's no head definition
All of the tags which suppose to live inside the head are inside the body
The sdk script is loaded inserted twice
In both cases I found 3 occurrences of the <div id="fb-root"></div>.
As you can see you have some fixin' up to do with the html output of your wordpress.
I'm not sure why the outputs is different for the debugger, I thought that maybe due to the user agent string, but trying curl --user-agent "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" "http://ivanfuentes.com/" returns the exact results as with the browser.
I'm experiencing problems adding a like button to an iFrame based page within my FB fan pages tabs. I'm using the JavaScript SDK and the Open Graph to specify the page I'd like the user to "like" (which is the current page within my FB pages).
The page is iFrame based, is an app in FB, and is accessed via the FB Page tabs of my FB Page. The problem is that Facebook is assigning the Like to my FB Page itself (my FB page homepage if you will) rather than the page In question (my test page – it’s set up as an app and appears in my FB Pages tabs under the name “og test”).
I’ve tried running the target page for the iFrame through the FB linter and its giving a strange error saying I’ve supplied the Open Graph Type of “Other” (I haven’t, I’ve supplied “website” in my META tag) see below:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.airport-parking-quote.co.uk%2Ffacebook%2Fog-test.php
Also, from looking at the debug page it seems that Facebook is either ignoring the QueryString in my “og:url” value and therefore only seeing my FB page’s vanity URL, or there is some kind of block on being able to Like iFrame based app pages.
Can anyone shed any light on this? I thought from this article it would be possible to achieve what I am trying to do:
http://www.insidefacebook.com/2010/09/09/like-buttons-app-content/
The code for the iFrame target page is:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Test Like</title>
<meta property="og:title" content="OG Test"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.facebook.com/EssentialTravel?sk=app_275969292428556"/>
<meta property="og:image" content=""/>
<meta property="og:site_name" content=""/>
<meta property="fb:admins" content="100002424161307"/>
<meta property="fb:app_id" content="275969292428556"/>
<meta property="og:description" content="OG test through canvas page"/>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '275969292428556',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true // enable OAuth 2.0
});
</script>
Test Page<br>
<script src="http://connect.facebook.net/en_US/all.js#appId=156081301143077&xfbml=1"></script><fb:like href="https://www.facebook.com/EssentialTravel?sk=app_275969292428556" send="false" width="450" show_faces="false" action="recommend" font=""></fb:like>
</body>
</html>
Anybody have any ideas?
Thanks,
Pjordanna
Unfortunately you can't set up a like button for an actual tab on a page.
As you have found out, trying to make a like button using a url such as https://www.facebook.com/EssentialTravel?sk=app_275969292428556 will just make a like button for the page not the individual tab.
The best way to make a like button for that specific tab would be to just use the URL of the app sitting on your server eg. http://YOURDOMAIN.com/YourAppDirectory