Tutorial: Nuestro propio boton social

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
77
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
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.210
esta buenísimo! :encouragement:
 

Cluster

Épsilon
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
24 Jun 2010
Mensajes
899
Edad
27
Siempre me quedo esa duda, gracias por compartir esto :encouragement:
 

Mykeura

Zeta
SEO
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
10 Jun 2010
Mensajes
1.862
Excelente iniciativa compañero.
Gracias por compartirlo :encouragement:
 

lafade

Gamma
Verificación en dos pasos desactivada
Desde
8 Ago 2011
Mensajes
169
Muy bueno gracias por el tutorial
 

eclud

Eta
Social Media
Verificación en dos pasos desactivada
Desde
3 Abr 2011
Mensajes
1.358
bueno man! gracias.
 

Noshy

Dseda
Redactor
Verificación en dos pasos desactivada
Desde
18 Ago 2011
Mensajes
1.226
huuu tutu excelente, se va para arriba FB
 

Ulloa

Gamma
Programador
Verificación en dos pasos activada
Desde
13 Nov 2011
Mensajes
171
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.487
Muy bueno gracias por compartirlo!
 

Mayvar

Beta
Verificación en dos pasos desactivada
Desde
14 Ago 2012
Mensajes
85
Muchas gracias, no parece complicado.
 

Joker

Beta
Social Media
Verificación en dos pasos desactivada
Desde
10 Jun 2012
Mensajes
61
Vaya, buen aporte. Gracias :encouragement:
 

kahlo

Eta
Diseñador
Verificación en dos pasos desactivada
Desde
4 Jun 2011
Mensajes
1.376
Edad
35
Que buen tutorial! Muchas gracias por compartirlo :)
 

Arriba