Cómo crear botones personalizados para compartir

Question

Siempre he querido agregar botones de Facebook para compartir a mis aplicaciones, pero el problema que tengo es que todos se ven diferentes. Veo sitios como this que tienen botones de compartir diseñados a medida. ¿Alguien sabe un buen tutorial, o tiene alguna sugerencia, sobre cómo abordar esto?

Answer 1

Compartir algo de un facebook es bastante fácil, aquí está el HTML para mi botón de compartir personalizado.

<div id="share_div"> 
    <div id="share"> 
     <a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank"> 
      Share 
     </a> 
    </div> 
</div> 

Cuando todas las variables de {{}} han de ser reemplazar por valor correcto: fbapp_id es el ID de la aplicación de Facebook. link_ur l es un enlace adjunto al contenido compartido (como un enlace a su sitio) y share_message|urlencode es el mensaje que se comparte y debe ser urlencoded.

También aquí un poco de CSS para el estilo de este como un botón real de facebook:

#share { 
    border:1px solid #0D386F; 
    background-color:#5D7DAE; 
    height:24px; 
    width: 100px; 
} 

#share a.click { 
    font-size:13px; 
    font-weight:bold; 
    text-align:center; 
    color:#fff; 
    border-top:1px solid #879DC2; 
    background-color:#5D7DAE; 
    padding: 2px 10px; 
    cursor: pointer; 
    text-decoration:none; 
    width:80px; 
    display:block; 
} 

Pero les dejó el placer de personalizar a su gusto, la parte importante es el href de la etiqueta a

¿Responde a tu pregunta?