Geek Answers Handbook

How to integrate Facebook Open Graph into Meteor app?

I am trying to integrate a Meteor app with Facebook Open Graph to post actions on a timeline.

The Facebook API works by defining the meta tags of the objects in the HTML header that the API will read. For instance:

<head prefix="og: http://ogp.me/ns# [YOUR_APP_NAMESPACE]: http://ogp.me/ns/apps/[YOUR_APP_NAMESPACE]#"> <title>OG Tutorial App</title> <meta property="fb:app_id" content="[YOUR_APP_ID]" /> <meta property="og:type" content="[YOUR_APP_NAMESPACE]:recipe" /> <meta property="og:title" content="Stuffed Cookies" /> <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" /> <meta property="og:description" content="The Turducken of Cookies" /> <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html"> </head>

However, what the Facebook API sees when checking any URL looks something like this:

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/ed99236548322b46a7562b49cd6ee0e0f059e506.css"> <script type="text/javascript" src="/c16ff21884b1f831d91ebf271236ef78b03b552e.js"></script> <title>Made with Meteor!</title> </head> <body> </body> </html>

What is the best way to integrate these meta tags, which may vary depending on the URL in the Meteor app?

+4
source share
3 answers

I ran into the same problem.

Two ways to handle this:

  • A recent addition to the "spiderable" package (currently in the "devel" branch) also allows you to change the "head" tag in client code (add the og: title, etc.) and ask Facebook to magically execute Facebook from your server .

(NOTE: you probably won’t need to use the automatic update package with this solution, since “spiderable” stops the page from being displayed, relying on a flag that “publishes automatically” sets “true” right when the client starts).

  • An easier solution would be the head package for Meteor:

https://github.com/ayal/headly

After installation, you use it like this:

 Meteor.headly.config({tagsForRequest: function(req) { ... do something dynamic here, ie get title from db based on url param ... return '<meta property="og:title" content="<DYNAMIC TITLE>" />'; }});
+5
source

Spiderable package is the way to go ...

in your router do something like this ... (this is coffee-sciprt)

 #Spiderable stuff to set meta tags for crawl $("meta[property='fb:app_id']").attr "content", "YOUR_APP_ID" $("meta[property='og:type']").attr "content", "YOUR_APP:OPEN_GRAPH_CUSTOM_EVENT" $("meta[property='og:url']").attr "content", "https://apps.facebook.com/YOURAPP"+ @canonicalPath $("meta[property='og:title']").attr "content", "some title: $("meta[property='og:description']").attr "content", "some description" $("meta[property='og:image']").attr "content", "thumb image url"

you can check if Facebook crawl works on this page using the debugging tool ... just enter the URL of this page and check for errors, etc.

https://developers.facebook.com/tools/debug

+1
source

You need meteor add spiderable .

As with meteor 0.4.2, with the spiderable package spiderable on, all you need to do is include the appropriate <meta> elements in the client HTML <head> .

 <head> <meta property="og:type" content="website" /> <title>HTML head test</title> </head>
0
source

More articles:


All Articles