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
Related
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.
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 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 have the following HTML in my HTML head:
<meta content="***" property="fb:admins">
<meta content="***" property="fb:app_id">
<meta content="Site.com" property="og:site_name">
<meta content="http://site.com/thumbnail.png" property="og:image">
<meta content="activity" property="og:type">
<meta content="Test Title" property="og:title">
<meta content="http://site.com/page/?Id=56&Source=" property="og:url">
<meta content="Test Activity Description" property="og:description">
But rather than the details I have specified showing up in my facebook feed, instead I get a link to site.com/page (without the URL variables after it), the title seems to be coming from the <title> rather than the <meta content="Test Title" property="og:title"> and the description is coming from the first <p> on site.com/page (which isn't there when you include the URL variables)
any idea what I am doing wrong?
EDIT
Running the page through linter has thrown up some interesting issues.
http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Fwaggleb.com%2F12454874521145474-2%2F
The problem seems to stem from the fact that the image, the URL, the title and description are generated using javascript. When facebook calls back does it not allow the JS to run before fetching the results?
I need to change the data with javascript unless there is a way to pass the whole page through PHP, pick out the data I need and then place the correct URL, title, description and image into the meta tags. I do not have direct access to the database, so I must retrieve this data from the DOM
Maybe it was cached by facebook before you put in these tags.
Try to clean them in Linter: http://developers.facebook.com/tools/lint/
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.