Facebook分享具有动态参数的链接

Question

I need in implement into my SPA Web application (JavaScript + AngularJS) the ability to share URLs that include parameters like:

http://MyTestSite.com?action=view&docID=12345

or:

http://MyTestSite.com?action=edit&docID=67890

The page being displayed may include a list with very many documents that may be shared, and I need to attach to each of them the possibility of being shared (where the applicable action would depend on the status of the document).

After a lot of googling it would appear that the only way to go for sharing a link that includes parameters is through the use of Open Graph (though I'm not sure about that).

So, the first question would be: Is this the way to go?

Assuming that the answer is "YES", how can I update dynamically the action and docID that are defined within the header of the HTML document? Such update must take place as soon as I click on the share button attached to a specific entry within the page.

If the answer to the previous question is "NO" (meaning, the Open Graph is not suitable for sharing a link with parameters), what is the way to implement this?

Thanks in advance for any suggestion.

Answer 1

The problem is that Facebook crawlers, like most crawlers, won't evaluate any javascript on the page so you will be stuck with initial headers on the first page.

I handled this issue before with SPA, but creating a server-rendered page used only for sharing, that page will have the relative headers and will redirect to my application.

on the front-end applicaiton

var shareOnFacebook = function(type, autourl) {
   FB.ui({
     method: 'share',
     href: 'http://www.example.com/social/'+type+'/'+autourl,
   }, function(response){

     console.log(response);
  });
};

on the server side

    <!-- do the logic to get the needed data and fill the needed tags -->
    <meta property="og:title" content="{{$model->title}}" />
    <meta property="og:description" content="{{$model->description}}" />
    <meta property="og:image" content="{{$model->image}}" />

    <!-- after create a redirect-->
    <meta http-equiv="refresh" content="0;url='http://www.example.com/{{$redirectHash}}"> 

Answer 2

经过一些工作，更多问题和尝试错误，我找到了此处所述的解决方案