"Curtir" facebook desta maneira

Usuario eliminado 4602 · 12/10/2011

hola betas.

alguien sabe de que manera se pone el botoncito de facebook tal cual lo tienen en esta web:

Desafío extremo

Me refiero al boton de la izquierda, donde salen tanto el facebook, twitter y tuenti.

alguien sabe ???

Roger · 12/10/2011

Debe ser algún plugin

Kricho · 12/10/2011

El plugin se llama cute profiles.

Me rectifico. No es el mismo plugin, pero el que yo digo hace lo mismo.

WordPress › Cute Profiles « WordPress Plugins

Usuario eliminado 4602 · 12/10/2011

y alguna manera de ponerlo sin necesidad de instalar un plugin ?

porque tengo 4324324234234 plugins ya jajajajajjaa

edit:

bueno he probado el cute profiles, pero no es lo que busco, si te fijas en la web, al acercar el puntero sale directamente "me gusta",

con este que me as dado, tienes que entrar en la web de facebook y darle a me gusta

no me convence :S ya que seria lo mismo que tengo en la web a la derecha pero mas pequeño :SS gracias de todas maneras.

algun otro plugin ???

frN13 · 12/10/2011

eso se puede poner tranquilamente a mano... googlea que lo vas a encontrar, yo lo habia visto en elescaparatederosa hace mucho.

GabrielShiroma · 12/10/2011

Hola,

Acá también esta:

Inserir CODE, HTML ou PHP:

www.telecinco.es

Podés mirar un poco el código, por ejemplo el JavaScript

Inserir CODE, HTML ou PHP:

t5res/js/t5hpsocial.js

y el

Inserir CODE, HTML ou PHP:

<div id="social" class="social">

y seguro lo vas a poder sacar...

Contanos después como te fue.

Saludos y suerte!

Usuario eliminado 4602 · 12/10/2011

Nauta disse:
Hola,

Acá también esta:

Inserir CODE, HTML ou PHP:

www.telecinco.es

Podés mirar un poco el código, por ejemplo el JavaScript

Inserir CODE, HTML ou PHP:

t5res/js/t5hpsocial.js

y el

Inserir CODE, HTML ou PHP:

<div id="social" class="social">

y seguro lo vas a poder sacar...

Contanos después como te fue.

Saludos y suerte!

Gracias, pero creo que si lo pregunto es porque no tengo ni idea de como ponerlo, a parte de que de codigos no tengo ni la menor idea de como se utiliza.

Ya se que pido que me digais expresamente como se hace, pero esto es un foro, y estais/amos, para ayudarnos unos a otros.

Gracias 🙂

Usuario eliminado 7982 · 16/10/2011

Hola ! Eso no es un plugin, creo. mira, te dejo el codigo.

Inserir CODE, HTML ou PHP:

<div id="social" class="social">
		<ul>
			<li>
				<a onmouseover="mostrarObjeto('capfb');" onmouseout="ocultarObjeto('capfb');" class="botonfb" href="http://www.facebook.com/cuatro" target="_blank" onclick="javascript:conteoFacebook();">Facebook</a>
				<span onmouseover="mostrarObjeto('capfb');" onmouseout="ocultarObjeto('capfb');" id="capfb" class="capfb" style="display: none; ">
					<a onclick="javascript:conteoFacebook();" href="http://www.facebook.com/cuatro" target="_blank">cuatro.com en Facebook</a>
				</span>
			</li>
			<li>
				<a onmouseover="mostrarObjeto('captw');" onmouseout="ocultarObjeto('captw');" class="botontw" onclick="javascript:conteoTwitter();" href="http://twitter.com/practica_cuatro" target="_blank">Twitter</a>
				<span onmouseover="mostrarObjeto('captw');" onmouseout="ocultarObjeto('captw');" id="captw" class="captw" style="display: none;">
					<a onclick="javascript:conteoTwitter();" href="http://twitter.com/practica_cuatro" target="_blank">cuatro.com en Twitter</a>
				</span>
			</li>
			<li>
				<a onmouseover="mostrarObjeto('captuenti');" onmouseout="ocultarObjeto('captuenti');" class="botontuenti" onclick="javascript:conteoTuenti();" href="http://tuenti.com/cuatro" target="_blank">Tuenti</a>
				<span onmouseover="mostrarObjeto('captuenti');" onmouseout="ocultarObjeto('captuenti');" id="captuenti" class="captuenti" style="display: none;">
					<a onclick="javascript:conteoTuenti();" href="http://tuenti.com/cuatro" target="_blank">cuatro.com en Tuenti</a>
				</span>
			</li>
		</ul>
	</div>

(Ahi anda editando los datos de FB, TW y el otro)

Claro que también tenes que agregar el css correspondiente:

Inserir CODE, HTML ou PHP:

.social {
position: fixed;
left: 0;
top: 44%;
width: 45px;
height: 107px;
display: block;
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
z-index: 10000;
}





.social ul li {
list-style-type: none;
float: left;
display: block;
background: 0 none;
background-image: none;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-position-x: 0px;
background-position-y: 50%;
background-origin: initial;
background-clip: initial;
background-color: initial;
padding: 0;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
margin-bottom: 5px;
}




.social ul li a.botonfb {
background-position: 0 -5px;
background-position-x: 0px;
background-position-y: -5px;
}

.social ul li a.botonfb, .social ul li a.botontw, .social ul li a.botontuenti {
width: 31px;
height: 33px;
display: block;
text-indent: -10000px;
background: url(../img/sp_social.png) no-repeat -200px -500px;
background-image: url(http://www.cuatro.com/static/CUACuatro/img/sp_social.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: -200px;
background-position-y: -500px;
background-origin: initial;
background-clip: initial;
background-color: initial;
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}


#capfb, #captw, #captuenti {
background-color: #EDEBE7;
}


.social ul li span {
position: absolute;
top: 0;
left: 25px;
padding: 3px 3px 3px 8px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 8px;
background: #F9F9F9;
background-image: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-position-x: initial;
background-position-y: initial;
background-origin: initial;
background-clip: initial;
background-color: #F9F9F9;
border: 1px solid #CDCBC6;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CDCBC6;
border-right-color: #CDCBC6;
border-bottom-color: #CDCBC6;
border-left-color: #CDCBC6;
_width: 240px;
width: 230px;
height: 23px;
display: block;
z-index: -2000;
}




.social ul li a.botontw {
background-position: 0 -42px;
background-position-x: 0px;
background-position-y: -42px;
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}



.social ul li a.botonfb, .social ul li a.botontw, .social ul li a.botontuenti {
width: 31px;
height: 33px;
display: block;
text-indent: -10000px;
background: url(../img/sp_social.png) no-repeat -200px -500px;
background-image: url(http://www.cuatro.com/static/CUACuatro/img/sp_social.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: -200px;
background-position-y: -500px;
background-origin: initial;
background-clip: initial;
background-color: initial;
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}



#capfb, #captw, #captuenti {
background-color: #EDEBE7;
}



.social ul li span {
position: absolute;
top: 0;
left: 25px;
padding: 3px 3px 3px 8px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 8px;
background: #F9F9F9;
background-image: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-position-x: initial;
background-position-y: initial;
background-origin: initial;
background-clip: initial;
background-color: #F9F9F9;
border: 1px solid #CDCBC6;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CDCBC6;
border-right-color: #CDCBC6;
border-bottom-color: #CDCBC6;
border-left-color: #CDCBC6;
_width: 240px;
width: 230px;
height: 23px;
display: block;
z-index: -2000;
}




.social ul li #captw a {
background: transparent url(../img/sp_social.png) no-repeat 12.5em -87px;
background-image: url(http://www.cuatro.com/static/CUACuatro/img/sp_social.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: 12.5em;
background-position-y: -87px;
background-origin: initial;
background-clip: initial;
background-color: transparent;
}


.social ul li span a {
width: 230px;
height: 28px;
display: block;
text-align: left;
text-indent: 4px;
font: 11px/24px normal normal;
text-decoration: none;
color: #4D4A47;
_width: 240px;
_text-indent: 15px;
}

Espero que te sirva. Un saludo.

sebasg · 16/10/2011

excelente me viene como anillo al dedo! gracias por compartir

"Curtir" facebook desta maneira

Usuario eliminado 4602

Roger

Kricho

Usuario eliminado 4602

frN13

GabrielShiroma

Usuario eliminado 4602

Usuario eliminado 7982

sebasg

Tópicos similares