Tutorial: Nuestro propio boton social

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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:


( 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
 

Cargando

Épsilon
Verificación en dos pasos desactivada
Desde
1 May 2012
Mensajes
886
Crédito(s)
1
Puntos
83
Buen tutu, gracias por compartir:encouragement:

- - - Actualizado - - -

Buen tutu, gracias por compartir:encouragement:
 

IGNACIO

VIP
Mi
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
7 Dic 2011
Mensajes
3.196
Crédito(s)
9
Puntos
347
esta buenísimo! :encouragement:
 

Cluster

Épsilon
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
24 Jun 2010
Mensajes
899
Edad
26
Crédito(s)
1
Puntos
373
Siempre me quedo esa duda, gracias por compartir esto :encouragement:
 

Mykeura

Zeta
SEO
Verificación en dos pasos desactivada
Desde
10 Jun 2010
Mensajes
1.861
Crédito(s)
0
Puntos
506
Excelente iniciativa compañero.
Gracias por compartirlo :encouragement:
 

lafade

Gamma
Verificación en dos pasos desactivada
Desde
8 Ago 2011
Mensajes
169
Crédito(s)
0
Puntos
4
Muy bueno gracias por el tutorial
 

eclud

Eta
Social Media
Verificación en dos pasos desactivada
Desde
3 Abr 2011
Mensajes
1.358
Crédito(s)
0
Puntos
31
bueno man! gracias.
 

Noshy

Dseda
Redactor
Verificación en dos pasos desactivada
Desde
18 Ago 2011
Mensajes
1.218
Crédito(s)
1
Puntos
33
huuu tutu excelente, se va para arriba FB
 

Ulloa

Gamma
Programador
Verificación en dos pasos activada
Desde
13 Nov 2011
Mensajes
171
Crédito(s)
0
Puntos
46
Increible xD me pongo ya mismo a hacer uno! :p siempre he querido hacer uno! gracias man!
 

anferro

Xi
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
29 Oct 2011
Mensajes
4.455
Crédito(s)
0
Puntos
63
Muy bueno gracias por compartirlo!
 

Mayvar

Beta
Verificación en dos pasos desactivada
Desde
14 Ago 2012
Mensajes
85
Crédito(s)
0
Puntos
0
Muchas gracias, no parece complicado.
 

Joker

Beta
Social Media
Verificación en dos pasos desactivada
Desde
10 Jun 2012
Mensajes
61
Crédito(s)
0
Puntos
0
Vaya, buen aporte. Gracias :encouragement:
 

kahlo

Eta
Diseñador
Verificación en dos pasos desactivada
Desde
4 Jun 2011
Mensajes
1.376
Edad
35
Crédito(s)
-2
Puntos
1.134
Que buen tutorial! Muchas gracias por compartirlo :)
 

Arriba