I'm currently working on Web app which allows to share on Facebook.
My app contains a few questions and then generates a picture(depends from previous answers to my questions) and opens results page.
I want to share the content of result page and I'm using OG metatags to specify what is shared on FB.
For example:
<meta property="og:title" content="My app" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.myapp.com/step=share&shareid=hi43uib23ni" />
<meta property="og:image" content="http://www.myapp.com/images/hi43uib23ni.jpg" />
I have also included FB APP id and some image sizing tags.
The problem is that when I share results on FB and than click on my POST, it brings me back to http://www.myapp.com/step=share&shareid=hi43uib23ni but what i need is http://www.myapp.com
The idea is that I share my results on FB and inform others about this app. And when they click on my post they actually have ability to do the test by themselves..not to see my results...Any suggestions on this issue?
You can redirect human visitors that arrive at the address http://www.myapp.com/step=share&shareid=hi43uib23ni either
via JavaScript (which the FB scraper does not care about), location.href="…", or
server-side – in that case, you need to implement an exception for the FB scraper, so that it does not get redirected (because then it would read the OG meta data from http://www.myapp.com/, and that’s not what you want.)
The scraper can be recognized by the User-Agent header it sends – see Like button social plugin FAQ, I think the exact value the scraper sends is mentioned in there.
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 multiple blocks of content on my page that users can open and explore. Within these blocks is a Like button relevant to each block. Each Like button widget has a URL that is dynamically generated when the blocks of content are opened, e.g.
$('.socialMedia').append("<div class='fb-like' data-href='"+likeUrl+"' data-send='true' data-width='250' data-show-faces='false' data-colorscheme='dark'></div>");
The Like URL is an address in the format of http://url.com/like-shY76739jj.php - when accessed such URLs redirect to a query-string URL via some .htaccess magic. However, this is probably irrelevant for my problem...
The issue is is that the dynamic URL generated through Javascript does not send through to Facebook. It generates correctly in my source code (inspecting the Like Button elements shows that the correct URL is in the widget href attribute), and appears correctly in the Like button pop-up window (straight after the button is clicked, when the user has the choice to enter an additional message), but when I check the story on Facebook the URL is incorrect - specifically it comes back as:
http://url.com/like-.php - the dynamic ID I am slotting in to my likeURL variable is not translating from the page into the Facebook story. I have no idea why.
I am using the FB.XFBML.parse(document.getElementById('socialMedia')); code already, but this is not solving the issue.
TL:DR Dynamic URLs used in Facebook Like buttons display correctly within the widget, but not in the generated Facebook story.
Thanks for any help!
Each your http://url.com/like-[...] page should has OpenGraph tags - og:title, og:image etc. For example:
<meta property="og:title" content="Your section - your website" />
<meta property="og:type" content="website" />
<meta property="og:url" content="URL_OF_PAGE" />
<meta property="og:image" content="http://url.com/images/section1.jpg" />
<meta property="og:description" content="Description"/>
You can test your urls using OpenGraph Debugger - https://developers.facebook.com/tools/debug
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">
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
I have implemented Facebook Open Graph Protocol Full Integration following the http://developers.facebook.com/docs/opengraph/ and http://www.websitedesign411.com/blog/facebook-open-graph-protocol-full-integration-walkthrough.
The Like buttons work and show in the Facebook feeds except for one page www.giantmango.com/contest. I have tried several alternatives like manually entering the content for the meta tags and an else statement for pages, but I am unable to get Facebook to recognize this page. Any ideas?
<?php } elseif (is_page()) { ?>
<meta property="og:title" content="「I LIKE CREATORS」 アートチャリティー&コンテストへようこそ！" />
<meta property="og:type" content="article" />
<meta property="og:description" content="「I LIKE CREATORS」 アートチャリティー&コンテストへようこそ！ 売上の一部は児童養護施設に寄付いたします。2011年2月21日(月)から2月28日(月)好きな作品に投票をして、抽選で10名様にアメリカ生まれのナチュラルケアブランド「バーツビーズ」の福袋またはハンドサルヴが当たります。" />
As mentioned in the comments of this answer, it's a caching problem and quoting from Facebook (Editing Meta Tags):
For the changes to be reflected on
Facebook, you must force your page to
be scraped. The page is scraped when
an admin for the page clicks the Like
button or when the URL is entered into
the Facebook URL Linter.
So basically when I tested your page in the URL Linter, Facebook grabbed (scraped) the current data for the open graph meta tags.