Dynamic meta tags based on URL parameters (Facebook SDK)

Welcome to Wisej Support.
Questions, suggestions and plain old bugs - are all welcome here!
0
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

 

  • You must to post comments
0
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

 

 

  • 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
    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
    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 4 results
Your Answer
Post as a guest by filling out the fields below or if you already have an account.
Name*
E-mail*
Attachment
File Name Size
There are currently no files uploaded.
Maximum number of files 5, maximum file size 3.9MB.
Supported file formats: zip pdf gif jpg bmp png cs vb theme json