¿Cómo integrar Open Graph de Facebook en una aplicación Meteor?

Estoy tratando de integrar mi aplicación Meteor con Facebook Open Graph, para publicar acciones en la línea de tiempo.

La API de Facebook funciona definiendo metaetiquetas específicas de objetos en el encabezado HTML, que serán leídas por la API. Por ejemplo:

<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>

Sin embargo, lo que ve la API de Facebook al inspeccionar cualquier URL es algo como esto:

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

¿Cuál es la mejor manera de integrar estas etiquetas meta, que pueden cambiar según la URL, en la aplicación Meteor?

preguntado el 01 de julio de 12 a las 12:07

Gracias Lloyd. Pero, ¿significa esto que con la versión actual de Meteor (0.3.7), no hay forma de lograrlo? ¿No hay solución posible? -

Meteor no sirve contenido estático en el body pero tu gráfico abierto meta Las etiquetas deben aparecer en el head. Al menos, funciona para mí. -

Todavía estoy trabajando en ello, pero la solución por ahora hasta que Meteor implemente el enrutamiento de servidor adecuado es escribir nuestra propia lógica de enrutamiento (ver stackoverflow.com/questions/10119777/…). -

Solo para señalar que esto no está pirateado en server.js. Solo agrégalo en tu Meteor.startup() en el lado del servidor. -

3 Respuestas

Encontré el mismo problema.

Dos formas de lidiar con esto:

  • Una adición reciente al paquete "spiderable" (actualmente en la rama "devel") también le permite cambiar la etiqueta "head" en el código del cliente (agregue su og: título, etc.) y haga que se sirva "mágicamente" en Facebook desde tu servidor.

(NOTA: probablemente necesitará No utilice paquete de publicación automática con esta solución, ya que "spiderable" detiene la representación de la página mientras se basa en un indicador que "publicación automática" se establece en "verdadero" justo en el inicio del cliente)

  • Una solución más liviana sería el paquete "headly" para Meteor:

https://github.com/ayal/headly

Después de la instalación, lo usa así:

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

Respondido 30 Oct 12, 13:10

Si estoy consultando un documento basado en _id, entonces esto debe ir en la url. ¿Es url param la forma correcta de consultar la base de datos? - Prashant

@Prashant, sí, creo que es bastante común tener una identificación en la URL (ya sea como parámetro de consulta o en la ruta) y consultar la base de datos con ella. - ayal gelles

¿Hay algún problema con el paquete headly? Choques de meteoritos. - Prashant

El paquete Spiderable es el camino a seguir...

en su enrutador haga algo como esto... (esto es café-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"

puede probar para ver si el rastreo de Facebook de esta página está funcionando con su herramienta de depuración... simplemente ingrese la URL de esta página y verifique si hay errores, etc.

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

Respondido el 06 de Septiembre de 13 a las 16:09

¡No olvide agregar las metaetiquetas ocultas en el encabezado de su diseño! En jade... "meta(propiedad='fb:app_id', contenido='foobar')" - adamwong246

Tu necesitas meteor add spiderable.

A partir del meteoro 0.4.2, con el spiderable paquete incluido, todo lo que tiene que hacer es incluir el correspondiente <meta> elementos en el HTML del cliente <head>.

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

Respondido 08 Oct 12, 13:10

Hola Dan, solo para enfatizar: la pregunta, según tengo entendido, se trata de dinamicamente establecer las meta-etiquetas en la cabeza. Su solución habría funcionado incluso sin usar "spiderable" porque de todos modos se incluyó un cabezal estático en lo que servía el servidor. No hubiera funcionado para og:title, og:image, etc. dinámicos. Sin embargo, hay un cambio reciente en spiderable que te permitiría lograrlo. (ver mi respuesta arriba) - ayal gelles

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.