Plugin de citas

El plugin de citas permite a las personas seleccionar texto en tu página y agregarlo 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 a través de la revisión de aplicaciones.

Compartir citas para web móvil

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

Compartir citas para iOS y Android

Si la aplicación es nativa para iOS o Android, debes 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ódigoConfiguración

Prueba el plugin

Selecciona una parte de esta frase para ver cómo funciona el plugin.

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 de que 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>
Probar

Comentarios de código

  1. OG Tags: puedes usar etiquetas de Open Graph para personalizar 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 resaltes texto dentro de ese contenedor. En este ejemplo, se muestra solo cuando resaltas texto dentro del cuerpo.

Configuración

Puedes modificar las opciones siguientes:

Configuración Atributo HTML5 Descripción Valor predeterminado

href

data-href

La URL absoluta de la página que deseas citar.

La URL actual

layout

data-layout

  • quote: al seleccionar texto, se muestra un botón con un icono azul de Facebook con el texto "Compartir cita" como una superposición. Cuando una persona hace clic en él, se 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 citables

Tal vez no sea necesario que todas las partes de tu página web se puedan citar, por ejemplo, menús, barras laterales, pies de página. Para definir las áreas de tu página que se pueden citar, puedes usar:

  • Elementos HTML <article>
  • Cualquier elemento con el nombre de clase fb-quotable

Puedes mezclar y asociar la cantidad que quieras de ambos y definir las áreas que se pueden citar.

Si tu página no contiene <article> ni class="fb-quotable", todas las áreas se podrán citar.

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, cambia el valor de js.src para usar la configuración regional. Reemplaza en_US con la configuración regional. Por ejemplo, fr_FR para francés (Francia):

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

El archivo Facebook Locales XML contiene las configuraciones regionales que se admiten. Posiblemente, deberás ajustar el ancho del plugin social para adaptarlo a las distintas configuraciones regionales. Para obtener más información, visita la página Localización y traducción.