Añadir información cuando alguien hace copy & paste

7 de julio de 2014 58 comentarios ,

Esta no es una forma de evitar que alguien nos copie contenido del blog, si no de agregar la URL de nuestro blog cuando alguien nos copie el texto de alguna entrada. Por ejemplo, si copias el texto del siguiente párrafo y lo pegas en el recuadro de abajo, aparecerá la URL de esta entrada así como el nombre de este blog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut augue nibh. Aliquam erat volutpat. Nullam sodales nunc eu euismod convallis. Vivamus ornare placerat ipsum, luctus scelerisque libero vehicula nec. Fusce varius quis leo at facilisis. Quisque nec dolor dui. In sed odio non augue lacinia congue. Curabitur et turpis ante. Integer eu turpis a odio accumsan dignissim. Sed id ornare metus. Sed consequat felis non mi molestie, sit amet.


En este caso verás que el enlace es sólo un texto, pero si quien lo copia lo pegara estando en la pestaña "Redactar" entonces se copiará como un enlace HTML.

Ciertamente quien copie podrá borrar esa información extra que hemos añadido, pero también existe la posibilidad de que la deje, o incluso que agregue una referencia más formal sobre el blog donde lo ha tomado y eso se transforma en más tráfico para el blog.

Tynt ofrece ese servicio desde hace mucho, y adicionalmente ofrece otras características como datos estadísticos. Es una buena alternativa, pero yo soy de los que no le gusta mucho depender de servicios externos, sobre todo si podemos ahorrarnos muchas líneas de código.

Este método usa jQuery para que pueda ser servible en todos los navegadores, y el código es mucho más corto que el que los servicios externos ofrecen.

Para ponerlo en tu blog sólo entra en Plantilla | Edición de HTML y antes de </body> agrega lo siguiente:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
//<![CDATA[
// Añadir información extra al hacer copy & paste
$("body").bind('copy', function (e) {
if (typeof window.getSelection == "undefined") return;
var miblog = document.getElementsByTagName('body')[0];
var seleccionar = window.getSelection();
if (("" + seleccionar).length < 10) return;
var nuevodiv = document.createElement('div');
nuevodiv.style.position = 'absolute';
nuevodiv.style.left = '-99999px';
miblog.appendChild(nuevodiv);
nuevodiv.appendChild(seleccionar.getRangeAt(0).cloneContents());
if (seleccionar.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {
nuevodiv.innerHTML = "<pre>" + nuevodiv.innerHTML + "</pre>";
}
nuevodiv.innerHTML += "<br/><br/>Artículo original: <a href='"
+ document.location.href + "'>"
+ document.location.href + "</a><br/>&copy; Nombre de mi blog";
seleccionar.selectAllChildren(nuevodiv);
window.setTimeout(function () { miblog.removeChild(nuevodiv); }, 200);
});
//]]>
</script>
Si ya tuvieras jQuery en tu plantilla entonces omite la primera línea. Ahí verás dónde cambiar el nombre de tu blog, y si lo deseas también puedes cambiar el texto que dice "Artículo original:", puedes ponerle "Más información en:" o lo que gustes.

El script tiene una condición, para cuando el texto que se copie sea muy corto entonces no se ejecute, por ejemplo, habrá quien sólo quiera copiar una palabra o dos, ahí no vale la pena mostrar la información de referencia ya que no está copiando como tal el contenido de tu entrada. Esta condición está determinada por el número de caracteres que se copien, que por defecto la hemos puesto en 10 ese valor lo puedes modificar por uno más alto o uno más corto.

Vía | JitBit


58 comentarios en:

" Añadir información cuando alguien hace copy & paste "

  1. Esta Genial Potro, Lo Estaba Esperando hehe, Gracias .D

    ResponderEliminar
  2. ¡Esto es justo lo que buscaba! Muchas gracias Potro, desde ahora lo implementaré en el blog :)

    ResponderEliminar
  3. Exelente truco, espero que la conciencia de los tipos copy paste, recincideren lo que esta haciendo cuando vean ese mensajito

    ResponderEliminar
    Respuestas
    1. Pues eso David, quizá este código pueda ser la voz de la conciencia de quien copia y se anime a dejar la referencia.

      Eliminar
  4. Potro, cuando lo agrego a mi blog deja de funcionar un slideshow que tengo. ¿A que se debe esto? ¿Como puedo solucionarlo?

    ResponderEliminar
    Respuestas
    1. Si ya tienes jQuery entonces omite la primera línea para evitar que otros elementos de tu blog que usan jQuery dejen de funcionar.

      Eliminar
    2. Si elimino la primera linea entonces no funciona el script :(

      Eliminar
    3. ¿El slideshow usa jQuery, u otra librería de scripts? de ser lo segundo, ¿cuál librería?

      Eliminar
    4. Si amigo, usa JQuery. El blog es este: http://escubiro.blogspot.com

      Eliminar
    5. Parece que no son compatibles, quizá quieras probar con Tynt, con ellos es casi seguro que no tendrás ese problema.

      Eliminar
    6. Lo primero mil gracias Potro
      He solucionado el problema de compatibilidad, con las librerias.
      Lo unico que hay que hacer es copiar todo el script al final del body y funciona !!!

      pudes comprobarlo en mi blog http://murciabusinessleadership.blogspot.com.es

      Eliminar
    7. No sé en dónde lo habías puesto entonces, porque en la entrada se explica que va antes de </body>
      En fin, lo importante es que ya te funciona :)

      Eliminar
  5. Muy bueno Potro la entrada. Gracias

    ResponderEliminar
  6. wow!! Me leíste la mente!!! Voy a aplicarlo en mi blog!!! Mil gracias, Potro! =)

    ResponderEliminar
  7. Muchas gracias Potro! lo que pasa es que tenía otro script funcionando y ahora no soy capaz de quitar el anterior, me puedes ayudar? el blog es: http://www.rezetasdecarmen.com/

    ResponderEliminar
    Respuestas
    1. Hola lourdes, "copio y pego" la respuesta que te di en Facebook ;)

      "He entrado a tu blog pero no he encontrado algún método similar al de esa entrada, no sé si ya has conseguido eliminarlo, en caso contrario dime de qué entrada lo has tomado para saber qué código debo buscar en tu plantilla."

      Saludos.

      Eliminar
  8. Muchas gracias, Potro. Justo lo que buscaba. Dios te bendiga. Saludos.

    ResponderEliminar
  9. Hola Potro!! ES la primera vez que te comento ,pero te sigo desde hace tiempo y me encantan tus tutoriales. Estoy instalando los iconos de redes sociales de este post tuyo y tengo un problema en la instalación. Te dejo allí la consulta. Te agradecería muchísimo que me ayudaras.
    Un saludo

    http://ciudadblogger.com/2012/11/iconos-de-redes-sociales-arriba-del-blog-que-giran-al-pasar-el-cursor.html

    ResponderEliminar
    Respuestas
    1. Hola Verónica, ya te he respondido en esa entrada. ¡Saludos!

      Eliminar
  10. Hola, Potro, muy buenas noches, esta entrada me parece muy útil, la emplearé en uno de mis blogs. Me gustaría que puedas poner alguna información para evitar que copien las entradas del blog, y que aparezca un mensaje de alerta informando sobre no copiar. Gracias de antemano, buen amigo, que tengas una excelente noche.

    ResponderEliminar
    Respuestas
    1. Hola Dante, aquí hay tres opciones, aunque todas ellas son vulnerables:

      http://ciudadblogger.com/2009/08/evitar-que-te-copien-el-texto-de-tu.html
      http://ciudadblogger.com/2009/05/protege-tus-imagenes.html
      http://ciudadblogger.com/2009/10/como-evitar-que-te-copien-imagenes-y.html

      Eliminar
    2. Gracias amigo, voy a leer bien estas entradas, que tengas una excelente tarde.

      Eliminar
  11. Hola Potro cómo estas? Necesito ayuda urgente! Mira lo que me pasó: http://forobeta.com/adsense/345372-ayuda-adsense-inhabilito-anuncios-mi-blog.html
    Qué puedo hacer?
    Ayuda por favor!

    ResponderEliminar
    Respuestas
    1. Hola Pozo+10™, no sé cuál sea la razón exacta por la que AdSense ha tomado esa decisión. No creo que sea por la flecha como te mencionan en ese foro, yo me atrevería a pensar que es por la otra publicidad flotante que tienes y que justamente al abrirse se encima en el anuncio, lo cual podría generar clics accidentales, que quizás AdSense podría considerar que es intencional.
      Pero lo mío es sólo suposición, pues si bien las reglas de AdSense son muy claras, la forma como las interpretan sus empleados no.

      Eliminar
    2. Puede ser esa opción que me das también, si. Ya cambié varias cosas que me comentaron en el foro de ayuda de AdSense, entre las cuales figura el botón de ir arriba. El empleado de Google me comentó que en ciertas resoluciones de pantallas o según la configuración de tu monitor, la flecha se superpone al anuncio de 160x600 y lo apunta directamente. Ya mandé la reconsideración, espero me acepten de nuevo. Gracias por tu opinión!

      Eliminar
  12. Busqué varias veces añadir este artilugio y no encontraba ninguna página que informara como aplicarlo. ¡¡Gracias!!

    ResponderEliminar
    Respuestas
    1. Me alegro entonces que al fin hayas encontrado cómo añadirlo, y que lo hayas encontrado aquí :)

      Eliminar
  13. Hola Potro, gracias por publicar este post, la verdad lo estaba esperando. Quiero saber como agregar tambien mi usuario de twitter, por ejemplo, al copiar y pegar que se vea así, osea el fragmento después del link del post:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut augue nibh. Aliquam erat volutpat.


    Read more: URL del post — Follow us: @Usuario on Twitter

    ResponderEliminar
    Respuestas
    1. Hola Little Monsters, para añadir tu usuario de Twitter cambia esta parte:
      nuevodiv.innerHTML += "<br/><br/>Artículo original: <a href='"
      + document.location.href + "'>"
      + document.location.href + "</a><br/>&copy; Nombre de mi blog";

      Por esta:
      nuevodiv.innerHTML += "<br/><br/>Artículo original: <a href='"
      + document.location.href + "'>"
      + document.location.href + "</a> — Síguenos: <a href='http://twitter.com/usuario'>@Usuario en Twitter</a> <br/>&copy; Nombre de mi blog";
      seleccionar.selectAllChildren(nuevodiv);


      Ahí cambia lo que está en negrita.

      Eliminar
  14. Potro, tengo un pequeño problema, mi blog tiene un slider que ya antes utlizaba jQuery, pero al intentar agregar lo que va antes de body omitiendo la primera linea no me funciona, pero al agregarla se desaparece el slider y funciona. Intenté agregar la ultima version del jQuery al slider pero igual se desaparece.

    ResponderEliminar
    Respuestas
    1. Prueba cambiando esto:
      $("body").bind('copy', function (e) {

      Por esto:
      jQuery("body").bind('copy', function (e) {

      Eliminar
    2. Gracias Potro! Me funciona de maravilla. Quiero agradecerte profundamente el tiempo que tomas al contestar a cada uno de los comentarios de tu blog, esto demuestra que de verdad lo haces sin recibir nada a cambio.

      Eliminar
    3. Pero sí recibo algo a cambio, recibo su cariño, y eso es in-com-pra-ble ;)

      Eliminar
  15. me parece muy buena esta función, ya que soy escritora amateur y bueno, no quiero que copien mis historias aunque las protejo con copyright, lastima que no la puedo poner, ya que hago sorteos en mi blog y a la hora de que copien el link para el banner se copia la firma y no el banner, ¿o hay una solución para esto?

    ResponderEliminar
    Respuestas
    1. Hola Mile, tal vez si los códigos de los banners estuvieran en la sidebar se podría hacer algo, pero como están dentro de los posts no veo la manera de que puedas usarlo sin que te afecte esa opción :(

      Eliminar
  16. Muchas gracias me funciona muy bien.... un saludo

    ResponderEliminar
  17. Hola Potro, muy buen aporte. Ya lo he añadido aquí: http://www.sensibilidadquimicamultiple.org/ Pero al dar a copiar y pegar en vez de salir el enlace al post lo que se ve en el link del blog. He copiado y pegado lo que pones, y sólo he cambiado la parte que pone "Nombre de mi blog", por el nombre de mi espacio (por cierto, ando de cambios con él: desde hace unos días le he puesto dominio y otro nombre --aunque con un recordatorio al antiguo, para despistados: era Mi Estrella de Mar. te lo digo para que me "identifiques", que soy la misma de siempre y con el mismo espacio, pero que estoy renovando un poquito -) ;)

    ¡Ya me dirás qué pueda haber pasado al querer poner tus indicaciones! ;)
    Un gran abrazo,

    ResponderEliminar
    Respuestas
    1. Hola María José, yo lo veo trabajando bien, toma en cuenta que si estás en la portada tomará la URL de la portada, no de la entrada. Para que salga la URL del post es necesario que estés dentro de la entrada individual.

      Otro abrazo para ti y suerte con las renovaciones ;)

      Eliminar
  18. Muy bueno, lo estuve buscando pero no encontré nada bueno, gracias :3

    ResponderEliminar
  19. Lo he estado buscando hace tiempo. Gracias

    ResponderEliminar
  20. Gracias Potro.... Feliz con tu regreso, no puedes ver si se puede hacer algo para ocultar enlaces y cuando le das clic salte un pop-up a una pagina. te lo dejo no esta bien expresado espero que entiendas, gracias!

    ResponderEliminar
    Respuestas
    1. Creo que entiendo la idea, algo así como lo hacen algunos foros cuando ocultan sus links ¿no?
      Alguna vez estuve tratando de encontrar la forma de hacerlo pero no tuve éxito, si más adelante descubro cómo hacerlo lo publico ;)

      Eliminar
  21. Hola potro muy buen post. quiero ayuda.
    Cuando copio el contenido de mi blog no sale solo la url sale también otra mas abajo así:

    Fuente: http://www.ecoevolucion.biz/2014/08/ebola-conosca-mas-sobre-la-enfermedad.html
    © Ecoevolucion - See more at: http://www.ecoevolucion.biz/2014/08/ebola-conosca-mas-sobre-la-enfermedad.html#sthash.K1s8nev4.dpuf

    :/ como podría hacer que salga solo una, o sea solo esto:

    Fuente: http://www.ecoevolucion.biz/2014/08/ebola-conosca-mas-sobre-la-enfermedad.html
    © Ecoevolucion

    ResponderEliminar
    Respuestas
    1. Hola Jimmy, supongo que antes de este estabas usando otro script que hace lo mismo. Sólo debes quitar el otro script que habías puesto para quedarte sólo con el que se explica en esta entrada.

      Eliminar
  22. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  23. Gracias Carlos. He tenido que eliminar el comentario por el aviso que está aquí en el formulario. Saludos.

    ResponderEliminar
  24. Estimado Potro:

    Tengo dos preguntas que deseo compartirte:

    1) ¿Esto es aplicable a las plantillas vistas dinámicas?
    2) ¿Cómo puedo identificar si en mi blog ya poseo jQuery?

    ¡Gracias por leerme! ;)

    ResponderEliminar
    Respuestas
    1. Hola Se Fam,

      1) Hasta donde sé, no.
      2) Busca la palabra jQuery y verás si ya tienes algún script con esa librería.

      ¡Saludos!

      Eliminar
  25. Me sirvió mucho
    Gracias!!
    Saludillos!! <3

    ResponderEliminar
  26. ¡Me sirvió muchísimo Potro! Éste es mi blog: http://graphmarker.blogspot.mx/
    Me sirves de guía

    ResponderEliminar
  27. ¡Me sirvió muchísimo Potro! Éste es mi blog: http://graphmarker.blogspot.mx/
    Me sirves de guía

    ResponderEliminar
  28. hola, ¿Como se hace para que se solo en algunas entradas?

    Saludos

    ResponderEliminar
  29. Hola, esto estuvo genial, ya funciona bien, pero como hago para que no ponga el copyright en cada parrafo, si no en un material detallado, osea, si hacen copia de 3 parafos, sale 3 veses el copyright

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger