Poner una tarjeta en tu propio sitio
Una tarjeta puede vivir dentro de una página que ya tienes (la de un equipo, una entrada de la intranet, un sitio hecho para la ocasión), como un marco que sostiene la tarjeta de verdad y no una foto de ella.
Qué es la inserción
La misma tarjeta, dibujada sin Noya alrededor: sin la cabecera del sitio, sin controles de edición, sin nada que pertenezca a quien la hizo. Quien lea tu página puede leer las tarjetas y añadir la suya, exactamente igual que en el enlace. Los buscadores no indexan la tarjeta enmarcada, y todo lo que en ella lleve de vuelta a Noya se abre en una pestaña nueva y no dentro de tu página.
El código
Pega esto donde deba ir la tarjeta y sustituye YOUR_WALL_ID por el id de tu propia tarjeta: la parte de su enlace que va después de /c/.
<iframe data-noya-src="https://noya.so/embed/YOUR_WALL_ID" width="100%" height="720" style="border:0;width:100%;" title="Noya" loading="lazy" allow="camera; microphone" referrerpolicy="no-referrer-when-downgrade"></iframe>
<script>(function(d){var w="https://noya.so/noya-embed.js",v=function(){if(window.noyaEmbed){window.noyaEmbed.load()}else{d.querySelectorAll("iframe[data-noya-src]:not([src])").forEach(function(f){f.src=f.getAttribute("data-noya-src")})}};if(window.noyaEmbed){v()}else if(!d.querySelector('script[src="'+w+'"]')){var s=d.createElement("script");s.src=w;s.async=true;s.onload=v;s.onerror=v;(d.body||d.head).appendChild(s)}})(document);</script>Qué puedes cambiar
El marco es un iframe corriente, así que sus atributos son tuyos para adaptarlos a la página en la que aterrice.
| Atributo | Qué hace |
|---|---|
| width | Cuánto mide de ancho el marco. Dejado en 100% ocupa el ancho de la columna en la que esté. |
| height | Cuánto mide de alto el marco, en píxeles. El marco no crece según crece la tarjeta, así que una tarjeta más alta que eso se desplaza por dentro. |
| title | Cómo se llama el marco para los lectores de pantalla, y para quien navegue sin imágenes. |
| loading | Dejado en lazy, la tarjeta solo se descarga cuando quien lee se acerca a ella. |
Un ejemplo resuelto
El mismo fragmento con el id de una tarjeta puesto y una altura elegida para la página en la que va.
<iframe data-noya-src="https://noya.so/embed/b7Kq2mXsPnR4" width="100%" height="1000" style="border:0;width:100%;" title="Noya" loading="lazy" allow="camera; microphone" referrerpolicy="no-referrer-when-downgrade"></iframe>
<script>(function(d){var w="https://noya.so/noya-embed.js",v=function(){if(window.noyaEmbed){window.noyaEmbed.load()}else{d.querySelectorAll("iframe[data-noya-src]:not([src])").forEach(function(f){f.src=f.getAttribute("data-noya-src")})}};if(window.noyaEmbed){v()}else if(!d.querySelector('script[src="'+w+'"]')){var s=d.createElement("script");s.src=w;s.async=true;s.onload=v;s.onerror=v;(d.body||d.head).appendChild(s)}})(document);</script>Vale la pena
- Deja el ancho en 100% para que la tarjeta siga tu diseño en vez de salirse de él.
- Elige una altura por dentro de la que no te importe desplazarte, y súbela cuando la tarjeta se llene.
- Deja la carga diferida. Una tarjeta que está más abajo en una página no debería retrasar lo de arriba.
- Inserta el enlace de invitación, nunca el de entrega. Una tarjeta en una página que has publicado es una tarjeta en la que se espera que la gente escriba, y no es para eso el enlace de entrega.
Dónde encontrarlo en Noya
No hace falta que copies nada de esta página. Abre Insertar en la barra de herramientas de la tarjeta y ahí está el fragmento con el id de esa tarjeta ya puesto, y un botón que lo copia todo.