Plugin de citas

El plugin de citas permite a las personas seleccionar texto en tu página y añadirlo a su contenido compartido, para que puedan contar una historia más expresiva. Ten en cuenta que puedes usar este plugin sin necesidad de implementar el inicio de sesión con Facebook ni de solicitar permisos adicionales al revisar la aplicación.

Compartir citas para web móvil

Si estás desarrollando un sitio web para móviles o el botón suministrado no se ajusta al diseño de tu sitio web, el cuadro de diálogo de contenido compartido para web también permite añadir una cita a un contenido compartido mediante enlace.

Compartir citas para iOS y Android

Si la aplicación es nativa para iOS o Android, deberías usar el cuadro de diálogo de contenido compartido en iOS y el cuadro de diálogo de contenido compartido en Android.

Probar el pluginEjemplo de códigoAjustes

Probar el plugin

Selecciona una parte de esta frase para ver el plugin en funcionamiento.

Ejemplo de código

Ajusta el valor data-href para la URL del sitio web. Asegúrate de que tus metaetiquetas de Open Graph estén actualizadas y que el atributo data-href para el plugin coincida con la propiedad og:url.

<html>
<head>
  <title>Your Website Title</title>
  <!-- Comment #1: OG Tags -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Comment #2: SDK -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Comment #3: Content -->
  <h1>Your Headline</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh, 
    vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim, 
    vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer 
    pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus. 
  </p>

  <!-- Comment #4: Plugin Code -->
  <div class="fb-quote"></div>

</body>
</html>
Probarlo

Comentarios de código

  1. OG Tags: puedes usar etiquetas de Open Graph para personalizar las vistas previas del enlace.
  2. SDK: carga el SDK de Facebook para JavaScript.
  3. Content: el contenido de tu página.
  4. Plugin Code: el código de tu plugin de citas del configurador. Puedes ponerlo en cualquier parte del documento y se mostrará solo cuando destaques texto dentro de ese contenedor. En este ejemplo, se muestra solo cuando destacas texto dentro del cuerpo.

Ajustes

Puedes modificar las siguientes opciones:

Ajuste Atributo HTML5 Descripción Valor predeterminado

href

data-href

URL absoluta de la página que deseas citar

URL actual

layout

data-layout

  • quote: en la selección de texto, un botón con un icono azul de Facebook y el texto "Compartir cita" que se muestra como una superposición. Cuando una persona hace clic en él, abrirá un cuadro de diálogo de contenido compartido con el texto resaltado como cita.
  • button: se comporta igual que la opción "cita", pero solo tiene un icono azul de Facebook en el botón.

quote

Áreas que se pueden citar

Es posible que algunas áreas de tu página web no se puedan citar, como los menús, las barras laterales y los pies de página. Puedes definir las áreas de tu página que se pueden citar con los elementos siguientes:

  • elementos <article> de HTML,
  • cualquier elemento con el nombre de clase fb-quotable.

Asimismo, puedes combinar y adaptar tantos elementos de ambos tipos como desees y definir las áreas que se pueden citar.

Si la página no contiene elementos <article> ni class="fb-quotable", se podrá citar toda la página al completo.

Cambiar el idioma

Para cambiar el idioma del plugin de citas, carga una versión localizada del SDK de Facebook para JavaScript. Cuando lo hagas, ajusta el valor js.src para usar tu idioma: solo tienes que reemplazar en_US con tu código de idioma. Por ejemplo, fr_FR para francés (Francia):

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.6";

Puedes consultar los idiomas que se admiten en el archivo FacebookLocales.xml. Posiblemente, deberás ajustar el ancho del plugin social para adaptarlo a los distintos idiomas. Para obtener más información, visita la página Localización y traducción.