Tutorial: Aprende a crear una aplicación de Facebook para agregar estados de ánimo

  • 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
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:
Enlace eliminado
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)
Enlace eliminado
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
Enlace eliminado
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:
Enlace eliminado

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:
Muchas gracias por el aporte!
 
Gracias hermano, por aportar sus conocimientos. Le estoy agradecido. :encouragement:
 
Uff muy interesante amigo te lo agradezco, mañana sin duda lo pruebo.

Gracias 😛7:
 
Gracias, buen aporte vere si puedo hacerlo :fatigue:
 
Wow gran aport5e! muchas gracias por compartirlo!
 
Interesante, gracias por el aporte.
 
Sabia que forobeta tiene gente que ayuda. Gracias:encouragement:
 
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?
 
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
 
Esto puede aplicarse para una fanpage? [MENTION=9679]cicklow[/MENTION]
 
Hola.. y gracias por responder, las imágenes de la pc? porque los archivos los subo y modifico desde la pc
 
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
 
Buen aporte, muy útil 🙂
 
Muchas gracias por el aporte pero me queda una duda donde va el SDK JS de facebook
 
Buen aporte seria bueno un video desde cero, ya que no hay en san google xD
 
Mil gracias oye, y no haberlo visto hasta ahora...
 
Eres un trome para estas cosas.

Gracias por el aporte.
 
Atrás
Arriba