Crear enlaces para compartir en Redes Sociales

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

Posts Relacionados

Comentarios Total 42 comentarios

Jose
Publicado: 15/03/2010 6:44 am

En meneame en la funcion le falta el = en la url

unijimpe
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.

jamc
Publicado: 22/03/2010 11:53 pm

Que bueno lo estaba buscando …

adri
Publicado: 25/03/2010 6:54 pm

Genial! Justo lo que andaba buscando!

claudio
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

wp-popular.com » Blog Archive » Crear enlaces para compartir en Redes Sociales | unijimpe
Publicado: 02/04/2010 2:12 pm

[…] post: Crear enlaces para compartir en Redes Sociales | unijimpe Tags: seo, […]

jorge
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

unijimpe
Publicado: 05/04/2010 2:23 pm

Explica bien tu pregunta Jorge no entiendo a que te refieres con imagen miniatura.

jorge
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

jorge
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

unijimpe
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.

jack
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

FCR
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;})

Juan
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.

Aqua2webs
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.

Aqua2webs
Publicado: 09/06/2010 5:24 am

Perdón, antes se me olvidó poner code para que se entienda lo de
sustituir & por &

Satchmo
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!

Luciana
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.

shuberth
Publicado: 15/09/2010 12:57 pm

Buena informacion, saludos At Shuberth Chi Balam

Vijaer
Publicado: 07/11/2010 12:51 pm

Gracias por la información detallada, próximamente la probaré y les diré que tal me fué =).

Laureano
Publicado: 08/11/2010 6:57 pm

Hola, sabrias como podria aplicarlo en drupal?

gracias

publicaciones gratis
Publicado: 13/11/2010 7:06 am

gracias amigos

ARMANDMARTINEZ
Publicado: 22/11/2010 5:10 pm

excelente explicacion

koko
Publicado: 23/11/2010 1:02 pm

Tienen lo mismo para Linkedin?

Gracias

Mauricio
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.

Antonio
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

efenix
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!

pablo
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!

unijimpe
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

Alex
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?.

Claudio
Publicado: 04/07/2011 12:23 am

Muy bueno, un poco largo pero muy util.

Empresas
Publicado: 07/07/2011 1:02 pm

Muy util para nuestras webs

Jose
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

sebastian
Publicado: 28/08/2011 1:37 pm

hola exelente el codigo lo andaba buscando..

buttonpol
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!

carlos c
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.

Jorge Juan
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

israel
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!

israel
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!

Weslyn
Publicado: 28/05/2012 7:50 pm

Gracias, lo que necesita :D, buen código

Tours Machu Picchu
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.

Israel
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

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)