Open Graph information for a link to a Page Tab

问题

When posting a link directly to a Tab on a Facebook Page,

https://www.facebook.com/PAGENAME?sk=app_APPID

Facebook picks up the Page's Open Graph <meta> tags, which means the link post gets associated with the Page's profile picture, name, and a description of "Page &bullet; n like this".

I had hoped that Facebook would instead use the og <meta> tags from the app's HTML, allowing link posts to be customized.

What's the best way to provide a direct link to a specific Tab on a Facebook Page with custom content in the link post?

回答1:

The best way I can see to have this accomplished would be to have a redirector page hosted on a website (www.example.com/fb/redirectorForApp.html) that does a redirect on a javascript timeout. That redirector page has the og tags you want to have specified. The redirect will land the person at the https://www.facebook.com/PAGENAME?sk=app_APPID. What's cool about the javascript redirect is that the redirect is not ran by the linter, so it can pickup the correct og: tags, while also allowing you to have the user go directly to the page tab. Good luck!

回答2:

Since the content of your Page Tab is located inside an iFrame the Facebook scraper will always see first the meta tags outside the iFrame which are set by Facebook and which describe your Facebook Page. Try the url in the Facebook tool and see at the bottom of the page what the scraper sees for your url. Unfortunately you can not change those Facebook meta tags from within your iFrame. That is why the only way to achieve what you want is to go by a redirect. I have done this before using the following code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:og="http://ogp.me/ns#">
    <head>

        <!-- Facebook meta tags -->
        <meta property="og:title" content="bla"/>
        <meta property="og:url" content="https://yourdomain.com/redirect.html"/>
        <meta property="og:image" content="https://yourdomain.com/thumb.png"/>
        <meta property="og:site_name" content="bla"/>
        <meta property="fb:admins" content="1234"/>
        <meta property="og:description" content="bla"/>
        <meta property="og:type" content="website"/>
        <meta property="og:video" content="https://yourdomain.com/bla.swf?param=bla"/>
        <meta property="og:video:width" content="398"/>
        <meta property="og:video:height" content="224"/>
        <meta property="og:locale" content="de_DE"/>

        <script type="text/javascript" src="swfobject.js"></script>
    </head>
    <body>
        <!--  Check whether inside facebook -->
        <script type="text/javascript">
            function NotInFacebookFrame() {
                return top === self;
            }
            function ReferrerIsFacebookApp() {
                if(document.referrer) {
                    return document.referrer.indexOf("facebook.com") !== -1;
                }
                return false;
            }
            if (NotInFacebookFrame() || ReferrerIsFacebookApp()) {
                top.location.replace("https://www.facebook.com/PAGENAME?sk=app_APPID");
            }
        </script>
        <!-- content here -->
   </body>
</html>

回答3:

I'm a new user so I can't comment on DMCS's answer yet :-)

But I had to do this once, and it was also through a "redirector". However there was no need to set a timeout, simply:

<html>
  <head>
    <meta ...> <!-- OG tags -->
    <script type="text/javascript">
      location = 'http://www.facebook.com/PAGENAME?sk=app_APPID';
    </script>
  </head>
</html>

So no delay.

BTW. if you check the tab URL here, you'll see that it has a redirect path via its og:url tag that redirects from https://www.facebook.com/PAGENAME?sk=app_APPID to https://www.facebook.com/PAGENAME. Maybe you should check if setting the Default Landing Tab to your tab changes anything.

回答4:

I too have been using the redirect method, but it is insufficient where users have an incentive to share content (for example in voting apps): all too often they copy the page tab URL from their browser and the shared content ends up having the generic page profile information associated with it.

But the good news is there is a solution! It's fairly complex though - especially if you have more than one subpage with different og:tags (such as in a voting competition for example).

How it works?

This solution is to set up ogtags on the page on your server to have a canonical url which redirects to the canvas app page - canvas apps are allowed to specify their own custom ogtags in this fashion. If you then redirect all users to the proper page tab, the canvas page will effectively not be viewable, yet it will allow you to provide custom ogtags for your page tab app.

The steps

Create a canvas page for your app (use the same urls as for the page tab)
Add og:tags to your page just as you would normally
Set the og:url parameter to the canvas app's url (http://apps.facebook.com/yourapp/...etc)
Add code so that when the request is coming from outside of the page tab iframe (in the canvas or directly on your server) you redirect the user to the proper page tab

回答5:

I was having the same question... so here's what I did:

Redirection Page: A page that will get a parameter & set the tags for your sharing services or at least the OpenGraph tags. Then this page will craft a URL to a second page (Facebook Pagetab) like this:
```
//{facebook-page.link}/?sk=app_{your-app-id}&app_data=X
```

To obtain {facebook-page.link} see this example request:
See example: https://graph.facebook.com/200866110154
See documentation: https://developers.facebook.com/docs/reference/php/facebook-api/

Do not do the redirect immediately everytime, will not work. Instead do the redirect on certain conditions. Example:

    if (strpos($_SERVER['HTTP_REFERER'], '//www.facebook.com/')) {
        drupal_add_js('window.location = "' . $url_final . '"', 'inline');
    }

Remember, to craft the URL use the page link attribute obtained from Facebook, not the ID of the page, otherwise you will lose the app_data parameter in the signed request.

Facebook Pagetab: A page called inside an Iframe of a tab of a Facebook page. This page will get the SignedRequest with the app_data and will load specific content that the end user will see.

Remember that app_data can also be an array (or a serialized object):

      app_data[var1]=value1&app_data[var2]=value2

Tip: If you are using Drupal you can avoid the final redirect, just overwrite $_GET['q'] to the page need. This way you don't bootstrap Drupal only to do another redirect. You can achieve this using hook_init.

Tip: Save your requests to the Facebook API to speed up future calls. Every request to the graph API takes 300ms at least. Database access is obviously faster.

来源：https://stackoverflow.com/questions/8407013/open-graph-information-for-a-link-to-a-page-tab

标签

facebook

opengraph