Cómo agregar un botón grande para compartir en Facebook

w088 · 2014-08-10T13:03:04-0500

Saludos

Este es mi primer post aqui en ForoBeta y necesito de su ayuda valorada ayuda!

Estoy viendo en muchas paginas web un boton gigante que dice Compartir o Twittear, Que no es el Boton normal que proporciona facebook developers, Y me preguntaba si podrian conseguirme ese codigo o como puedo hacerlo, ya e navegado medio internet y no encuentro la forma de hacerlo exactamente como lo quiero.

Quiero lograr esto.

Imagen azul que diga - COMPARTIR
Al dar click - Se abre un popup de compartir de Facebook

Aqui una imagen que hice del boton

Otra cosa, yo hice una imagen, pero seria mejor un cuadro azul, y las letras en el medio hecho totalmente con codigo, para asi evitar tantas cargas al servidor.

Graciassssssssssss

Carfer21 · 2014-08-10T13:16:36-0500

Pues has una imagen a tu gusto de como sería y luego agrégale un enlace de compartir en Facebook

SoloNegocios · 2014-08-10T13:19:11-0500

Yo tengo un botón así en un proyecto que programe hace 1 año y no recuerdo bien si funciona con el API de Facebook porque se que uso el API para una cosa en especifico pero no estoy seguro si también para el botón, este es el código que tengo en el sitio:

HTML:

<div class="invitar_amigos">
<a onclick="PopupCenter('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'Invita a tus Amigos',400,300);" href="javascript:void(0);">Invita a tus Amigos</a>
</div>

Javascript:

function PopupCenter(pageURL, title,w,h)
{
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}

CSS:

.invitar_amigos
{
outline: medium none;
background: #3b5998;
border-radius: 5px 5px 5px 5px;
margin: 10px auto 0px;
text-align: center;
cursor: pointer;
}

.invitar_amigos:hover
{
background: #344E86;
}

.invitar_amigos a
{
color: rgb(255, 255, 255);
text-decoration: none;
display: inline-block;
width: 100%;
padding: 10px 0px;
font-size:24px;
}

El resultado del botón es este:

Al darle click se abre una ventana de este tipo::

Pero como te digo no recuerdo si es obligatorio usar el API para esto porque lo programe hace 1 año, pero no pierdes nada con probar

w088 · 2014-08-10T13:31:58-0500

Donde debo colorcarlo.

Por ejemplo quiero ponerlo al final de cada post en wordpress.
Entonces tengo un pluggin que te pide el codigo que quieres poner al final y lo coloco.

Ese que me dijste como colocarlo, si esta dividido en diferentes lenguajes. :ambivalence:

FerMolina · 2014-08-10T14:35:37-0500

Crea el botón y dale estilo con CSS3, en el href coloca el siguiente enlace (éste detectará el ID de tu publicación de wordpress automáticamente)
Algunos ejemplos que puedes utilizar: 40 CSS3 Button Tutorials For Designers

HTML:

http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->id)); ?>

Cuestión el botón quedaría algo así:

HTML:

<a class="clasedelbotón" href="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->id)); ?>" type="button">Compartir en Facebook</a>

Coloca el botón dentro de single.php o donde quieras agregarlo.
Saludos.

- - - Actualizado - - -

Si querés colocarlo al final de cada post.

Utiliza el inspector de elementos de tu navegador.
Localiza el último div visible del post.
Añade el código y previsualiza los cambios.

w088 · 2014-08-10T16:57:12-0500

Me dio error pero de todas formas lo hice asi, y casi me funcionó

Digo casi, porque despues que se abrio la ventana popup dijo error

Me faltaba un link que recoja el contenido de la entrada, y tome el que me enviaste [MENTION=70900]FerMolina[/MENTION]

HTML:

http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->id)); ?>

HTML:

<div>
<a href="javascript: void(0);" onclick="window.open ('http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->id)); ?>', 'Facebook', 'toolbar=0, status=0, width=550, height=350');"> <img src="IMAGEN COMPARTIR" alt="Compartir en Facebook" hspace="8" vspace="5" border="0" /></a>

Pero como dije no me funcionó.
Estoy casi casi lograndolo

- - - Actualizado - - -

Bueno tendré que conformarme con este código que he construido con pedazos de otros codigos encontrado por internet.
Lo único malo es que no abre un popUp.

HTML:

<a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);var dir2= encodeURIComponent(dir);window.location.href=('http://www.facebook.com/share.php?u='+dir2+'&amp;t='+tit2+'');"><img src="COMPARTIR.jpg" border="0" alt="Compartir" /></a>

Cómo agregar un botón grande para compartir en Facebook

w088 Seguir

Carfer21

SoloNegocios

w088

FerMolina

w088