So I've recently registered a domain at my local domain registration service and I've made a campaign with a facebook like button.
The problem is that when I like my own page (click the facebook like button), the like button partly fetch information from the registration service homepage (title and content but not the URL).
I've check that my domain has propagated correctly and I bought it and fixed the DNS server settings days ago.
This is my page: http://saloonen.nu
Strange... It works for me. I liked you page, and on my FB profile, it shows url correct... Or i dont understand your question?
Next thing, why do you have 2 xmlns:fb="..." attributes in you html element?
Use FB debuger for issues like yourown http://developers.facebook.com/tools/debug
Another thing, validate you html ;-) > http://validator.w3.org/ > too bad HTML isn't strict programming language ;-)
EDIT
I found the problem, it is your content-type meta tag :
<meta http-equiv="Content-Type" content="text/html" charset="uft-8">
it should be :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Related
I have a specific page in my application where I want a user to be able to share certain selections they have made on a previous page, selection which I am receiving from my database.
So, for example - I have a user - Barry. I can access his name using ${user}.
He have been asked a question:
What is the first thing that comes to your mind when I ask about ${animals}
The answers they have chosen have been submitted to the DB, and I now want the answers to appear as the sharing description for Facebook. Obviously, the answer for each user will be unique - so I cannot hard code any information in here.
The code I have is the following:
<meta property="og:description" content="${user} thinks:%0A%0A<c:forEach var='animal' items='${animals}' >${animal} - ${animal.thoughts}%0A</c:forEach> />
When I view the source code for the page, I see this:
<meta property="og:description" content="Barry thinks:%0A%0AElephant - Gray%0ABird - Chirpy%0AMonkey - Funny%0ADog - Loyal />
However, when attempting to share the content on Facebook, the description is just empty, as though no description exists.
Unfortunately, this page is only available when the user is logged in, so using the Facebook scraper https://developers.facebook.com/tools/debug/ simply shows me the og data of the logged out landing page.
Am I missing something here?
EDIT
Based on #Cbroe's comments below, I have now adapted the code to be shared on a public page (IE one that you do not need to be logged in to see).
I have also set the description and image location as parameters in the URL - so that anybody who shares this page will see a description and an image relevant to them.
When running the full URL through Facebook scraper, I see the exact results I am after:
However, when actually sharing the link from the application, the dynamic info from the URL is being ignored.
<meta property="og:description" content="${param.description}" />
<meta property="og:image" content="${param.image}" />
My og:url contains the full URL, including the dynamic parameters. If anyone else has any ideas, I would love to hear them.
EDIT 2
Link that helped CBroe debug has been removed due to company policy. Example link provided in my answer.
With massive thanks for #CBroe for baring with me through this process and helping me out in the comments, I have now got a solution to this problem.
Firstly, I created a client facing page that did not require the user to be logged in in order to view. This would act as the page that the dynamic content would be shared from.
The code that I have now looks something like this:
Meta tags
<meta property="og:title" content="My Title" />
<meta property="og:url" content="${pageUrl}" /> // generates FULL URL including all parameters
<meta property="og:description" content="${param.description}" />
<meta property="og:image" content="${param.image}" />
Sharing generator (using jQuery)
var currentLink = encodeURIComponent(window.location.href); // NB to use encodeURIComponent instead of just encodeURI
var tWindow;
$('.facebookShare').on('touchstart click', function(){
tWindow = window.open('about:blank', 'sharer', 'toolbar=0,status=0,width=548,height=325');
tWindow.location.href = 'https://www.facebook.com/dialog/share?app_id=${facebookAppId}&display=popup&href=' + currentLink;
});
The link that was then used to share the page looked something like this:
https://[myURL]?description=My%20favourite%20animals:%20Elephant%20-%20gray%20%7C%20Dog%20-%20Cute%20%7C%20Cat%20-%20Cant%20be%20trusted%20%7C%20Leopard%20-%20Never%20changes%20its%20spots&image=[url_to_my_image]
Using this code, when sharing the page, the correct (and dynamic) image and description were generated each time.
Once again, big ups to #CBroe for helping me get to the bottom of this - and I hope that this can help somebody else in the future.
So, I'm building a website called "dagbok.nu", which is swedish for "diary now" :)
Anyway, when creating the Facebook application, it claims that the site URL is invalid as well as the app domain. For site url, I used "http://dagbok.nu" and for site domain, I used "dagbok.nu". Please don't reply (as I've seen others do on similar issues) that I should type the site url with the scheme and the domain without - that's exactly what I'm doing.
Right, so according to another question here, one could trouble shoot this functionality using FB's own URL scraper, so I did just that:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fdagbok.nu
And the reply: Error Parsing URL: Error parsing input URL, no data was scraped
Right, so now I can assume that the reason for it being considered invalid is because of FB not being able to scrape the URL. But why?
According to this question, one of the reasons seems to be that FB has deemed the URL insecure or "spammy". I've acquired this domain from a previous owner so this wasn't all that impossible. But when doing the same thing as Matthew in that post - i.e. trying to post in my timeline using the domain "http://dagbok.nu", I didn't get any information. The status box expanded as if to include a thumbnail and information about the link, but it only contained a "(No title)" text and nothing more.
So now I don't know what to do. I've tried to check the DIG and NS records from multiple servers around the web, and everyone seems to resolve it correctly, and I've had friends double check the URL from the states as well. I can't understand what's wrong and I have no idea how to ask someone at FB how to resolve this. Does anyone here have a good advice for this? Thanks in advance! :)
EDIT
When changing the domain to another domain that points to the exact same web server and document_root, it works! So this is definitely a problem with the domain "dagbok.nu" and not with the code on that page.
EDIT
When using the debug function above - I see no activity in the server log what so ever. Facebook doesn't even contact the server. When using the alternate url - the one from the last edit, it pops up in the logs as it should.
EDIT
I filed a bug report with Facebook, And their first response was that they were going to follow up. Now, a month later, I got an email that said "We are prioritizing bugs based on impact to the developer community. As this bug report has not received much attention from other developers, we are closing it so as to better focus on the top issues", and then they told me to go here to stackoverflow to try to solve my issue - but the issue is WITH THEM, and of course no one else have reported that my site doesn't work, it affects only me, and I haven't opened it yet due to this bug!
EDIT
I wanted to file a new bug report, but I can't even that now, since they are blocking bug reports with this URL as well!
I had to edit the URL - here is the new bug report
When Facebook tries to scrap your site for information, they send a call to your server with specific user agent called "facebookexternalhit"...
Facebook needs to scrape your page to know how to display it around
the site.
Facebook scrapes your page every 24 hours to ensure the properties are
up to date. The page is also scraped when an admin for the Open Graph
page clicks the Like button and when the URL is entered into the
Facebook URL Linter. Facebook observes cache headers on your URLs -
it will look at "Expires" and "Cache-Control" in order of preference.
However, even if you specify a longer time, Facebook will scrape your
page every 24 hours.
The user agent of the scraper is: "facebookexternalhit/1.1(+http://www.facebook.com/externalhit_uatext.php)"
Make sure it is not blocked by your server firewall
Look in your server log if it even tried to access your site
If you think this is a firewall issue look at this link
Your problem appears to be with your character encoding string. Your Apache server is currently sending the unsupported string latin1. You've defined your meta:content-type as iso-8859-1. See the w3c validator
From what I've seen, the Facebook parser will stop immediately if it encounters either an unrecognized character encoding string or a mismatch in character encoding strings between your header and meta tags.
The problem could be originating from either your httpd.conf or php.ini files. Change these to match your meta and restart Apache. Since the problem seems to be domain-specific, I'd check httpd.conf first.
Could your domain be blacklisted? Could you try messaging your url to someone, and see if Facebook gives you a "This message contains blocked content..." error?
For example:
If you don't provide certain minimum Facebook markup on your page, it will respond with "Error Parsing URL: Error parsing input URL, no data was scraped." I only looked at the homepage, but it appears that dagbok.nu contains no Facebook markup. I'm not sure what things must be present at minimum, but in my implementation, I assume the fb:app_id meta tag and the JavaScript SDK script must be there. You may want to take a look at http://developers.facebook.com/docs/guides/web/#plugins , particularly the Authentication section.
I discovered your question because I had this same error today for an unknown reason. I found that it was caused because the content of my og:image meta tag used an incorrect URL to the image I was trying to use. So as you add Facebook markup to your page, make sure your values are correct or you may continue to receive this message.
This doesn't seem to be a Facebook problem if you take a look at what I've discovered.
The results when testing it with W3C Online Validation Tool are 1 of 2 results.
Tested using: dagbok.nu but note http://dagbok.nu has no difference in test results. Remove the last forward slash in between tests.
Test: 1
Results: 72 Errors 0 Warning
Note: Shown here is a fragment of the source Frameset DOCTYPE webpage.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<NOSCRIPT><IMG SRC="http://svs.bystorm.se/rv?java=off"></NOSCRIPT><SCRIPT SRC="http://svs.bystorm.se/rvj"></SCRIPT>
<HTML STYLE="height:100%;">
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-8859-1">
Test: 2
Results: 4 Errors 1 Warning
Note: Shown here is a fragment of the source Transitional DOCTYPE webpage.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<title>Dagbok: Framsida</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Jonas Eklundh Communication (http://jonas.eklundh.com)">
<meta name="author-email" content="jonas#eklundh.com">
<meta name="copyright" content="Jonas Eklundh Communication #2012">
<meta name="keywords" content="Atlas,Innehållssystem,Jonas Eklundh">
<meta name="description" content="">
<meta name="creation-time" content="0,079s">
<meta name="kort" content="DGB">
Repeated tests loop these results when done a couple seconds apart indicating a page-redirect is occurring.
Security warnings are seen in Firefox and Chrome when visiting your site using these secure URL's:
https://dagbok.nu
https://www.dagbok.nu
The browser indicates the site should not be trusted because it's impersonating another site using invalid security certificate from *.loopiasecure.com
Recommendation: Check your .htaccess file, CMS Settings, page redirection, and security settings. Use the above source webpages to realize those file-locations / file-names that are being served to discover what's set incorrectly.
Once that's done, I think Facebook will be happy to then debug your webpage and provide additional recommendations.
Had the same problem and I discovered it was an incorrect IPv6 address in the AAAA records for my domain. The IPv4 record was correct, so the site worked in a browser but FB obviously check the IPv6 records!
This issue may also happen when Cloudflare is used. This is because Cloudflare protects the page from Facebook, which is then unable to collect the data, which in turn makes Facebook think the page is invalid.
My fix was:
Turn off Cloudflare for the page.
Scrape the page using Facebook's Dev Tools: https://developers.facebook.com/tools/debug/og/object
Click and let run the "Fetch new scrape information" button.
Re-enable cloudflare protection for the page.
You should then be able to continue to add the page where you needed.
I have two different products "Prod_A" and "Prod_B" on the same page, say
www.xyz.com/index1.html
On this page are two images for these products and small descriptions.
I need two like buttons for both products, both like buttons should refer to the page where they are located ( www.xyz.com/index1.html ), but both buttons should have different og:images and descriptions.
I have found some solutions for multiple buttons, but they refer to different pages and don't have pictures included.
thanks!
PS:
A small working example would be greate
Edit:
#DMCS said (see comment) that this is not possible. would it work, when I create a dummy page for the second product www.xyz.com/index2.html which would redirect to the page www.xyz.com/index1.html?
I this case I would have two pages is it then possible?
Yes this is possible, you need to create as many dummy pages as you have like buttons on your main page. Each of these pages includes all the OG tags you need including descriptions and images. You then use a redirect to take the user back to the page with the buttons.
Use the facebook like button tool to create the buttons using the url of each dummy page. Here's an example dummy page:-
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>This is a dummy page to hold the OG tags</title>
<meta property="og:title" content="This is the text the like button will show in FB when liked"/>
<meta property="og:site_name" content="the site name shown, the from name in FB"/>
<meta property="og:url" content="http://www,yoursite.com/dummp_01.html" />
<meta property="og:image" content="http://www,yoursite.com/dummyimage01.jpg" />
<meta http-equiv="refresh" content="0;url=http://www.redirect_to_url_that_has_all_the_like_buttons.com">
</head><body></body></html>
Could you add some variable to the address, and then do some switching using php?
For example
Like 1 links to: http://xyz.com/index.php?like1=true
Like 2 links to: http://xyz.com/index.php?like2=true
then in php on the index.php page just use an if statement...
<?php if (isset($_GET['like1']) { ?>
[your like 1 og tags here]
<?php } else if (isset($_GET['like2']) { ?>
[your like 2 og tags here]
<?php } ?>
NOTE Of course this solution would work also for other languages besides php
when I create a dummy page for the second product
www.xyz.com/index2.html which would redirect to the page
www.xyz.com/index1.html? I this case I would have two pages is it then
possible?
Yes, this is a good idea. The facebook linter does not run any javascript, so it would pick up the og tags properly. And when a user comes to that page, they will get redirected by javascript and see the page with the two products.
When the user click "Recommend" button on my page, I'd like to post on his wall title and part of the article from my page. How can I change the information which is send to the user wall/timeline? I've found a tip that I should add open graph meta tags, but when I set og:title and og:description in META:
<meta content="Title" property="og:title">
<meta content="Description" property="og:description">
nothing change.
Any other ideas? Or maybe I do sth wrong?
[Edited]
My code:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta content="Test1" property="og:title">
<meta content="website" property="og:type">
<meta content="*Link to my web page*" property="og:url">
<meta content="*Link to my image*" property="og:image">
<meta content="Description" property="og:description">
<title>Page Title</title>
[...]
</head>
In the Object Debugger I get such messages:
Warnings That Should Be Fixed
Inferred Property: The og:url property should be explicitly provided,
even if a value can be inferred from other tags.
Inferred Property: The og:title property should be explicitly
provided, even if a value can be inferred from other tags.
Inferred Property: The og:locale property should be explicitly
provided, even if a value can be inferred from other tags.
Open Graph Object Properties
og:url: Link to my web page
og:type: website
og:title: Page Title
og:updated_time: 1319793567
Raw Open Graph Document Information
Canonical URL: Link to my web page
So it seems that the debugger gets only info from my page (e.g. <title>), not from Open Graph tags.
What I do wrong?
Probably I've found the reason of my problem - I render my page using JavaScript and then I set my META. Is there any way to set META (dynamically) visible for FB?
Did you run your page through the debug tool at http://developers.facebook.com/tools/debug ?
The debug tool clears Facebook's cache of your page as well as checking the syntax of your meta tags.
There are more tags required than the two you listed there
No, you can't dynamically create meta-tags. You need your server to render those meta-tags correctly when facebook decides to probe it (usually soon after a share/like/recommend operation).
EDIT : To make it clear -
There is no way to control the rendering of meta tags from the client.
If you want different URLs of your app to have different og:title, og:image etc.. you have to make sure your SERVER serves the html with the right meta tags for each URL.
Either put all the info you want in the URL in the first place, for example http://example.com/?title=shalom+world&image=shalom.png and then when you serve the page, parse the URL and render the meta-tags correctly OR..
Have some ID in the URL according to which you will go fetch a corresponding db record and render the head tag of the html you serve with info from that record as meta tags, for example: http://example.com/DB-RECORD-ID-X123
We currently have an iframe-based Facebook canvas application in the works. The canvas portion is working fine and doesn't really touch the Facebook API at all, since we don't really need any permissions from users in terms of accessing their social graph; the data we're using comes entirely from outside of Facebook.
What we would like to do is allow users to add an FBML version of our app to their profiles as a tab. However, it isn't clear how we are supposed to go about enabling that functionality using the current Facebook APIs.
The canvas page and callback settings are set up and working correctly, and we currently have a tab name and URL set up in our Application Settings (and hitting the tab URL directly will load our minimal test page), but there's no obvious way to offer users the ability to add this tab to their profiles.
Our initial thought was that we would need to add our own "Add Profile Tab" button in xfbml as mentioned at http://wiki.developers.facebook.com/index.php/Fb:add-profile-tab
But even when we reduce the iframe to something as barebones as
<!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://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script>
<fb:add-profile-tab></fb:add-profile-tab>
<script type="text/javascript">
FB.init("<our secret key>", "xd_receiver.htm");
</script>
</body>
</html>
the xfbml element fails to render. Safari and Chrome both list the following error in the console: "Unsafe JavaScript attempt to access frame with URL [our app url on facebook] from frame with URL [URL our iframe loads from]. Domains, protocols and ports must match."
We do have the Connect URL pointing at our app in the Connect tab of the application settings page. The xd_receiver.htm file is located in the same directory as the iframe page and its contents are
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>
which seems to be what all of the relevant documentation recommends. The browser is definitely loading it as verified through the relevant debugging panes (web inspector, firebug, etc).
So the question is, is this the proper way of going about adding "add to profile tab" functionality to our application? If so, how do we resolve the cross-domain error? If not, what should we be doing instead? The current documentation seems to focus heavily on the Graph and Authentication APIs, neither of which really mention profile tabs.
In your Application settings, ensure these are set:
Canvas >
Canvas Page URL
Canvas Callback URL
Profiles >
Tab Name
Tab URL
The Tab request will go to {Canvas Callback URL}/{Tab URL}. Then something like this should work: http://apps.facebook.com/fbrelll/xfbml/fb:add-profile-tab
That's using the updated JS SDK. I can't post more links, but the developer site and github repository have useful information about the SDK.
It turned out that <fb:add-profile-tab> simply doesn't render without the user having first allowed the app to connect to them via something like <fb:login-button>