Solved: Dynamic meta tags based on URL parameters (Facebook SDK)

Answered
4
0

After sharing a URL in Facebook, in order to generate nice-looking previews, Facebook scans the document for open graph meta tags. i.e

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

 

Normally these would go in Default.html, but they would be static. But is it possible to create dynamic meta tags in the WiseJ document, based on URL parameters?

I have a method in one of my forms that gets called after passing in URL parameters, if there was a way to do something like

Document.Inject(“custom HTML meta tags here”)

that could possibly work.

Ideally, Facebook would allow these set as parameters into sharer.php , but it appears that is deprecated and no longer works. So right now I’m just wondering if dynamic META tags are possible in WiseJ.

Thanks

 

https://stackoverflow.com/questions/22652041/how-to-pass-a-parameter-like-title-summary-and-image-in-a-facebook-sharer-url

 

General
Share
  • You must to post comments
Filter
Sort by: Recently Active
Best Answer
1
0

Hi Andrew,

I think I gave you the wrong info via email. It’s not possible to modify the meta tags using javascript simply because the facebook “scraper” doesn’t run the javascript in the pages it scrapes. It reads the html as-is. The only way to modify the meta tags dynamically is to dynamically create the html page itself.

Which is possible also with Wisej. It’s enough to use an aspx pages instead of an html page and change the meta tags using aspx inline tags. Something like this:

<head>
 <title>Wisej.DynamicFacebookMeta</title>
 <meta charset="utf-8" />
 <link rel="stylesheet" href="StyleSheets/StyleSheet1.css" />
 <script src="wisej.wx"></script>
 <script src="JavaScript/JavaScript.js"></script>
 <%FacebookInfo info = Program.GetFacebookInfo(); %>
 <meta property="og:url" content="<%=info.Url%>" />
 <meta property="og:type" content="<%=info.Type%>" />
 <meta property="og:title" content="<%=info.Title%>" />
 <meta property="og:description" content="<%=info.Description%>" />
 <meta property="og:image" content="<%=info.Image%>" />
</head>

I have attached a sample application that can share 3 options of the same URL.

HTH

Best,

Luca

 

 

Attachment
Wisej.DynamicFacebookMeta.zip
  • You must to post comments
0
0

Please Check this  link may be you get better solution

https://stackoverflow.com/a/17857601/4247829

  • Luca (ITG)
    It’s the same. The issue is that FB doesn’t process JavaScript, it only parses static HTML pages. However you create the static HTML doesn’t make any difference to FB.
  • You must to post comments
0
0

I suppose one workaround would be:

  • prior to sharing on Facebook, create a .html file on the server w/ appropriate OG meta tags.
  • have the .html file redirect to the WiseJ single-page app w/ URL parameters
  • share the URL to the .html file instead of the WiseJ normal URL.
  • Luca (ITG)
    Or adjust the meta tags according to the URL parameters. Facebook uses the full url to cache the info. I’m not sure if they use what comes after the hash in case you use a URL with an hash.
  • You must to post comments
0
0

I’m trying the 2nd method without luck.  I placed it first in the form’s method, and even moved it right up to Main() in Program.vb.

With breakpoints set, I’m not even seeing it get hit by Facebook. (Even after forcing a refresh by clicking on “Refresh Share Attachment”)

 

‘attempt to inject meta tag
Dim strDesc As String = Chr(34) + “View issue ” + intIssueToLoad.ToString + Chr(34)
Application.Eval(“$(‘head’).append(‘<meta property=””og:description”” content=” + strDesc + “>’);”

Perhaps the Meta tags are being used by Facebook before the body is even parsed,  and WiseJ loaded. When the tags are present in Default.html, they do alter the preview of the share attachment.

 

 

  • Luca (ITG)
    Facebook caches the meta tags for the URL, it doesn’t read them all the times. try this tool https://developers.facebook.com/tools/debug/
  • Andrew Niese
    Great tool. But even when forcing a refresh with it, it still didn’t work. I have breakpoints at every entry-point in the app, and none were triggered. So I don’t think its possible to do it server-side.
  • Andrew Niese
    Do you see that behavior too?
  • You must to post comments
0
0

Hi Andrew,

Yes it’s possible but it’s not Wisej code. The Default.html page is a standard HTML page (you can also use an aspx page or any other dynamic page). Wisej doesn’t prevent any type of javascript code from manipulating the dom.

You can:

  • Handle the url arguments on document load in javascript and modify the meta tags. You can add a js file to the page, attach to the document load and modify  the tags.
  • If you need to process the arguments on the server side you can do that too, then call a function on the client using Application.Call or Application.Eval.  On the client you need a javascript function to call and manipulate the dom. Add it as a script tag.

Basically it’s exactly the same as any web system would have to do. Wisej gives the additional possibility of processing the request on the server first and calling the client from the server.

/Luca

  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.