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.

  1. // File:    socialclass.php
  2. // Web:  http://blog.unijimpe.net
  3. // Date:    13/03/2010
  4.  
  5. class SocialClass {
  6.     var $url;
  7.     var $title;
  8.     var $target;
  9.     var $type;
  10.    
  11.     function SocialClass($_url, $_title, $_target = "", $_type = "link") {
  12.         $this->url = urlencode($_url);
  13.         $this->title = urlencode($_title);
  14.         $this->setTarget($_target);
  15.         $this->setType($_type);
  16.     }
  17.     function setTarget($_target) {
  18.         if ($_target != "") {
  19.             $this->target = " target=\"".$_target."\"";
  20.         }
  21.     }
  22.     function setType($_type) {
  23.         $this->type = $_type;
  24.     }
  25.     function write($path, $label = "") {
  26.         if ($this->type == "link") {
  27.             return "<a href=\"".$path."\"".$this->target.">".$label."</a>";
  28.         } else {
  29.             return $path;
  30.         }
  31.     }
  32.    
  33.     function delicious($label = "Delicious") {
  34.         $path = "http://delicious.com/save?v=5&url=".$this->url."&title=".$this->title;
  35.         return $this->write($path, $label);
  36.     }
  37.     function digg($label = "Digg") {
  38.         $path = "http://digg.com/submit?url=".$this->url."&amp;title=".$this->title;
  39.         return $this->write($path, $label);
  40.     }
  41.     function facebook($label = "Facebook") {
  42.         $path = "http://www.facebook.com/sharer.php?u=".$this->url."&t=".$this->title;
  43.         return $this->write($path, $label);
  44.     }
  45.     function technorati($label = "Technorati") {
  46.         $path = "http://technorati.com/faves?add=".$this->url."&title=".$this->title;
  47.         return $this->write($path, $label);
  48.     }
  49.     function twitter($label = "Twitter") {
  50.         $path = "http://twitter.com/home?status=".$this->title." - ".$this->url;
  51.         return $this->write($path, $label);
  52.     }
  53.     function meneame($label = "Meneame") {
  54.         $path = "http://meneame.net/submit.php?url=".$this->url;
  55.         return $this->write($path, $label);
  56.     }
  57.     function reddit($label = "Reddit") {
  58.         $path = "http://reddit.com/submit?url=".$this->url."&title=".$this->title;
  59.         return $this->write($path, $label);
  60.     }
  61.     function stumbleupon($label = "StumbleUpon") {
  62.         $path = "http://www.stumbleupon.com/submit?url=".$this->url."&title=".$this->title; 
  63.         return $this->write($path, $label);
  64.     }
  65.     function buzz($label = "Google Buzz") {
  66.         $path = "http://www.google.com/reader/link?url=".$this->url."&title=".$this->title; 
  67.         return $this->write($path, $label);
  68.     }
  69. }

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:

  1. $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.

  1. <?php $social = new SocialClass("http://blog.unijimpe.net", "unijimpe"); ?>
  2. <ul>
  3.     <li><?php echo $social->delicious(); ?></li>
  4.     <li><?php echo $social->digg(); ?></li>
  5.     <li><?php echo $social->facebook(); ?></li>
  6.     <li><?php echo $social->technorati(); ?></li>
  7.     <li><?php echo $social->twitter(); ?></li>
  8.     <li><?php echo $social->meneame(); ?></li>
  9.     <li><?php echo $social->reddit(); ?></li>
  10.     <li><?php echo $social->stumbleupon(); ?></li>
  11.     <li><?php echo $social->buzz(); ?></li>
  12. </ul>

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:

  1. <?php $social = new SocialClass("http://blog.unijimpe.net", "unijimpe", "_blank"); ?>
  2. <ul>
  3.     <li><?php echo $social->delicious("Guardar en Delicious"); ?></li>
  4.     <li><?php echo $social->digg("Enviar a Digg"); ?></li>
  5.     <li><?php echo $social->facebook("Compartir en Facebook"); ?></li>
  6.     <li><?php echo $social->twitter("Publicar en Twitter"); ?></li>
  7. </ul>

Finalmente si deseamos utilizar imagenes para los enlaces podríamos utilizar el tipo url para crear los enlaces de la forma:

  1. <?php $social = new SocialClass("http://blog.unijimpe.net", "unijimpe", "", "url"); ?>
  2. <a href="<?php echo $social->delicious(); ?>">
  3.     <img src="http://static.delicious.com/img/delicious.gif" />
  4. </a>
  5. <a href="<?php echo $social->facebook(); ?>">
  6.     <img src="http://static.ak.fbcdn.net/images/connect_favicon.png" />
  7. </a>
  8. <a href="<?php echo $social->twitter(); ?>">
  9.     <img src="http://twitter-badges.s3.amazonaws.com/t_mini-a.png" />
  10. </a>

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.

Mas Información

Posts Relacionados

Meneame Delicious

Comentarios Total 18 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.

 

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>)