Tutorial: Aplicación Facebook - Estados de ánimo

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
El día de hoy aprenderán a crear una aplicación para facebook que permite colocar estados de animo.
La aplicación se vera de esta manera:

Pueden usar el paquete de emoticon que ustedes gusten, ya que solo suben las imágenes en la carpeta img y luego editando estados.php (ver mas abajo).

config.php

PHP:
<?php
	@session_start();
	//Code by Cicklow
	//detectar si estamos en http o https (ya que facebook necesita si o si esto)
	if($_SERVER['HTTPS']=="on") $PRO = 'https'; else $PRO = 'http';

	//definimos nuestras variables
	define('WEB',$PRO.'://facebook.miserver.com/carpeta/'); //url de la apps en mi server
	define('FAC',$PRO.'://apps.facebook.com/appcanvas/'); //url de la apps en facebook

	//id de la aplicacion y codigo secreto
	$__ID = 'ID_FACEBOOK';
	$__SE = 'APP_SECRET';

	//incluimos el SDK PHP de facebook
	include('src/facebook.php');

	//iniciamos pasandole parametros la api de facebook
	$config = array();
	$config['appId'] = $__ID;
	$config['secret'] = $__SE;
	$config['fileUpload'] = false; //No vamos a cargar archivos por ende no lo usamos!

	$facebook = new Facebook($config);
	$USER = $facebook->getUser();	//Obtenemos el usuario logeado!

	//scope = permisos a pedir separados por coma (,)
	//redirect_uri = a donde ira dsp de pedir los permisos
	$toURL = $facebook->getLoginUrl(array('scope'=>'','redirect_uri'=>FAC));

	//Guardamos los datos del usuario en la session. si no obtenemos un usuario valido redireccionamos nuevamente a los permisos!
	$fbme = null;
	if ( !isset($_SESSION[$__ID.'_fbme']) ) {
		if ($USER) {  
			try {  
			   $fbme = $facebook->api('/'.$USER);
			   $_SESSION[$__ID.'_fbme'] = $fbme;
			} catch (FacebookApiException $e) {
				try { 
					$fbme = $facebook->api('/'.$USER); 
					$_SESSION[$__ID.'_fbme'] = $fbme;
				} catch (FacebookApiException $e) { error_log($e); echo "<script type='text/javascript'>top.location.href = '".$toURL."';</script>"; exit(); }
			}
		}
	} else {
		$fbme = $_SESSION[$__ID.'_fbme'];
	}

	if (!$fbme || $_SESSION[$__ID.'_fbme']['first_name']=="") {
		echo "<script type='text/javascript'>top.location.href = '".$toURL."';</script>";
		exit;
	}
?>
index.php
incluimos el config.php
PHP:
<?php
	include('config.php');
?>
ahora armamos la estructura de html y el CSS (como ven e coloca CSS para armar tooltips y se vera de esta forma)

PHP:
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<title>Emoticons</title>
<style>
	body {
		font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
	}
	#emodiv{
		background-color: #F1F3F5;
		border: 1px solid #ADBDCE;
		height: 500px;
		margin-left: 27px;
		margin-top: 6px;
		padding: 5px;
		width: 90%;
		overflow:scroll;
		overflow-x:hidden;
	}
	.emo1{
		float:left;
		width: 140px;
		height:140px;
		background-color: #cccccc;
		border: 1px solid #ADBDCE;
		margin:5px;
		cursor:hand; cursor:pointer;
	}
	.emo1 img{
		width:130px;
		height:130px;
	}

	.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;font-size:11px;opacity: 1.0;}
	.tooltip:hover span{display:block; position:absolute; background:#333333; border:1px solid #cccccc;color:#ffffff;opacity: 1.0;z-index:1001;}
</style>
</head>
<body>
iniciamos el SDK JS de facebook
PHP:
	<div id="fb-root"></div>
	<script>
		window.fbAsyncInit = function() {
		FB.init({
			appId: '<?php echo $facebook->getAppID() ?>',
			cookie: true,
			xfbml: true,
			oauth: true
		});
		};
		(function() {
			var e = document.createElement('script'); e.async = true;
			e.src = document.location.protocol +
			'//connect.facebook.net/es_ES/all.js';
			document.getElementById('fb-root').appendChild(e);
		}());
funcion encargada de publicar el emoticon en el muro del usuario

PHP:
	function Publicar(texto,img){
		var hrefLink = '<?=FAC;?>';
		var hrefTitle = 'Mi estado de ánimo';
		var imagen = '<?=WEB;?>img/' + img;

		FB.ui({
			method: 'feed',
			to: '',
			description: ' ',
			message: '',
			link: hrefLink,
			name: texto,
			caption: 'Publica tu estado de &aacute;nimo... ',
			picture: imagen,
			actions: [ { name: hrefTitle, link: hrefLink } ]
			},
			function(response) {
				//Se publico o no...
			}
		);
	}
	</script>
agregamos estados.php y recorremos los estados con un bucle, armando la grilla
PHP:
	<center>
		<div id="emodiv">
			<?php
				include('estados.php');
				foreach($EMO as $E){
					$TXT = $_SESSION[$__ID.'_fbme']['first_name'].' '.utf8_encode($E[2]);
					echo '<div class="emo1 tooltip" onclick="Publicar(\''.$TXT.'\',\''.$E[0].'\');"><font size="1">'.utf8_encode($E[1]).'</font><br/><img src="'.WEB.'img/'.$E[0].'"><span>'.$TXT.'</span></div>';
				}
			?>
		</div>
	</center>
</body>
</html>
estados.php
este archivo tiene:
1- nombre de la imagen
2- descripción de la imagen (o titulo)
3- texto de la imagen (este texto tiene que ser multi genero, osea para mujeres y para hombres, usar el @ para los estados que son multi genero, y tmb como ven no se incluye el nombre ni nada. imaginen esto: USUARIO está armando un tutorial en forobeta, como ven luego no coloco la palabra USUARIO, de esta forma todos los usuarios que accedan a la aplicacion pueden usarla)
En la carpeta img que acompaña a la aplicacion hay mas emoticon, yo solo coloque algunos
PHP:
<?php
	$EMO[] = array('angry.png','Enojado','está enojado');
	$EMO[] = array('beaten.png','Golpeado','se encuentra golpeado');
	$EMO[] = array('beso.png','Beso','quiere un beso');
	$EMO[] = array('bouaaaaah.png','Asustado','está asustado');
	$EMO[] = array('brains.png','Cerebro','es un zombie');
	$EMO[] = array('enjoying mah playlist.png','Música','está escuchando música');
	$EMO[] = array('have a nice day.png','Feliz','se encuentra feliz');
	$EMO[] = array('hidden.png','Escondido','se esta escondiendo');
	$EMO[] = array('ignoring.png','Ignorar','está ignorando a alguien');
	$EMO[] = array('in love.png','Enamorado','está enamorado');
	$EMO[] = array('nom nom.png','Comida','está comiendo');
	$EMO[] = array('sick.png','Enfermo','está enfermo');
	$EMO[] = array('TT TT.png','Llorando','está llorando');
	$EMO[] = array('dormido.png','Dormir','se fue a dormir');
	$EMO[] = array('suenio.png','Sueño','tiene sueño');
	$EMO[] = array('omg.png','Enojado','está enojad@');
//	$EMO[] = array('','','');
//	$EMO[] = array('','','');
//	$EMO[] = array('','','');
//	$EMO[] = array('','','');
//	$EMO[] = array('','','');
?>
Para mas emoticons pueden usar:
Green Emotiсons Icons | Download Popular icon pack | IconsPedia

u alguna otra :)

Descarga:
Insertar CODE, HTML o PHP:
http://www.mediafire.com/?q2rgdnpadwf5lto
PD: se incluye el SDK PHP de facebook dentro del rar, para evitar que en otras actualizaciones de facebook deje de funcionar.

PD: Configurar apps: http://forobeta.com/tutoriales/117840-configurar-aplicacion-facebook.html
 
Última edición:

mardek

Gamma
Redactor
Verificación en dos pasos desactivada
Desde
19 Ene 2011
Mensajes
390
Crédito(s)
0
Puntos
6
Muchas gracias por el aporte!
 

quimbox

VIP
Zeta
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
22 Mar 2012
Mensajes
1.809
Crédito(s)
1
Puntos
221
Gracias hermano, por aportar sus conocimientos. Le estoy agradecido. :encouragement:
 

T4kuyax

Eta
Social Media
Verificación en dos pasos desactivada
Desde
11 Abr 2012
Mensajes
1.496
Edad
34
Crédito(s)
1
Puntos
1.401
Uff muy interesante amigo te lo agradezco, mañana sin duda lo pruebo.

Gracias :p7:
 

Jose Canul

1
Pi
Exchanger
Verificado con documento
Verificación en dos pasos desactivada
Desde
12 Sep 2011
Mensajes
5.077
Crédito(s)
0
Puntos
849
Gracias, buen aporte vere si puedo hacerlo :fatigue:
 

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
Wow gran aport5e! muchas gracias por compartirlo!
 

oiramsomel

Iota
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
9 May 2010
Mensajes
2.126
Crédito(s)
0
Puntos
555
Interesante, gracias por el aporte.
 

jorgejacobo

Baneado
Zeta
Verificación en dos pasos desactivada
Desde
2 Nov 2011
Mensajes
1.970
Edad
41
Crédito(s)
0
Puntos
60
Sabia que forobeta tiene gente que ayuda. Gracias:encouragement:
 

vanna

Beta
Verificación en dos pasos desactivada
Desde
5 Oct 2012
Mensajes
77
Crédito(s)
0
Puntos
34
Gracias por el aporte ..una pregunta en la aplicación final todo esta ok , excepto las imágenes que no cargan, el hosting donde se halla la aplicación es en Heroku, alguna idea de porque no se ven las imágenes?
 

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
Gracias por el aporte ..una pregunta en la aplicación final todo esta ok , excepto las imágenes que no cargan, el hosting donde se halla la aplicación es en Heroku, alguna idea de porque no se ven las imágenes?
fijate si podes acceder directamente a las imagenes
 

JoseCuevas

Iota
Hospedaje
Verificación en dos pasos desactivada
Desde
3 Ago 2012
Mensajes
2.335
Crédito(s)
0
Puntos
130
Esto puede aplicarse para una fanpage? [MENTION=9679]cicklow[/MENTION]
 

vanna

Beta
Verificación en dos pasos desactivada
Desde
5 Oct 2012
Mensajes
77
Crédito(s)
0
Puntos
34
Hola.. y gracias por responder, las imágenes de la pc? porque los archivos los subo y modifico desde la pc
 

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
Esto puede aplicarse para una fanpage? [MENTION=9679]cicklow[/MENTION]
si se modifica si, ya que esta es una apps normal!

- - - Actualizado - - -

Hola.. y gracias por responder, las imágenes de la pc? porque los archivos los subo y modifico desde la pc
nono archivos en el server. ejemplo http://server.com/imagen.png
 

Jorge Reyes

Moderador
1
Kappa
Social Media
Verificado con documento
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
29 Mar 2012
Mensajes
2.574
Edad
22
Crédito(s)
1
Puntos
152
Buen aporte, muy útil :)
 

Roberth Zuñiga

Gamma
Redactor
Verificación en dos pasos desactivada
Desde
23 Nov 2011
Mensajes
306
Edad
30
Crédito(s)
0
Puntos
11
Muchas gracias por el aporte pero me queda una duda donde va el SDK JS de facebook
 

elmeteoro

Kappa
Social Media
Verificación en dos pasos desactivada
Desde
23 Oct 2011
Mensajes
2.697
Crédito(s)
0
Puntos
3.314
Buen aporte seria bueno un video desde cero, ya que no hay en san google xD
 

iNeedYou

1
Pi
SEO
Verificación en dos pasos desactivada
¡Excelente comerciante!
Desde
27 Sep 2010
Mensajes
14.166
Crédito(s)
0
Puntos
164
Mil gracias oye, y no haberlo visto hasta ahora...
 

cesardpaz

Eta
Programador
Verificación en dos pasos desactivada
Desde
30 Mar 2010
Mensajes
1.365
Crédito(s)
0
Puntos
346
Eres un trome para estas cosas.

Gracias por el aporte.
 

Arriba