Tutorial: Aprenda a criar um aplicativo do Facebook para adicionar estados de espírito

  • Autor Autor Cicklow
  • Data de início Data de início
Este tópico foi traduzido automaticamente do espanhol. Ver original
Cicklow

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Suscripción a IA
Hoje vocês aprenderão a criar um aplicativo para o Facebook que permite colocar estados de espírito.
O aplicativo ficará desta maneira:
Link removido
Pode usar o pacote de emoticon que vocês quiserem, já que só precisam subir as imagens na pasta img e depois editar o estados.php (ver mais abaixo).

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
incluímos o config.php
PHP:
<?php
	include('config.php');
?>

agora montamos a estrutura de html e o CSS (como veem, coloquei CSS para montar tooltips e ficará desta forma)
Link removido
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 o SDK JS do 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);
		}());

função encarregada de publicar o emoticon no mural do usuário
Link removido
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>

adicionamos estados.php e percorremos os estados com um loop, montando a grade
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 arquivo tem:
1- nome da imagem
2- descrição da imagem (ou título)
3- texto da imagem (este texto tem que ser multi gênero, ou seja, para mulheres e para homens, usar o @ para os estados que são multi gênero, e também como veem não se inclui o nome nem nada. imaginem isto: USUÁRIO está criando um tutorial no ForoBeta, como veem depois não coloco a palavra USUÁRIO, desta forma todos os usuários que acessarem o aplicativo podem usá-lo)
Na pasta img que acompanha o aplicativo há mais emoticons, eu só coloquei alguns
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 mais emoticons podem usar:
Link removido

ou algum outro 🙂

Download:
Inserir CODE, HTML ou PHP:
http://www.mediafire.com/?q2rgdnpadwf5lto

PD: está incluído o SDK PHP do Facebook dentro do rar, para evitar que em outras atualizações do Facebook deixe de funcionar.

PD: Configurar apps: http://forobeta.com/tutoriales/117840-configurar-aplicacion-facebook.html
 
Última edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Muito obrigado pela contribuição!
 
Obrigado irmão, por compartilhar seus conhecimentos. Sou muito grato. :encouragement:
 
Uau, muito interessante amigo, agradeço, amanhã sem dúvida vou testar.

Obrigado 😛7:
 
Obrigado, boa contribuição, verei se consigo fazer :fatigue:
 
Wow gran aport5e! muchas gracias por compartirlo!
 
Interessante, obrigado pela contribuição.
 
Sabia que o ForoBeta tem gente que ajuda. Obrigado:encouragement:
 
Obrigado pela contribuição ..uma pergunta, na aplicação final tudo está ok, exceto as imagens que não carregam, a hospedagem onde se encontra a aplicação é no Heroku, alguma ideia de por que as imagens não aparecem?
 
Obrigado pela contribuição ..uma pergunta, na aplicação final tudo está ok, exceto as imagens que não carregam, a hospedagem onde se encontra a aplicação é no Heroku, alguma ideia de por que as imagens não aparecem?

veja se você consegue acessar diretamente as imagens
 
Isso pode ser aplicado para uma fanpage? [MENTION=9679]cicklow[/MENTION]
 
Olá.. e obrigado por responder, as imagens do PC? porque os arquivos eu subo e modifico pelo PC
 
Isso pode ser aplicado para uma fanpage? [MENTION=9679]cicklow[/MENTION]

se modificar sim, já que esta é uma app normal!

- - - Atualizado - - -

Olá.. e obrigado por responder, as imagens do PC? porque os arquivos eu subo e modifico pelo PC

não, não, arquivos no servidor. exemplo http://server.com/imagen.png
 
Boa contribuição, muito útil 🙂
 
Muito obrigado pela contribuição, mas me resta uma dúvida, onde vai o SDK JS do Facebook
 
Boa contribuição, seria bom um vídeo do zero, já que não tem no nosso amigo Google xD
 
Mil obrigado cara, e não ter visto isso até agora...
 
Voltar
Topo