7

We are making use of the FB Like/Share functionality on various pages for our client's site(s). On each page we want shared, we add the following in the meta tags:

<head id="ctl00_Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />

    <!-- social sharing metadata -->
    <meta property="og:title" content="Our Site Title" />
<meta property="og:description" content="A description to be used in the share dialog." />
<meta property="og:image" content="http://us.oursite.com/images/FB_ShareThumbnail_US.png" />

    <title>Our Page Title</title>

    <!-- favicon -->
    <!-- stylesheet and js links -->
    <!-- inline js -->
</head>

In addition, we also display a Facebook graphic with the following HREF: 

<A href="http://www.facebook.com/sharer.php?u=http%3a%2f%2fus.oursite.com%2fOurPage.aspx%3fid%3d999&amp;t=Our+Site+Title" target=_blank><IMG src="/images/Facebook_icon_20x20.png"></A>

The client would like a standard Image, Title, Description used, regardless of the actual page\article shared (sort of "brand control"). We currently have our og: meta tags setup to render down the same data for each page/article.

When the users click the "share" functionality, they don't get a page/article picture, nor any good description or title (as i thought the tags were supposed to provide).

The pages currently being shared are accessible to anonymous users, so the FB bot can access the pages. The image specified in the og meta tag is also available to anonymous users. The first question is why does this method of sharing not seem to use the correct defaults for sharing??

The next question is, the next feature request is to have authenticated pages be able to be shared with the same default image, title, description. I was approaching this from a server perspective, where I'd look for the FB bot and redirect the bot to a "static" page that contains only the minimal markup needed to extract the image, title, description. I've proofed this and it works pretty well. I just feel like it might be a bit complicated. Wondering if there is a "better" or more "best-practive" way to share authenticated pages and have the share functionality know about our standard image, title, description??

Thanks In Advance!

Update: I found this related Q/A on StackOverflow: Facebook Share doesn't show my description or my thumbnail

When I ask "Wondering if there is a "better" or more "best-practive" way to share authenticated pages and have the share functionality know about our standard image, title, description??", this is the type of thing I am talking about. If I can pass all data needed to the Facebook sharer.php via querystring parameters (and this results in no Facebook scraper action needed/taken), that is ideal, then I don't need to write any server side logic to re-route the Facebook scraper. I tried taking the Url provided in the above noted Q/A, reformat with my data, but no luck. Wondering if this is documented somewhere on FB?

Community
  • 1
  • 1
Brian
  • 1,383
  • 3
  • 16
  • 30

3 Answers3

9

There can be a number of reasons why it isn't using the provided og meta data, but unless you share us the code/url we can just guess what might be the issue.

  • Make sure the og metadata resides inside the <head> tag as it won't be looking for them anywhere else. If you define them in the <body> tag or some other place, it will just ignore them.
  • If the pages have been liked before you added the metadata, you need to refresh the cache Facebook has for the page by providing the url's to the Facebook linter tool.

If neither of those steps resolve the problem, please share the url/code.

As far as your question regarding authenticated pages goes, you could just add that metadata on the public, non-authenticated version of the page, without checking is it actually Facebook or not, as when someone shares the page, that same information becomes public regardless of the users who view the share have access to the page or not.

Niklas
  • 29,752
  • 5
  • 50
  • 71
  • As far as the authentication issue goes, I've seen sites pop an auth dialog (or other prompt) for non-authenticated users, but use the OG meta tags for the content that authenticated users will see (i.e serve the same meta tags regardless of whether the user can see the entire content) – Igy Jul 19 '11 at 21:57
  • The popup would not help here. The issue is that Facebooks "bot" that extracts the data doesn't know how to authenticate (nor should I expect it to...). Therefore, when the bot attempts to access the page, it likely receives a 401, and cannot extract the default image, title, and description. – Brian Jul 20 '11 at 13:11
  • @Brian Did you try those 2 steps I mentioned, did it resolve anything? – Niklas Jul 20 '11 at 13:25
  • @Niklas - yes, you are too quick for me! I was revising the original posting as you posted your last comment. All the "OG" tags are in the and I test with different ID values in our page query string to force Facebook to retrieve the data fresh. The revisions to the posting are to demonstrate what the View Source looks like within the browser. – Brian Jul 20 '11 at 13:31
  • @Niklas - regarding your comment "you could just add that metadata on the public, non-authenticated version of the page". It seems you and Igy had the same type of understanding of my question. The issue is that the Facebook "bot" (aka Scraper) cannot scrape the pages hosted on our site that require authentication. Essentially the Facebook scraper will ask for the page to display the default Image, Title, Description, but will get a 401 returned from our site because Facebook does not know how to authenticate with our site. – Brian Jul 20 '11 at 13:35
  • And I used the Linter tool on our QA site (publicly available, but not yet updated with our new code to redirect the Facebook scraper) and got a 403 from the page that requires authentication. It successfully "linted" a page that did not require authentication on the same domain. – Brian Jul 20 '11 at 15:06
4

After some further digging, I found a way to work with the "sharer.php" functionality to specify exactly the Image, Url, Title, and Description I want displayed, without relying on the OG meta tags. This will work for both anonymously accessible pages and pages that require an authenticated user. The linked StackOverflow Q/A (http://stackoverflow.com/questions/2950189/facebook-share-doesnt-show-my-description-or-my-thumbnail) got me headed in the right direction, then after some digging, found some other posts in the Facebook developer forums (http://forum.developers.facebook.net/) by searching for "sharer.php". This one in particular got me to where I needed to be: http://forum.developers.facebook.net/viewtopic.php?id=101127

In essence, there is no need for the OG meta tags. Just ensure the pieces of your URL are correctly encoded and that you are using the correct parameter keys (i.e. "&p[title]=" rather than "&t=".

After removing the OG meta tags from our site/pages, I also modified our Facebook sharing button/link to render the following markup:

<a href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=Our+Site+Title&amp;p[url]=http%3a%2f%2fus.oursite.com%2fdefault.aspx&amp;p[images][0]=http%3a%2f%2fus.oursite.com%2fimages%2fFB_ShareThumbnail_US_90x85.png&amp;p[summary]=Our+facebook+description+that+is+used+on+the+FB+share+page." target="_blank">
    <img src="/images/fb_icon_20x20.png" />
</a>

Note that I was tempted to investigate whether I could find a parameter that allowed me to specify a default "message", but that was not a requirement for us, so perhaps later on I'll dig for that information.

Brian
  • 1,383
  • 3
  • 16
  • 30
  • I'm interested in the ability to specify the "message" parameter as well. Anyone find any info on this? Also, is there a way to use this method and still retain the standard "pop-up" behavior of the Share bookmarklet for instance? – Nathan Loyer Oct 25 '11 at 21:10
  • This appears to no longer work. After trolling around SO for a bit as solutions fail. The only thing that can successfully be passed it URL. – Scott Sword Aug 07 '12 at 21:22
0

How about this now: https://developers.facebook.com/docs/sharing/webmasters/crawler

You just need to whitelist the facebook crawler

udit mittal
  • 529
  • 3
  • 14