[Tutorial] Facebook Flotante "Boton Me Gusta" en tu foro

Started by jaren, May 08, 2013, 05:12:48 AM

Previous topic - Next topic

jaren

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 [nofollow]    - http://www.gamerznice.com.nu/face.php [nofollow]

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





.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

<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




<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

</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 [nofollow]





Y con eso Tendriamos nuestro like flotante

Imagenes Utilizadas


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

http://i.imgur.com/BUbT5ty.gif [nofollow]   >>> 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]
Mi Foro [nofollow]

Dhayzon

genial tu aporte  ;)

jaren

exacto....en developers puedes creear  infinidades de cosas  pero a lo que e refiero   y trato de explicar en este tuto es como integrarlo a ese scrip,  para que que flote el  boton me gusta en su foro,  ya que si lo pones directo jamas lo ara en cuanto a <head> <boby>  hay dos parte el scrip  para cerrar  el pequeño anuncio  y en el body para que alga el anuncio flotando  y en css  para darle el  stilo  al  pequeño anuncio Gracias  Saludos !!
Mi Foro [nofollow]

Advertisement: