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

Cicklow Seguir
Seguidores
14

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
959
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:

quimbox

1
Iota
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Suscripción a IA
Desde
22 Mar 2012
Mensajes
2.340
Gracias hermano, por aportar sus conocimientos. Le estoy agradecido. :encouragement:
 

T4kuyax

Zeta
Social Media
Verificación en dos pasos desactivada
Verificado por Binance
Desde
11 Abr 2012
Mensajes
1.521
Uff muy interesante amigo te lo agradezco, mañana sin duda lo pruebo.

Gracias :p7:
 

Jose Canul

Exchanger
No recomendado
Verificado
Verificación en dos pasos desactivada
¡Ha verificado su Paypal!
Desde
12 Sep 2011
Mensajes
5.138
Gracias, buen aporte vere si puedo hacerlo :fatigue:
 

uben

Delta
Verificación en dos pasos desactivada
Desde
9 Dic 2011
Mensajes
562
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
necesita ssl
 

anferro

1
Ómicron
SEO
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
29 Oct 2011
Mensajes
4.552
Wow gran aport5e! muchas gracias por compartirlo!
 

jorgejacobo

Zeta
Verificación en dos pasos desactivada
Desde
2 Nov 2011
Mensajes
1.968
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Sabia que forobeta tiene gente que ayuda. Gracias:encouragement:
 

vanna

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
5 Oct 2012
Mensajes
79
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
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
959
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
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
3 Ago 2012
Mensajes
2.371
Esto puede aplicarse para una fanpage? [MENTION=9679]cicklow[/MENTION]
 

vanna

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
5 Oct 2012
Mensajes
79
Hola.. y gracias por responder, las imágenes de la pc? porque los archivos los subo y modifico desde la pc
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
959
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
 

elmeteoro

Kappa
Social Media
Verificación en dos pasos desactivada
Desde
23 Oct 2011
Mensajes
2.695
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Buen aporte seria bueno un video desde cero, ya que no hay en san google xD
 

iNeedYou

1
Sigma
SEO
Verificado
Verificación en dos pasos activada
¡Ha verificado su Paypal!
¡Excelente comerciante!
Suscripción a IA
Desde
27 Sep 2010
Mensajes
14.750
Mil gracias oye, y no haberlo visto hasta ahora...
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba