Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* [Tutorial] Facebook Flotante "Boton Me Gusta" en tu foro
  Leído 2044 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: Đємσи
May 08 2013
Boton me Gusta en tu foto SMF


Ola Amigos que ondas ;D

Aqui  un tutorial como poner un  boton me gusta flotante  :)

Demo : http://www.gamerznice.com.nu/index.php    - http://www.gamerznice.com.nu/face.php

PD: Lo sacare  por que a mi parecer es un poco molestoso pero para los demas se que es muy diverdido

Aqui una foto

*



Bueno comenzemos

Primero que nada....como siempre para los que recien  tocan sus archivos por favor hacer  un respaldo [Cualquier cambio que realizen a partir de este tutorial es bajo su responsabilidad]


Abrimos nuestro css  [Themas > Tu Temas > Css > Index.css ] y pegamos al final del todo


Código: [Seleccionar]


.boton {
    border: 1px solid #999999;
    margin-top: 5px;
    padding: 3px 5px;
}
#fl0tante {
    background: none repeat scroll 0 0 #000000;
    display: block;
    float: left;
    height: 100%;
    opacity: 0.5;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 9999;
}
#bamer {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 8px solid #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 20px #000000;
    color: #3B5998;
    display: block;
    font: bold 13px tahoma;
    height: 130px;
    left: 25%;
    margin: 0 auto;
    position: fixed;
    right: 25%;
    text-align: center;
    top: 30%;
    width: 200px;
    z-index: 2147483647;
}
#bamer p {
    margin: 0;
    padding: 0;
}
#bamer img {
    border: 0 none;
    border-radius: 3px 3px 3px 3px;
    margin-bottom: 8px;
}
#cerrard1v {
    position: absolute;
    right: -25px;
    top: -25px;
}
#cerrard1v img {
    border: 0 none;
}







Abrimos nuestro   index templante [Themes > Tu tema > Index.template.php] Buscamos </head> y  pegamos despues

Código: [Seleccionar]
<SCRIPT type=text/javascript>
function cerrar(){ document.getElementById(\'fl0tante\').style.display = "none";document.getElementById(\'bamer\').style.display = "none";}
</SCRIPT>





Seguimos editando nuestro Index.Template.php
Buscamos <body>  y en el  primer echo ' pegamos  el codigo siguiente

Ejemplo

*

Código: [Seleccionar]

<DIV id=bamer onclick=cerrar(); style="width: 204px; height: 160px">
<DIV id=cerrard1v><A title=cerrar href="javascript:cerrar();"><IMG
src="../Themes/default/images/10ojxh2.png"></A></DIV>Apoyanos Con Un Me Gusta !<BR>
<IMG style="MARGIN-TOP: 3px; WIDTH: 10px; HEIGHT: 12px"
src="../Themes/default/images/abajo.gif"><BR><IFRAME
style="MARGIN: -5px 0px 5px; OVERFLOW: hidden; WIDTH: 87px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 70px; BORDER-BOTTOM-STYLE: none"
src="http://www.gamerznice.com.nu/like.php"
frameBorder=0 scrolling=no allowTransparency></IFRAME>
<P>[url=http://www.GamerzNice.com.nu]www.GamerzNice.com.nu[/url]</P></DIV>
<DIV id=fl0tante onclick=cerrar();></DIV>
<DIV id=fb-root></DIV>



Ahora a cambiar el like  por el suyo

Mirar al Final


Se crean un archivo llamado like.php y pegan esto

Código: [Seleccionar]
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<head>
<iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/zonaelegante&amp;send=true&amp;layout=box_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=trebuchet ms&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>


Cambiar

2Fwww.facebook.com/zonaelegante&amp;send

Por el suyo y lo guardamos en  Themes > default >    ! en mi caso lo  puse ahi si gustan pueden ponerlo en defaul o su thema pero  recuerden que tienen que hacer el llamado respectivo

Ejemplo

http://www.gamerznice.com.nu/Themes/default/like.php




Y con eso Tendriamos nuestro like flotante

Imagenes Utilizadas


http://i.imgur.com/BE3LQ96.png   >>> Boton cerrar

http://i.imgur.com/BUbT5ty.gif   >>> Flechita Abajo

Subalo a .../Themes/default/images/>>>>




Proximo tutorial como tener su Fans Box al costado de su web ;)

*


Espero haver sido preciso y claro  >> Site gusto regalame  un punto si no te gusto dime por que ;)


Creditos Totales

Demon [GamerzNice]



Muy buen tutorial amigo les quedo muy bien, ahora si con este tuto y el del pajarito del Twitter no hay excusas para no aprovechar las redes sociales en tu foro.

En lo personal esperare por el fan box al costado, ese se ve muy bueno. Saludos!!




Si brother de hecho  e tome  toda la noche para  poder realizar  ese  pequeño scrip para   todos ustedes  el otro lo adpate para smf  por que los  codigos que  da en el inter del  fan box no funciona  tienes que salvarl  los codigos ...  pero saben   vale  la pena por que a muchos  usuarios le es de mucha  utilidad...!!  Saludos  Demon !!




Muy buen tutorial colega.




Estupendo bro! :)




Exelente aporte.

Saludos enik...




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,