Topic: Facebook Flotante "Boton Me Gusta" en tu foro SMF

May 08, 2013 - 03:44 03:44

Boton me Gusta en tu foto SMF

Ola Amigos que ondas

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

Code: [Select]



.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

Code: [Select]

<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

Code: [Select]


<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

Code: [Select]

</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&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

**Reply #1** May 08, 2013 - 08:42 08:42

Buen Tips!! +10

-Un saludo, DIBILO.

**Reply #2** May 08, 2013 - 08:05 20:05

2 cosas el la redireccion no funciono sale todo como texto y estubiera mejor si cuando se le da like que no salga mas estaria perfecto

Facebook Flotante "Boton Me Gusta" en tu foro SMF