Tutorial: Nuestro propio boton social

  • Autor Autor Cicklow
  • Fecha de inicio Fecha de inicio
Cicklow

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
En esta ocasión crearemos nuestros propios botones sociales (ejemplo como los de Google+, Facebook y Twitter). Vale aclarar que he tomado como ejemplo crear los botones para Foro Beta.

Ejemplo:
Insertar CODE, HTML o PHP:
http://www.cicklow.com/SocialBoton/

- Para nuestro tutorial necesitaremos un server con PHP y mySQL

Nuestros botones se verán de esta manera:
28btr2t.jpg


( Los botones los pueden diseñar mejor que yo 🙂 )

El SocialBoton funciona de esta manera:
- Se inserta un código en nuestra web:
HTML:
<script type="text/javascript">(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='boton.js';s.parentNode.insertBefore(x,s)})()</script>
Y llamamos a nuestro botón de esta manera:
Insertar CODE, HTML o PHP:
<SocialBoton tipo="grande"></SocialBoton>
Este código mostrara un botón grande, los parámetros son:
- url = La url que queremos agregar (sino se especifica toma la url de donde se encuentra el botón)
- tit = Titulo de la página (si no se especifica toma el titulo de la página donde se encuentre el botón)
- tipo = grande (botón grande) o mediano (botón mediano)

Ejemplo:
Insertar CODE, HTML o PHP:
<SocialBoton tipo="grande" url="http://www.google.com.ar/" tit="Google!"></SocialBoton>

El SocialBoton pide un nombre de usuario (eso lo pueden editar a su modo y agregarlo a su sitio web, con el login de sus usuarios) y también pide una confirmación de parte del usuario.

Todo se guarda en nuestra base de datos: url, titulo, usuario e ip del usuario.
Los archivos de nuestro SocialBoton son:
boton.js: Este archivo es el encargado de crear un iframe usando JS, la url de nuestro iframe es nuestro widget
widget.php: Este archivo se encarga de mostrar el botón que hemos seleccionado y la cantidad de usuarios que agregaron esa página.
compartir.php: Este archivo se encarga de agregar la página a nuestra bd, previamente confirmación de usuario y confirmación de agregado (se abre en el popup).
logs.php: Muestra los logs (las personas y las url que se han agregado)

Descarga:
Insertar CODE, HTML o PHP:
http://www.cicklow.com/SocialBoton/SocialBoton.rar
 
Buen tutu, gracias por compartir:encouragement:

- - - Actualizado - - -

Buen tutu, gracias por compartir:encouragement:
 
esta buenísimo! :encouragement:
 
Siempre me quedo esa duda, gracias por compartir esto :encouragement:
 
Excelente iniciativa compañero.
Gracias por compartirlo :encouragement:
 
Muy bueno gracias por el tutorial
 
Buen aporte 😉
 
Ti amo, ti amo!
 
huuu tutu excelente, se va para arriba FB
 
Increible xD me pongo ya mismo a hacer uno! 😛 siempre he querido hacer uno! gracias man!
 
Muy bueno gracias por compartirlo!
 
Excelente tutorial! a favoritos 😱
 
Me encanta, muchísimas gracias
 
Muchas gracias, no parece complicado.
 
Vaya, buen aporte. Gracias :encouragement:
 
Que buen tutorial! Muchas gracias por compartirlo 🙂
 
Muchas gracias buen tutorial enorabuhena!
 
Atrás
Arriba