I am facing problem in share button integration with my website.
When i click share it is only showing my website url.It is not showing image and description what might be the problem ???
Below is my code:
<!DOCTYPE html>
<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">
<meta charset="utf-8">
<title>Welcome Facebook Read Eval Log Loop</title>
<meta name="description" content="Examples for the Facebook Platform.">
<meta name="keywords" content="facebook, connect, facebook connect, javascript, examples, javascript sdk, javascript library, library, howto, tutorial, api, facebook apisdk">
<meta property="fb:admins" content="5526183">
<meta property="fb:app_id" content="123865001025929">
<meta property="og:image" content="https://fbrell.com/logo.jpg">
<meta property="og:type" content="website">
<meta property="og:url" content="http://fbrell.com/">
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '123865001025929',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<fb:share-button href="http://fbrell.com" type="button"> </fb:share-button>
</body>
</html>
You are missing the og:title so you need to add it, something like: <meta property="og:title" content="Welcome Facebook Read Eval Log Loop"/>
close the tags properly as mentioned by #dwarfy
Don't use the fb:share-button! use the Like plugin instead
It seems to work with the facebook linter :
http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Ffbrell.com%2F
Anyway it's best to always use the linter (in the link above) so that it gives you warnings and errors about your og tags, an ALSO it force facebook to REFRESH its cached information about your page, which in your case was not yet refreshed after you added tags, I suppose, so you were not seeing your last changes ... It's this information Facebook uses when you share something.
Does it work now ?
Btw it gives this :
Warning
Required Property Missing og:title is required
Related
I added fb meta tags in the heads section
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title of the site</title>
<meta name="description" content="blah normal">
<meta property="og:title" content="Facebook Open Graph META Tags"/>
And I added a share button from Facebook via an iFrame from the facebook developers site with the previously added appId and changed the original developers.facebook.com from the sharing button to my site.
It works but there are no meta tags being crawled. What am I doing wrong here?
Hello Ive been struguling with this for a while.. and just cant get my head around it.
I do have the meta tags required :
<link rel="canonical" href="http://www.profsonstage.com" />
<meta property="fb:app_id" content="366418850196673">
<meta property="og:title" content="ProfsOnStage"/>
<meta property="og:site_name" content="ProfsOnStage" />
<meta property="og:description" content="Welocme to ProfsOnStage Web Site" />
<meta property="og:url" content="http://www.profsonstage.com" />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://www.profsonstage.com" />
But when I try to use the share button facebook scraper doesnt fetch any data but the link.
When I check what the scraper sees I get :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script>function set_cookie(){var now = new Date();var time = now.getTime();time += 19360000 * 1000;now.setTime(time);document.cookie='beget=begetok'+'; expires='+now.toGMTString()+'; path=/';}set_cookie();location.reload();;</script>
</head>
<body></body>
</html>
I hope anyone can point me into the right direction to fix this. Checked a lot of similar questions but I was unable to find an answer regarding this issue.
Also I get this in my console log
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
And My APP urls are :
www.profsonstage.com/
profsonstage.com/
I just don`t understand what is the problem here.
Seems like its a hosting issue. If anyone get a problem like that contact your hosting provider.
I am trying to implement OpenGraph actions and object. It works fine, I am able to create objects and actions in the ticker/Timelime.
My only concern is when you display the object, its title is a link.
But it links to the page I use to generate the object, so there is nothing to display :
object.html.erb
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# name_space: http://ogp.me/ns/fb/name_space#">
<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="name_space:object" />
<meta property="og:url" content="PATH_TO_METHOD_TO_CREATE_OBJECT?img_link=<%= CGI.escape(#img_link)%>&points=<%=#points%>&description=<%= #description%>" />
<meta property="og:title" content="<%= params[:units_offered] %> Points" />
<meta property="og:description" content="<%= params[:description] %>" />
<meta property="og:image" content="<%= params[:img_link] %>">
if I change the og:url meta tag to the url of my FB page then the object picks my FB page value..
in a perfect I wanted to link to nothing or my FB page.
Any clue ?
Thanks!
Since the linter doesn't run javascript, you can do a javascript redirection for the user to go to the place you want.
<script> location.href = 'http://example.com/the_real_page.php'; </script>
This way the linter can still see the correct og meta tags, and the user who clicks the link gets redirected to the correct location.
Add this to the head:
<script type="text/javascript">
location = 'YOUR_HOME_PAGE';
</script>
I'm building a facebook iFrame application that uses facebook comments. When a user leaves a comment the default action is that this comment will be posted to their wall. The wall post is something along the lines of
UserX commented on example.com
# the comment text goes here
http://example.com
apps.facebook.com
You should be able to include an image, a description, and set the link to be the title of the page (where it says http://example.com above the apps.facebook.com), but I'm having no luck getting this to work.
I thought it would grab the information from my meta tags (as long as they included the appropriate 'og' tags), but that isn't working. Nor am I able to define values for title, url, image etc. in the same way that you can for normal wall posts.
Anyone have any idea how to get this working??
EDIT:
Here are the meta tags I currently am using.
<meta property="og:title" content="USERNAME'S PAGE" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://example.com"/>
<meta property="og:image" content="http://example.com/images/wall-post.png" />
<meta property="og:description" content="Some description goes here." />
Use URL Linter to Debug
http://developers.facebook.com/tools/lint/
Make sure all meta tags are correct and if you've made some changes, it takes some time to update for facebook and here's a sample, this is a working version:
<!doctype html>
<html xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml" lang="en">
<head>
<meta charset="utf-8">
<title>Facebook Comment Box Sample</title>
<meta property="og:title" content="YOUR-POST-TITLE"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://YOUR-SITE-URL"/>
<meta property="og:image" content="http://YOUR-IMAGE-URL"/>
<meta property="og:site_name" content="YOUR-SITE-TITLE"/>
<meta property="og:description" content="YOUR-DESCRIPTION"/>
<meta property="fb:admins" content="YOUR-USER-ID"/>
</head>
<body>
<h1>Facebook Comment Box:</h1>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://YOUR-SITE-URL" num_posts="10" width="500"></fb:comments>
</body>
</html>
OK, after a lot of stumbling around I figured this out.
My iFrame application requires facebook authentication before accessing the application (as I believe all facebook apps do). This means that the facebook crawlers were unable to crawl my homepage and pick up the og: meta tags.
To solve this I first had to figure out what the facebook crawler looks like. I logged the HTTP_USER_AGENT for all requests and then used the facebook URL Linter (http://developers.facebook.com/tools/lint/) to ping my site.
The facebook crawler identifies itself as "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"
Once I had that I was able to just add a little conditional logic to let the crawler bypass authentication and access my site. I hope this helps others.
First I made sure I had all my meta properties set, then I just put my code in this:
if (strpos($_SERVER['HTTP_USER_AGENT'],"externalhit_uatext")<5)
{
}
Ok here is the think
suppose you want to submit a link to your mates wall,
You copy/paste a link and facebook generates title, image and description.
Curently i am working on http://www.compra.gr
When you want to submit this link (http://www.compra.gr) facebook generates characters that are not recognised.
When you want to submit http://compra.gr/index.php?option=com_content&view=category&layout=blog&id=35&Itemid=54
Facebook generates title,image and description normally.
I know that facebook takes the information from metadata. I corrected the metadata, however nothing happened.
Please help me if someone has a a clue what is going on.
Thank you in advance.
PS the site has copyright protection, in order to view the source code use google chrome and at the address bar enter view-source:http://compra.gr/
I know whats the problem, your site does not have Open Graph tags!
Check out: https://developers.facebook.com/docs/opengraph/
Here's a snippet for you to understand, add this to your site and then use
URL Linter to Debug: http://developers.facebook.com/tools/lint/
Open Graph Tags Snippet:
<!doctype html>
<html xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml" lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta property="og:title" content="YOUR-POST-TITLE"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://YOUR-SITE-URL"/>
<meta property="og:image" content="http://YOUR-IMAGE-URL"/>
<meta property="og:site_name" content="YOUR-SITE-TITLE"/>
<meta property="og:description" content="YOUR-DESCRIPTION"/>
<meta property="fb:admins" content="YOUR-USER-ID"/>
</head>
.....
</html>