Tutorial: Ejemplos de aplicaciones para fanpages - ¡Crea imágenes personalizadas con PHP y GD!

Cicklow · 27 Sep 2012

En este mini curso podrán ver y aprender como hacer otro tipo de aplicaciones para las fanspages. Vamos a usar como referencia la apps ->

Insertar CODE, HTML o PHP:

http://www.mediafire.com/?mais8gty1wz8wcw

Vamos a reemplazar solo este código por otros (tab.php):

PHP:

if($_REQUEST['crear']==""){
			//Numero aleatorio y mostramos el resultado
			$CUAL = mt_rand(10,95);
			echo '<a href="'.$_MSERVER.'tab.php?crear=1&cual='.$CUAL.'&signed_request='.$_REQUEST['signed_request'].'"><img src="pic/button.png" border="0"></a><br/><br/>';
			echo '<img src="fondos/tmp_'.$CUAL.'.jpg">';
}else{
			//Subimos la imagen
			$_P['message'] = trim('Descubre tu suerte diaria. '.$_LNK);
			$_P['source'] = "@" . realpath('fondos/tmp_'.$_REQUEST['cual'].'.jpg');
			$ch = curl_init();
			curl_setopt($ch, CURLOPT_URL,'https://graph.facebook.com/'.$_R['user_id'].'/photos?access_token='.$_R['oauth_token']);
			curl_setopt($ch, CURLOPT_POST, true);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($ch, CURLOPT_POSTFIELDS, $_P);
			$resultado = curl_exec($ch);
			$resultado = json_decode($resultado, true);
			curl_close($ch);

			//echo "<script>window.top.location = '".$_LNK."';</script>";
			//Si no queremos mostrar mas nada solo sacamos las barras de comentario (//) en la linea anterior
			//Sino mostramos algo.
			echo '<h1>Tu imagen fue subida con exito, podras verla en tu perfil</h1>';
}

1- Subir la imagen sin paso previo por usuario
Este código lo que hace es evitar el paso de mostrar el resultado y decirle al usuario que haga clic en un botón para subir la imagen al muro.

PHP:

			//Numero aleatorio y mostramos el resultado
			$CUAL = mt_rand(10,95);
			echo '<img src="fondos/tmp_'.$CUAL.'.jpg">';

			//Subimos la imagen
			$_P['message'] = trim('Descubre tu suerte diaria. '.$_LNK);
			$_P['source'] = "@" . realpath('fondos/tmp_'.$CUAL.'.jpg');
			$ch = curl_init();
			curl_setopt($ch, CURLOPT_URL,'https://graph.facebook.com/'.$_R['user_id'].'/photos?access_token='.$_R['oauth_token']);
			curl_setopt($ch, CURLOPT_POST, true);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($ch, CURLOPT_POSTFIELDS, $_P);
			$resultado = curl_exec($ch);
			$resultado = json_decode($resultado, true);
			curl_close($ch);

			//echo "<script>window.top.location = '".$_LNK."';</script>";
			//Si no queremos mostrar mas nada solo sacamos las barras de comentario (//) en la linea anterior
			//Sino mostramos algo.
			echo '<h1>Tu imagen fue subida con exito, podras verla en tu perfil</h1>';

[Los ejemplos a continuar usan GD, tengan en cuenta que esto consume recursos y si la aplicación da resultado tienen que tener un buen server para no morir en el intento]
2- Usar GD para agregar el nombre de usuario a una imagen

PHP:

			//Usamos GD para crear la imagen
			$font = 'impact.ttf'; //Fuente a usar (ir a la carpeta windows/fonts seleccionar una fuente, copiar y pegar en la carpeta de la apps)
			$image = imagecreatefromjpeg('buena_suerte2.jpg'); //Imagen base

			if ($image === false) { die ('Unable to open image'); }

			$textcolor = imagecolorallocate($image,255,255,255); //Color del texto RGB

			imagettftext($image, 20, 0, 20,50, $textcolor, $font, $A['first_name'].' Tiene hoy'); //Agregamos el nombre
			imagettftext($image, 60, 0, 65,375, $textcolor, $font, mt_rand(10,95).'% de'); //Agregamos el %

			imagejpeg($image,'tmp/tmp_'.$A['id'].'.jpg',90); //Creamos la imagen en la carpeta tmp
			imagedestroy($image); //Vaciamos la memoria

			echo '<img src="tmp/tmp_'.$A['id'].'.jpg">'; //Mostramos la img al usuario!

			//Subimos la imagen
			$_P['message'] = trim('Descubre tu suerte diaria. '.$_LNK);
			$_P['source'] = "@" . realpath('tmp/tmp_'.$A['id'].'.jpg');
			$ch = curl_init();
			curl_setopt($ch, CURLOPT_URL,'https://graph.facebook.com/'.$_R['user_id'].'/photos?access_token='.$_R['oauth_token']);
			curl_setopt($ch, CURLOPT_POST, true);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($ch, CURLOPT_POSTFIELDS, $_P);
			$resultado = curl_exec($ch);
			$resultado = json_decode($resultado, true);
			curl_close($ch);

			//echo "<script>window.top.location = '".$_LNK."';</script>";
			//Si no queremos mostrar mas nada solo sacamos las barras de comentario (//) en la linea anterior
			//Sino mostramos algo.
			echo '<h1>Tu imagen fue subida con exito, podras verla en tu perfil</h1>';

Resultado:

Imagen Base:

3- Colocar la imagen del usuario, el nombre y un %
Este ejemplo lee la imagen del usuario, el nombre y lo agrega a una imagen base

PHP:

	$url = 'http://graph.facebook.com/'.$A['id'].'/picture?type=large';
	$font = 'impact.ttf'; //Fuente a usar

	//Funcion encargada de ver la url real de la imagen del usuario
	function VerRealURL($U){
		$ch2 = curl_init();
		curl_setopt($ch2, CURLOPT_URL, $U);
		curl_setopt($ch2, CURLOPT_HEADER, true);
		curl_setopt($ch2, CURLOPT_RETURNTRANSFER, true);
		$ZZ = curl_exec($ch2);
		curl_close($ch2);

		preg_match('/Location:(.*?)\n/', $ZZ, $matches);
		return trim(array_pop($matches));
	}

	//Funcion encargada de ver que tipo de foto tiene (jpg,gif,etc)
	function open_image($file){
	    $size = getimagesize($file);
	    switch($size["mime"]){
        	case "image/jpeg":
	            $im = imagecreatefromjpeg($file); //jpeg file
        	    break;
	        case "image/gif":
        	    $im = imagecreatefromgif($file); //gif file
	            break;
        	case "image/png":
	            $im = imagecreatefrompng($file); //png file
        	    break;
	        default: 
        	    $im=false;
	            break;
	    }
	    return $im;
	}

	//Vemos la url de la foto del usuario
	$url = VerRealURL($url);
	//La abrimos
	$image = open_image($url);

	if ($image === false) { die ('Unable to open image'); }

	//Vemos el tamaño
	$w = imagesx($image);
	$h = imagesy($image);

	//calculamos las nuevas dimensiones preservando el aspecto
	$new_w=200;
	$new_h=200;
	if(($w/$h) > ($new_w/$new_h)){
		$new_h=$new_w*($h/$w);
	} else {
		$new_w=$new_h*($w/$h);   
	}

	//Cargamos la imagen base
	$im2 = imagecreatefromjpeg('caraderata.jpg');
	//Agregamos la img del usuario al base
	imagecopyResampled($im2, $image, 260, 166, 0, 0, $new_w, $new_h, $w, $h);

	//Color de texto negro
	$textcolor = imagecolorallocate($im2,0,0,0);
	$text1 = $A['first_name'];

	//Agregamos el texto y el nombre
	imagettftext($im2, 25, 0, 20,40, $textcolor, $font, 'Segun lo que se ve en la foto de');
	imagettftext($im2, 30, 0, 20,90, $textcolor, $font, $text1);
	//Agregamos el %
	imagettftext($im2, 20, 0, 20,120, $textcolor, $font, 'Tiene un');
	imagettftext($im2, 50, 0, 130,160, $textcolor, $font, mt_rand(10,95).'%');
	imagettftext($im2, 20, 0, 260,120, $textcolor, $font, 'de cara de rata');

	//Guardamos la img
	imagejpeg($im2,'tmp/tmp_'.$A['id'].'.jpg',90);
	imagedestroy($im2);
	echo '<img src="tmp/tmp_'.$A['id'].'.jpg">'; //Mostramos la img al usuario!

			//Subimos la imagen
			$_P['message'] = trim('Descubre tu suerte diaria. '.$_LNK);
			$_P['source'] = "@" . realpath('fondos/tmp_'.$A['id'].'.jpg');
			$ch = curl_init();
			curl_setopt($ch, CURLOPT_URL,'https://graph.facebook.com/'.$_R['user_id'].'/photos?access_token='.$_R['oauth_token']);
			curl_setopt($ch, CURLOPT_POST, true);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($ch, CURLOPT_POSTFIELDS, $_P);
			$resultado = curl_exec($ch);
			$resultado = json_decode($resultado, true);
			curl_close($ch);

			//echo "<script>window.top.location = '".$_LNK."';</script>";
			//Si no queremos mostrar mas nada solo sacamos las barras de comentario (//) en la linea anterior
			//Sino mostramos algo.
			echo '<h1>Tu imagen fue subida con exito, podras verla en tu perfil</h1>';

Resultado:

Imagen Base:

4- Calcular edad y mostrarla en la img con un agregado
Para este ejemplo tendremos que editar otro parámetro en tab.php
La variable $_PERMISOS tiene que quedar de esta manera:

PHP:

	$_PERMISOS	= 'publish_stream,photo_upload,user_birthday';

El permiso user_birthday no permitirá leer la fecha de nacimiento del usuario.

PHP:

	//Separamos la fecha en un array
	$_EDAD = explode('/',$A['birthday']);
	//Calculamos el año actual y le descontamos el año de naciemiento del usr
	$_EDAD = date('Y',time()) - $_EDAD[2];
	$_TIENE = $_EDAD;
	//Calculamos de cuantos años mas se ve
	$_PARECE = $_EDAD + mt_rand(2,11);

	//Cargamos la fuente
	$font = 'impact.ttf';
	//Cargamos la imagen base
	$image = imagecreatefromjpeg('abuelo.jpg');

	if ($image === false) { die ('Unable to open image'); }

	//Color del texto
	$textcolor = imagecolorallocate($image,0,0,0);

	//Agregamos las variables
	imagettftext($image, 50, 0, 165,80, $textcolor, $font, $_TIENE);
	imagettftext($image, 130, 0, 45,280, $textcolor, $font, $_PARECE);

	//guardamos la img
	imagejpeg($image,'tmp/tmp_'.$A['id'].'.jpg',90);
	imagedestroy($image);

			echo '<img src="tmp/tmp_'.$A['id'].'.jpg">'; //Mostramos la img al usuario!

			//Subimos la imagen
			$_P['message'] = trim('Descubre tu suerte diaria. '.$_LNK);
			$_P['source'] = "@" . realpath('tmp/tmp_'.$A['id'].'.jpg');
			$ch = curl_init();
			curl_setopt($ch, CURLOPT_URL,'https://graph.facebook.com/'.$_R['user_id'].'/photos?access_token='.$_R['oauth_token']);
			curl_setopt($ch, CURLOPT_POST, true);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($ch, CURLOPT_POSTFIELDS, $_P);
			$resultado = curl_exec($ch);
			$resultado = json_decode($resultado, true);
			curl_close($ch);

			//echo "<script>window.top.location = '".$_LNK."';</script>";
			//Si no queremos mostrar mas nada solo sacamos las barras de comentario (//) en la linea anterior
			//Sino mostramos algo.
			echo '<h1>Tu imagen fue subida con exito, podras verla en tu perfil</h1>';

Resultado:

Imagen Base:

----------------------------------------------------------------------------------------------------------------------------------------
Como ven no es difícil crear otro tipo de aplicaciones. Ahora paso a explicar un poco.
En todos los ejemplo se usa un array $A, ese array contiene los datos del usuario
$A['name'] = Nombre completo del usuario
$A['first_name'] = Primer nombre del usuario
$A['id'] = ID del usuario
$A['birthday'] = fecha de nacimiento del usuario
Mas datos: User - Facebook-Entwickler
----------------------------------------------------------------------------------------------------------------------------------------
Como ven se usa imagettftext para agregar los textos. Estos son los parametros

Insertar CODE, HTML o PHP:

imagettftext(HANDLE_IMAGEN, TAMAÑO_FUENTE, ANGULO, COORDENADA_X,COORDENADA_Y, COLOR_DE_TEXTO, FUENTE, TEXTO);

PHP: imagettftext - Manual
----------------------------------------------------------------------------------------------------------------------------------------

Espero que les sea de ayuda

Saludos y buena suerte!

----------------------------------------------------------------------------------------------------------------------------------------
Si queremos usar la misma aplicación en muchas fanspages! usar este code
Tenemos:

PHP:

<?php
	@set_time_limit(0);

	$_PAGEID		= 'blablabla';
	$_APPID		= 'blablabla';
	$_APPSE		= 'blablabla';
	$_PERMISOS	= 'publish_stream,photo_upload';
	$_MSERVER	= 'blablabla';
	$_ADGER		= 'blablabla';
	$_ADALE		= 'blablabla';
	$GOOGLEURL	= 'blablabla';

	//Obtenemos Los datos del usuario
	$_R = _SR($_REQUEST['signed_request'],$_APPSE);

Cambiamos por:

PHP:

<?php
	@set_time_limit(0);

	$_APPID		= 'blablabla';
	$_APPSE		= 'blablabla';
	$_PERMISOS	= 'publish_stream,photo_upload';
	$_MSERVER	= 'blablabla';
	$_ADGER		= 'blablabla';
	$_ADALE		= 'blablabla';
	$GOOGLEURL	= 'blablabla';

	//Obtenemos Los datos del usuario
	$_R = _SR($_REQUEST['signed_request'],$_APPSE);
	//Leemos el ID de la fanpage de la cual el usuario esta accediendo.
	$_PAGEID		= $_R['page']['id'];

De esta forma 1 sola aplicacion la pueden meter en muchas fanpages

Objetos de la variable $_R -> https://developers.facebook.com/docs/authentication/signed_request/
----------------------------------------------------------------------------------------------------------------------------------------

pikar0 · 27 Sep 2012

Estos aportes son de agradecer

jackemathe · 27 Sep 2012

Gracias cicklow

7:

Alf · 27 Sep 2012

Wow muchísimas gracias por este aportazo! :encouragement:

Kenny H · 27 Sep 2012

Gran aporte man, gracias

EliJ · 27 Sep 2012

Muy buena, cada día comprendo más :encouragement:

Kenny H · 27 Sep 2012

Cicklow hoy probe las aplicaciones que posteaste todos muy buenos felicitaciones

, en la aplicacion de calcular tu edad me sale la imagen perfecta pero los datos imprimidos salen mal, es decir es vez de mostrar las edades me muestra los años ejemplo:

usuario tienes 2012 años
pero pareces de 2016 años

algo hice mal hermano ?, como lo puedo solucionar.
Saludos

Cicklow · 27 Sep 2012

hilmarcito dijo:
Cicklow hoy probe las aplicaciones que posteaste todos muy buenos felicitaciones , en la aplicacion de calcular tu edad me sale la imagen perfecta pero los datos imprimidos salen mal, es decir es vez de mostrar las edades me muestra los años ejemplo:

algo hice mal hermano ?, como lo puedo solucionar.
Saludos

Fijate si estas recibiendo la fecha de nacimiento.

Kenny H · 27 Sep 2012

cicklow dijo:
Fijate si estas recibiendo la fecha de nacimiento.

Si, lo tengo tal cual el tutorial. donde en permisos agrego user_birthday y la parte del codigo de crear la imagen

Sannntiago · 27 Sep 2012

Sos un genio, me encanta ver usuarios como vos en este foro

Cicklow · 27 Sep 2012

hilmarcito dijo:
Si, lo tengo tal cual el tutorial. donde en permisos agrego user_birthday y la parte del codigo de crear la imagen

sisis. pero me refiero ke la recibas bien. Ejemplo: 06/05/1983

pone dsp de:

PHP:

$_EDAD = explode('/',$A['birthday']); 
print_r($_EDAD);die();

Y fijate si sale la fecha, sino sale es que el usuario no tiene configurado la fecha de nacimiento! (o no la estas recibiendo)

Kenny H · 27 Sep 2012

cicklow dijo:
sisis. pero me refiero ke la recibas bien. Ejemplo: 06/05/1983

pone dsp de:

PHP:

$_EDAD = explode('/',$A['birthday']); print_r($_EDAD);die();

Y fijate si sale la fecha, sino sale es que el usuario no tiene configurado la fecha de nacimiento! (o no la estas recibiendo)

man siento haberte molestado :S pero es que denantes probando con mi cuenta personal no salia bien, y tenia puesto la fecha de nacimiento... ahora lo probe con otra cuenta y salio normal sin nigun error :welcoming:

tamik · 28 Sep 2012

Que tal aportazo!!! La verdad bastante agradecido!!! Estoy al borde de las lágrimas por causa de esto!

Jesam · 28 Sep 2012

SIMPLEMENTE ---> I M P R E S I O N A N TE
Eres la ostia tio!

te mereces algo, aportas mucho

eso es bueno, gracias creo que a todos nos ha gustado este tutorial.

Magnifico.

juanluis · 28 Sep 2012

Que gran aporte, algún día me pondré a hacer estas cosas =)

Cicklow · 28 Sep 2012

Actualizado, ahora podran usar una sola apps en muchas fanpages

ziney · 28 Sep 2012

Buen aporte

Thanks.

Jesam · 28 Sep 2012

[MENTION=9679]cicklow[/MENTION] mira facebookeando encontre alguien que hace lo mismo:

Que Tan Borrach@ Eres, Segun Tu Signo? -

Me gusta esa app, la verdad es que no se me idea de como hacer para seleccionar los Signos Zodiacales.

adan_inc5 · 28 Sep 2012

Interesante. ¡Gracias!

todaweb7 · 28 Sep 2012

Waow, esta muy bueno el tuto! :encouragement: esta del 10 10 10 jeje....

saludos!

Tutorial: Ejemplos de aplicaciones para fanpages - ¡Crea imágenes personalizadas con PHP y GD!

Cicklow Seguir Seguidores 14

Cicklow Seguir

Seguidores

14