I am a little confused about open graph I just want my pages to display the correct data when liked or shared. I used the following
<meta name="title" content="<%= MY PAGE %>" />
<meta name="description" content="DESC" />
<link rel="image_src" type="image/jpeg" href=""/>
However when you use the send button it does not show the image in the popup.
So I added all the open graph tags. Which worked well. However it started generating facebook pages for each page (I dont want this to happen really). Also when you used the share button it tried to send the URL of the facebook object not my app page. Is this normal behavior.
I dont think I really understand open graph even after reading all the documentation. Can anyone explain whats going on, what the minimum amount I need to add to the page to get the like button and send button working is and what the deal is with these autogenerated pages.
So I added all the open graph tags. Which worked well. However it started generating facebook pages for each page
No one sees these pages. I think (assume) you are referring to admin pages for objects liked outside of Facebook.
Also when you used the share button it tried to send the URL of the facebook object not my app page. Is this normal behavior.
It will send the current page the code is on, if the current page is a Facebook object then that's what it will send.
<html xmlns:fb="http://ogp.me/ns/fb#">
in the top
<meta property="fb:app_id" content="APP_ID">
<meta property="og:url" content="URL_OF_CURRENT_PAGE">
<meta property="og:title" content="TITLE">
<meta property="og:description" content="DESCRIPTION">
<meta property="og:image" content"URL_TO_IMAGE">
Related
Alright so I have set my meta tags exactly how it says on the facebook developer page, and the scraper even shows the data that will be showed to be correct, but when using the facebook share button on my website http://www.etdigitaldesign.com/, all that it shares is the website url, it doesn't include any of the information from the meta tags, that the scraper says it should. No site name, no description, no image. just the website URL.
This is really confusing to me because the scraper says the share button should be showing the proper info, and I'm using a copy/pasted code snippet from the fb developers page, so I can't see what my error could possibly be...
here is what the scraper shows:image at http://i.imgur.com/zNIyhfg.png since I can't post images yet.
and here's my meta code:
<meta property="og:url" content="http://www.etdigitaldesign.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ET Digital Design" />
<meta property="og:description" content="Currently doing a grand opening special, making several free websites to get my name out there. Visit the site if you are interested!" />
<meta property="og:image" content="http://www.etdigitaldesign.com/images/etlogobig.png" />
All facebook's examples have self-closing meta tags, so try that and then re-scrape, if that still doesn't work add a fake parameter eg http://example.com/?20 and scape
At the moment the title and image are showing, just not the description. It shows HHTP status 206,which is partial content, but that's not a problem
I have found thousands of solutions for embedding a flash player in a Facebook wall, most of them considerably outdated and almost nothing posted after the major UI changes that FB has made relatively recently.
That being said, the most simple and (theoretically) still valid way for doing this that I've found is through posting a link that points to an HTML which presents the Open Graph tags that FB would read and interpret, as follows:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My title!</title>
<meta property="og:title" content="My title!">
<meta property="og:type" content="video.movie">
<meta property="og:url" content="http://mysite.com/url/">
<meta property="og:description" content="content description">
<meta property="og:image" content="http://mysite.com/URL_THUMBNAIL.jpeg">
<meta property="og:site_name" content="mysite.com">
<meta property="og:video" content="http://mysite.com/flash.swf?flashVar=0101">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="300">
<meta property="og:video:height" content="200">
It is important to note that the flashVar is necessary for the kind of application I am using, and I wouldn't expect that to be the problem, as it isn't pointed out as so when I use Facebook's object debugger (developers.facebook.com/tools/debug/).
Furthermore, the most intriguing problem is that this solution actually works when I post the link with an account that still uses the old Facebook interface (without Graph Search) - a little "play" button will appear [as shown on the following link] on the thumbnail and, when I click on it, the SWF starts to play on my Facebook wall.
http://das.ufsc.br/~alexandrec/SSoldFB.png
However, when I try to post the same link on my FB account (which already has the Graph Search and all the other UI changes), this play button won't appear [as shown below] and, if I try to click on the thumbnail, another window will open with the link specified on og:url
http://das.ufsc.br/~alexandrec/SSnewFB.png
I am wondering if this is a matter of having my website put on some sort of white list, but I haven't found any up-to-date documentation that mentions an actual list of this kind - and as my link works on the old UI I believe I would already be on that list.
There is another way for posting SWF files on the wall through the Graph API, making a POST request of an object with a source, a message and so on, but I find this way not so interesting as I can't specify the width and height of the embedded player and that is pretty essencial for my application.
Anyone knows why this happens? Has Facebook decided that it won't allow users to post SWFs anymore, or is this just a (hopefully temporary) Facebook bug? Is there any other way to make this work (taking into consideration my necessity for defining height and width of the embedded player)?
The problem I'm having is when I post a link to a post on my website to either Facebook or Google+ that link points to my homepage. Even in preview, the thumbnail displayed is that of the homepage.
From what I have found (which hasn't been much) it seems that the problem might be with the facebook metadata. I have tried to validate it on facebook's open graph validator and at first I was getting a 206 result when the links were working. Now I get: Facebook URLs aren't scrapable by this Debugger. Try your own. Not sure why.
Having the same issue with Google+. When I first published the website it was working fine and this happened out of nowhere.
Here is what I have in my header:
<!--Facebook Metadata /-->
<meta property="og:title" content="Website Title"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://URL.com/"/>
<meta property="og:image" content="http://URL.com/img.png"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="fb:admins" content="User_1"/>
<meta property="og:description" content="Website Descriptiom"/>
<!--Google+ Metadata /-->
<meta itemprop="name" content="Google+ ID">
<meta itemprop="description" content="Description">
<meta itemprop="image" content="Empty">
I have tried removing it and still the problem persists. I do want to point out that I have an html site with a wordpress blog that's being hosted on my server. Wondering if the issue might be with wordpress?
Should the metadata be placed on the index.html and the wordpress homepage or just the index.html? Any help would be appreciated. Thanks.
When you delete those metadata tags, specifically the og: ones (facebook's open graph meta tags) - you have to tell Facebook to pick up a new copy of your page as they cache everything. If you haven't tried this already:
Remove those tags
View the source on your live site, to confirm they are in fact removed
Go to http://developers.facebook.com/tools/debug and type in the URL of the page you are testing. This will tell Facebook to grab a new copy.
If that works (as it should), then you can play around with what tags to keep and how to make them dynamic - knowing that anytime you make a change, you will have to redo step #3 to tell FB to grab a fresh copy.
I am using open graph for the first time. In any url like this you you can see a like button for the site's facebook page at top and another like button after the heading and summary of the article. The second like button is not working as required. If I like from that link then instead of the article the website's facebook page gets liked and the information which I want to show to other facebook users who see that like post is the summary of the article but instead it show that the person like the page alazydude. And the image is also not displaying which I have specified in the open graph tag. The website is still incomplete. I have tried many times now.
Have a look at this page. The second like button in the middle is not working properly.
Make sure you use the correct data-href in your code to like an article. (You should refer to the URL for that single article, even if it's on a page with multiple articles.)
For example:
<div class="fb-like"
data-href="http://www.yoursite.net/articles/unique-article-id-goes-here-or-something-like-that"
data-send="false"
data-layout="button_count"
data-width="140"
data-show-faces="false"
data-font="segoe ui"></div>
Facebook has developed a handy little tool to create that code for you!
Make sure you check out the Facebook Developers page on like buttons.
When this is done correctly, it should get the opengraph-data from that link and that would be fixed simultaneously.
You do have to make sure that the og-data is set correctly. (This is on the www.yoursite.net/articles/unique-article-id-goes-here-or-something-like-that page.)
<meta property="og:title" content="Title of the article" />
<meta property="og:type" content="article" />
<meta property="og:url" content="same-url-as-the-data-href-from-like-button" />
<meta property="og:image" content="url-to-image-you-would-like" />
<meta property="og:site_name" content="Name of your site" /
Good luck!
I am creating a Facebook iFrame tab application that features weekly interviews and uses a CMS to manage the interview content. I would like to be able to post a link to my newsfeed that points to the application tab and will show a preview with metadata in the newsfeed. Currently, there is no metadata showing up and it is just a blank link. How can I get Facebook to show a preview of the link to the application tab, the same as it would show a preview of a link to any website when posting to my newsfeed?
I know this was asked a long time ago but I figured I'll share more details on how I went about solving this issue:
Facebook does not read metadata from iFrame or application tabs. In other words, when you share a link of a Facebook tab, Facebook will override the meta data values of the iFrame page with the Page’s default ones. In order to work around this limitation, you can set up a redirect page with custom open graph meta tags. Here is how:
Create a redirect page called redirect.php with meta data information:
<html>
<head>
<title>Name of App</title>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<!-- This is a page redirect -->
<meta HTTP-EQUIV="REFRESH" content="0; url=URL_OF_FACEBOOK_APP">
</head>
</html>
Use Facebook URL Linter to scrape page (https://developers.facebook.com/tools/debug)
Enter the address of your app’s root URL.
Use Google Shortner and enter the address of the redirect.php that you set up.
http://goo.gl/
Now you can share the new Google Shortner link
Facebook doesn't read metadata from your iframed tab, but you can set up a redirect page with custom Open Graph meta tags as described in the Facebook Developers Forum here: http://forum.developers.facebook.net/viewtopic.php?id=96146
UPDATE 2012.05.20: forum.developers.facebook.net has been replaced by facebook.stackoverflow.com. The link I provided no longer works, but there are some helpful related threads on the new forum:
http://facebook.stackoverflow.com/questions/8407013/open-graph-information-for-a-link-to-a-page-tab
http://facebook.stackoverflow.com/questions/7197919/how-can-i-301-redirect-a-page-in-the-open-graph-and-retain-facebook-like-informa
http://facebook.stackoverflow.com/questions/6053657/open-graph-pages-can-i-use-a-stub-forwarding-page