La forma más rápida de promover nuestro web site es a través de las redes sociales como Facebook, Twitter, Buzz entre otros. Entonces es recomendable crear los enlaces para que nuestros visitantes puedan agregarlo directamente a su red o marcador social favorito.
URLs para Redes Sociales
Lo primero es conocer el formato de las URLs de las diferentes redes sociales, hay gran cantidad de estos servicios pero solo utilizaremos las mas utilizadas. El siguiente listado presenta los formatos de enlaces en donde URL es el enlace de la página que deseamos compartir y TITLE es el titulo que deseamos asignar al enlace que vamos a compartir.
- Delicious: http://delicious.com/save?v=5&url=URL&title=TITLE
- Digg: http://digg.com/submit?url=URL&title=TITLE
- Facebook: http://www.facebook.com/sharer.php?u=URL&t=TITLE
- Technorati: http://technorati.com/faves?add=URL&title=TITLE
- Twitter: http://twitter.com/home?status=TITLE – URL
- Meneame: http://meneame.net/submit.php?urlURL
- Reddit: http://reddit.com/submit?url=URL&title=TITLE
- StumbleUpon: http://www.stumbleupon.com/submit?url=URL&title=TITLE
- Google Buzz: http://www.google.com/reader/link?url=URL&title=TITLE
Estos urls los podemos crear manualmente o con nuestro lenguaje de programación favorito para darle a nuestro web mayor interactividad.
Clase para Crear links a Redes Sociales
Con la información de los formatos de URLs decidimos crear una clase para facilitar la creación de estos enlaces. Esta clase la hemos llamado SocialClass que recibe cuatro parámetros: el url, titulo, target y tipo de resultado.
// File: socialclass.php // Web: http://blog.unijimpe.net // Date: 13/03/2010 class SocialClass { var $url; var $title; var $target; var $type; function SocialClass($_url, $_title, $_target = "", $_type = "link") { $this->url = urlencode($_url); $this->title = urlencode($_title); $this->setTarget($_target); $this->setType($_type); } function setTarget($_target) { if ($_target != "") { $this->target = " target=\"".$_target."\""; } } function setType($_type) { $this->type = $_type; } function write($path, $label = "") { if ($this->type == "link") { return "target.">".$label.""; } else { return $path; } } function delicious($label = "Delicious") { $path = "http://delicious.com/save?v=5&url=".$this->url."&title=".$this->title; return $this->write($path, $label); } function digg($label = "Digg") { $path = "http://digg.com/submit?url=".$this->url."&title=".$this->title; return $this->write($path, $label); } function facebook($label = "Facebook") { $path = "http://www.facebook.com/sharer.php?u=".$this->url."&t=".$this->title; return $this->write($path, $label); } function technorati($label = "Technorati") { $path = "http://technorati.com/faves?add=".$this->url."&title=".$this->title; return $this->write($path, $label); } function twitter($label = "Twitter") { $path = "http://twitter.com/home?status=".$this->title." - ".$this->url; return $this->write($path, $label); } function meneame($label = "Meneame") { $path = "http://meneame.net/submit.php?url=".$this->url; return $this->write($path, $label); } function reddit($label = "Reddit") { $path = "http://reddit.com/submit?url=".$this->url."&title=".$this->title; return $this->write($path, $label); } function stumbleupon($label = "StumbleUpon") { $path = "http://www.stumbleupon.com/submit?url=".$this->url."&title=".$this->title; return $this->write($path, $label); } function buzz($label = "Google Buzz") { $path = "http://www.google.com/reader/link?url=".$this->url."&title=".$this->title; return $this->write($path, $label); } }
Para utilizar la clase primero incluimos el archivo y luego inicializamos el elemento con cuatro parámetros, en donde los dos primeros son necesarios y los dos últimos son opcionales:
$social = new SocialClass($url, $title, $target, $type);
- $url: es el enlace de la página que deseamos compartir.
- $title: es el título a mostrarse con el enlace a compartir.
- $target: el target del enlace, por defecto se abre en la misma ventana.
- $type: es el tipo de resultado (link o url) por defecto el tipo es link.
Luego de ello podemos utilizar los siguientes métodos: delicious, digg, facebook, technorati, twitter, meneame, reddit, stumbleupon, buzz los cuales aceptar como parámetro un texto opciones para imprimir como texto del enlace a crear.
Veamos un ejemplo de uso de esta clase, en donde crearemos los enlaces recomendar para este blog.
- delicious(); ?>
- digg(); ?>
- facebook(); ?>
- technorati(); ?>
- twitter(); ?>
- meneame(); ?>
- reddit(); ?>
- stumbleupon(); ?>
- buzz(); ?>
Ahora podríamos modificar el uso de esta clase y crear los enlaces que se abran en ventana nueva y cambiarlo en nombre a los enlaces:
- delicious("Guardar en Delicious"); ?>
- digg("Enviar a Digg"); ?>
- facebook("Compartir en Facebook"); ?>
- twitter("Publicar en Twitter"); ?>
Finalmente si deseamos utilizar imagenes para los enlaces podríamos utilizar el tipo url para crear los enlaces de la forma:
Pueden ver el ejemplo funcionando en http://samples.unijimpe.net/socialclass/ y como pueden ver esta clase es sencilla de utilizar, tambíen pueden extender esta clase e incluir el servicio de su preferencia y si tienen sugerencias para mejorar esta clase pueden dejar su comentario.
[download id=»35″ autop=»false»]
Mas Información
Comentarios Total 42 comentarios
Publicado: 15/03/2010 6:44 am
En meneame en la funcion le falta el = en la url
Publicado: 15/03/2010 11:25 pm
Jose gracias por la observación, efectivamente faltaba el simbolo igual en la generación del URL para Meneame. He corregido el código fuente y el archivo para la descarga.
Publicado: 22/03/2010 11:53 pm
Que bueno lo estaba buscando …
Publicado: 25/03/2010 6:54 pm
Genial! Justo lo que andaba buscando!
Publicado: 29/03/2010 7:57 am
hola unijimpe, te cuento q estoy haciendo una pagina para mi hermana, y googleando encontre un reproductor con playlisr para vjdeos de youtube y funcjona pero tiene un problema en el playlist,esta en as2,no se nada de codigos y queria pedirte tu ayuda, aca fe dejo el link, http://www.megaupload.com/?d=2OTCZSVH —–gracias
Publicado: 02/04/2010 2:12 pm
[…] post: Crear enlaces para compartir en Redes Sociales | unijimpe Tags: seo, […]
Publicado: 05/04/2010 2:08 pm
todo esta muy bien y me funciona a la perfeccion pero como hago para que cuando este publicado se vea una imagen miniatura del enlace
Publicado: 05/04/2010 2:23 pm
Explica bien tu pregunta Jorge no entiendo a que te refieres con imagen miniatura.
Publicado: 05/04/2010 7:20 pm
OK , me refiero a que cuando ya esta publicado me sale el nombre de la pagina a linkear http://www.algo.com pero yo he visto publicaciones donde veo que sale una imagen de la pagina como en miniatura no se si me doy a entender osea si quiero publicar una promocion, aparece la imagen de la promocion
Publicado: 06/04/2010 3:46 am
esto es lo que tengo
<a href="http://facebook.com..." target="_blank" rel="nofollow">Compartir</a>
y cuando se publica me sale una imagen miniatura de FB como hago para q me salga otra img
Publicado: 06/04/2010 8:57 pm
Jorge, cuando tu pones el enlace compartir en Facebook te redirige a una página donde una aplicación de Facebook lee tu pagina y extrae el titulo, resumen y una imagen. Si deseas personalizar estos datos que se muestran en facebook puedes agregar Metatags de la siguiente forma:
<meta name="title" content="titulo-a-mostrar" />
<meta name="description" content="resumen-a-mostrar " />
<link rel="image_src" href="ruta-del-thumbnail-a-mostrar" />
Para mayor información acerca de estos parámetros puedes leer: Facebook Share/Specifying Meta Tags.
Publicado: 24/04/2010 6:33 pm
Junto con esta Clase para acortar las URLs es genial:
http://classes.verkoyen.eu/bitly/
usando bit.ly para proteger los enlaces automaticamente…. (pueden ver mi web para ver el ejemplo online)
SALUDOS
Publicado: 26/05/2010 12:56 am
Esta genial, todo lo que sale de esta pagina es de gran calidad y utilidad
Podrías hacer que busque «http://» o «ftp://» dentro de la url dada(y si no esta busque el dominio de la pagina antes de agregar http://)
También se podría cambiar write($path, $label = «») por write($path, $label = $path) (o dentro de write ver: if($label=»»){$label=$path;})
Publicado: 08/06/2010 1:38 pm
Hola unijimpe tengo un problemita..mira puse el shared en mi galeria de fotos..pero cuando le doy al boton compartir me tira 8 imagines miniaturas..y yo solo quiero que me muestre solo una es decir..la imagen (foto) que quiero compartir en facebook. como se podria solucionar..o sea me esta mostrando imagenes como por ejemplo el footer de la pagina, las imagenes de los blockes etc.
Publicado: 09/06/2010 5:22 am
Hola Unijimpe
Me parece sensacional este plugin, el cual he incorparado a mi web, pero noté que no pasaba el validador de W3C y me dí cuenta de que en la linea 50 de socialclas.php, en la linea de twitter, habria que poner:
$path = "http://twitter.com/home?status=".$this->title."%20-%20".$this->url;
en lugar de$path = "http://twitter.com/home?status=".$this->title." - ".$this->url;
Además alli donde aparece el &, habria que sustituirlo por &
Por lo demás excelente aporte.
Yo lo uso en combinación con el iframe del botón de «Me gusta» de Facebook. Quizas podrias plantearte el crear algo que lo incluyese todo junto.
Ya nos contarás.
Gracias por tu tiempo.
Publicado: 09/06/2010 5:24 am
Perdón, antes se me olvidó poner code para que se entienda lo de
sustituir & por
&
Publicado: 15/06/2010 12:12 pm
Con las 2 clases creadas por el gran Unijimpe se puede hacer el share usando bit.ly:
require("socialclass.php");
require("bitly.php");
$bitly = new Bitly("username", "key");
$titulo = "titulo del enlace";
$urlmin = $bitly->shorten("http://www.urlparaacortar.com");
$social = new SocialClass($urlmin, $titulo,"_blank",$url);
Saludos y gracias por estos 2 excelentes recursos!
Publicado: 14/07/2010 3:59 pm
BUENISIMO! no sabes lo que andube buscando esa esa informacion!!! Muchas gracias por compartir sobre «como compartir» je.
Publicado: 15/09/2010 12:57 pm
Buena informacion, saludos At Shuberth Chi Balam
Publicado: 07/11/2010 12:51 pm
Gracias por la información detallada, próximamente la probaré y les diré que tal me fué =).
Publicado: 08/11/2010 6:57 pm
Hola, sabrias como podria aplicarlo en drupal?
gracias
Publicado: 13/11/2010 7:06 am
gracias amigos
Publicado: 22/11/2010 5:10 pm
excelente explicacion
Publicado: 23/11/2010 1:02 pm
Tienen lo mismo para Linkedin?
Gracias
Publicado: 29/12/2010 10:42 am
Funciona, bien, pero tengo un problema, yo genero el titulo dinamicamente y si tiene acentos o algun caracter raro me da error al querer compartirlo o publicarlo.
Publicado: 29/12/2010 4:24 pm
Hola, disculpa por mi ignorancia pero apenas estoy comenzando con los blogs y no se donde o como tengo que utilizar estos códigos.
Me podrías ayudar por favor
Publicado: 17/04/2011 6:58 pm
Hola, por ejemplo si pongo dos botones de compartir en una misma web, uno para un tipo de contenido y otro para otro digamos, los dos están en la misma url, se que se puede manipular la miniatura que se muestre cuando lo comparta con
quiero saber si se puede personalizar la miniatura para los dos botones, siendo que direccionarian a la misma pagina pero referenciando a diferente contenido.
sin importar tanto el resumen, podria ser el mismo, pero la imagen miniatura que sea diferente, Se puede hacer eso?
de antemano Gracias!
Publicado: 03/05/2011 4:54 pm
Hola! muchas gracias por la explicacion … esta buenisima!!!
ahora bien, pregunta: como hago para que si quiero compartir en facebook me tome el titulo de la entrada … porque no lo encuentro como hacer…
la variable t
http://www.facebook.com/sharer.php?u=URL&t=TITLE
no la toma …. no se porque .. como que la toma al principio y despues la cambia por el titulo de la pagina ….
ademas, sabes si se puede personalizar tambien la descripcion?
saludos y muchas gracias!
Publicado: 03/05/2011 8:54 pm
Pablo, para personalizar el contenido que se comparte en facebook se utilizan algunos tags personalizados. Para una guía puedes leer: http://davidwalsh.name/facebook-meta-tags
Publicado: 26/05/2011 10:03 am
Excelente! Justo lo que estaba buscando para implementar en la web de la empresa donde trabajo. Ahora un consulta, ¿cómo podría hacer para que la URL sea la de la sección en la que se encuentra el visitante?.
Publicado: 04/07/2011 12:23 am
Muy bueno, un poco largo pero muy util.
Publicado: 07/07/2011 1:02 pm
Muy util para nuestras webs
Publicado: 11/08/2011 2:26 pm
Tengo un SMF y no sé donde colocarlo, ayudame, o agregame al messenger si no es mucho pedir kaco_93_@hotmail.com
Publicado: 28/08/2011 1:37 pm
hola exelente el codigo lo andaba buscando..
Publicado: 20/10/2011 11:36 pm
Muy buen código y buena explicación, estoy haciendo un sitio con cakephp y tenía que introducir estos links.
Muchas gracias por el trabajo que te tomaste!
Publicado: 09/11/2011 10:29 pm
Hola, gracias por el código, en verdad es muy útil, pero cómo puedo agregar el texto «unijimpe es un blog donde encontraras tutoriales, noticias y recomendaciones de Desarrollo Web. Tenemos articulos sobre PHP, MySQL, SEO, ActionScript, AdSense, Mootools, AJAX, CSS y mucho mas.» que pusiste en tu ejemplo de aplicación funcionando?, por tu respuesta gracias.
Publicado: 22/11/2011 4:45 am
Hola a todos,
Tengo página en facebook. Me gustaría, si es que sois tan amables, saber como puedo promocionarla. Tengo facebook dentro de mi web.
saludos
Jorge
Publicado: 19/05/2012 6:46 pm
Muy buena la aplicación, me funciona bien, excepto algo, estoy usando como links las imágenes y quiero el enlace se abra en una ventana nueva. Hice la modificación al código como se ve acá:
Sin embargo se sigue abriendo en la misma ventana… qué pudo hacer?
Desde ya gracias!
Publicado: 19/05/2012 6:49 pm
Muy buena la aplicación, me funciona bien, excepto algo, estoy usando como links las imágenes y quiero el enlace se abra en una ventana nueva. Hice la modificación al código como se ve acá:
«http://revistadivergencia.cl», «Revista de Historia Política», «_blank», «url»);
Sin embargo se sigue abriendo en la misma ventana… qué pudo hacer?
Desde ya gracias!
Publicado: 28/05/2012 7:50 pm
Gracias, lo que necesita :D, buen código
Publicado: 30/05/2012 6:41 pm
Gracias por la ayuda, justo los códigos que estaba buscando para ponerlos en mi web y tener más presencia en internet. Saludos.
Publicado: 03/06/2012 8:46 am
Saludos. tengo un problema al tratar de hacer que los links se abran en nuevas pestañas cuando uso imágenes. Sigue abriéndose en la misma pestaña. Modifiqué el código como se ve a continuación, pero aun así sigue igual.
<?php $social = new redes("http://revistadivergencia.cl", "Revista de Historia Política", "_blank", "url"); ?>
Espero que me puedan ayudar. De antemano gracias