cómo insertar facebook en web

26
Para el SD integrar Face K de Facebo Cómo ebook sólo t ok para desa M integrar Fac tienes que se arrollar tu pr Manua ebook en nu eguir las indi ropia aplicac al uestra página caciones del ión, necesita a web. manual, per arás conocim ro si quieres mientos de PH usar HP.

Upload: kimera-kimeraweb

Post on 07-Feb-2016

235 views

Category:

Documents


1 download

DESCRIPTION

Creas una aplicación en facebook para poder incorporarla a tu web. Podrás agregar tus contactos, tus visitantes y estar en contacto con ellos. Haz que se logueen con facebook y se registren mediante tu aplicación, con un solo click.

TRANSCRIPT

Page 1: Cómo insertar Facebook en Web

Para el SD

integrar FaceK de Facebo

Cómo

ebook sólo tok para desa

Mintegrar Fac

tienes que searrollar tu pr

Manua

ebook en nu

eguir las indiropia aplicac

aluestra página

caciones delión, necesita

a web.

manual, perarás conocim

ro si quieresmientos de PH

usar HP.

Page 2: Cómo insertar Facebook en Web

1.- Ir

2.- Cl

a http://dev

ica en la opc

velopers.face

ción de la de

ebook.com/ y

recha, Build

y logueate c

for Website

on tu cuenta

es.

a.

Page 3: Cómo insertar Facebook en Web

3.- LoSDK s

o primero qusignifican Sof

ue tenemos qftware Deve

que tener enlopment Kit,

n nuestra we, kit de desar

bsite es el Srrollo de soft

DK de Facebtware.

book. Las sigllas

Page 4: Cómo insertar Facebook en Web

4.- Ende PH

n la pantalla HP en el ejem

podemos elemplo, asi que

egir el lengue clicaré la op

aje de progrpción Facebo

ramación queook SDK for

e queramos PHP.

usar, yo usaré el

Page 5: Cómo insertar Facebook en Web

5.- EnSDK) yel SDmismdel usFaceb

n la columnay una descripK, en este pu

mo SDK hay usuario que ebook.

del menú (ipción de sus unto ya nece

una página dees muy útil si

zquierda) teAPIs. Las AP

esitarás conoe ejemplo ququieres crea

nemos el enPIs son los mocer PHP parue te muestrar una web d

lace de descétodos de laa usarlas. De

ra cómo obtedonde los us

carga del SDKs clases que

e cualquier foener la informuarios se reg

K (Download th

puedes usaorma, en el mación públgistren con s

he PHP

r con

ica u

Page 6: Cómo insertar Facebook en Web

6.- Decomo

escarga el SDo en la foto).

DK clicando e

en el botón Z

ZIP (se pone azul cuando pasas el ratóón por encimma,

Page 7: Cómo insertar Facebook en Web

7.- AhFaceb

You w

No puotrascuent

hora necesitabook en su p

will need an ap

uedo insertas informacionta de todos ;

aremos una página, en la

pp id to initializ

ar el link direnes. Cada us;D

ID para crealínea subray

ze the SDK, w

cto porque suario lleva e

ar nuestra apyada de azul

which you can

se incluye la l suyo, de ot

plicación. Estde la captura

obtain from th

ID del usuartra forma, ca

a es proporca:

he App Dashbo

io y el link vada uno entra

cionada por

oard.

a encriptadoaríamos en l

o con a

Page 8: Cómo insertar Facebook en Web

8.- Va

ayamos a la aaplicación

Page 9: Cómo insertar Facebook en Web

9.- Aqa una

Arrib

Clica

quí se muesta web, a Face

a en la esqui

allí para con

tra un menú ebook o a mó

inita superio

nseguir nuest

con enlaces óviles (celula

or derecha, h

tra ID para n

a instruccioar creo que l

hay un enlace

uestra web.

nes para creo llaman en

e que dice: +

ar nuestra aAmérica).

+ Create New

plicación dir

w App

rigida

Page 10: Cómo insertar Facebook en Web

10.- A

RelleEl res

Si no cuent

Aparece una

nar la informsto es opcion

has verificadta que me ha

pantalla tal

mación del prnal. Una vez

do tu cuentaabían pasado

que así:

rimer textboelegido el no

a, obtendráso para este m

ox es obligatoombre, conti

una página dmanual... se

orio, ahí vieninuamos.

de error, comguiré con mi

ne el nombre

mo me acabai cuenta.

e de la aplica

a de pasar co

ción.

on la

Page 11: Cómo insertar Facebook en Web

11.- A

Ahora un simmple control.

Page 12: Cómo insertar Facebook en Web

12.- Allamanombesta e

Arrib

LaWApp IDApp S

Cuidaestosalguiesigue

Aquí tenemoaba miWebsibre se llama es la captura

a tenemos la

WebSiteDeD: 102893ecret: f1ce6c1

ado no vayáis códigos comen entre en

e rulando por

os la informaite y la he caLaWebSiteD

a:

a informació

eUnDespi649868574

13133eac7e3e00

s dando estamo parte de la página de r la web el ca

ción de nuesmbiado para

DeUnDespist

n que neces

stado

0b683028d7d91(

a informacióla aplicacióntu amigo, ap

acao que pue

stra aplicacióa no confundtado, pero qu

itamos para

(reiniciar)

n por ahí, yan, así que si vparecerá tamede crearte x

ón. El nombrdirme con la ue esto no te

nuestra web

a que si la covuestro amigmbién en tu wxD

re ha cambiaweb de este

e confunda. A

b:

mpartís, Facgo usa estos nweb, no te d

ado, antes see sujeto. AhoA lo que vam

cebook tratarnúmeros, cuigo si este có

e ora el mos,

rá la uando ódigo

Page 13: Cómo insertar Facebook en Web

13.- A

Ahoranuestmien

Chang

Agrega el do

a hay que tetro SDK en latras descarg

ges saved. No

minio de tu w

ner en cuenta web, pudiego la web de

ote that your c

web en “Web

ta el tiempo era no funcio

este usuario

hanges may ta

bsite with Fa

de propagaonar hasta pao despistado,

ake several m

acebook Login

ción de los dasado unos m, porque tam

inutes to prop

n” y guarda lo

datos, ya queminutos. Dejampoco me la

pagate to all se

os cambios:

e al agregar aré diez minha pasado x

ervers.

utos D

Page 14: Cómo insertar Facebook en Web
Page 15: Cómo insertar Facebook en Web

14.- Eno veclasepara

La poopcioconec

Volva

Este es el peoenga con el ts de webs qunuestra aplic

ondré aquí deones que mectados o am

amos a Faceb

or diseño weema, no quieue se compacación.

ebajo de los ofrece Faceigos que le d

book :)

eb que he visero que me crten en L2Br

votos, veambook. Podría

dieron al LIKE

sto en años (critiquéis curazil. Bueno,

mos cuanto ea insertar unE. Ya veremo

(tablas dentrando veáis eal grano, lo

spacio tengo botón de Lo

os sobre la m

ro de tablas 0el código, ya primero es b

o y así podré ogin y una ve

marcha.

0.o’), aunqueque estas so

buscar un hu

elegir una dentanita con

e esto on esa ueco

de las los

Page 16: Cómo insertar Facebook en Web

15.- D

Aquí

Voy a

http:/

Dirígete a htt

elegiremos q

a seleccionar

//developers

tps://develo

que plugins i

r el botón LIK

s.facebook.c

pers.faceboo

insertar en n

KE.

com/docs/re

ok.com/docs

nuestra web.

eference/plug

s/guides/we

gins/like/

b/#plugins

Page 17: Cómo insertar Facebook en Web

16.- T

Yo te

Tenemos un

ngo 200px d

menú para c

de ancho par

crear nuestro

a poner este

o pluggin pe

e pluggin, así

rsonalizado.

í que allá voyy.

Page 18: Cómo insertar Facebook en Web

17.- Unuest

Una vez relletro pluggin.

enado el mini formulario,

, clicamos enn Get Code ppara obtener r el código paara

Page 19: Cómo insertar Facebook en Web

18.- Lweb.

La segcolor

Fíjate“LaWpodrí

La primera p

gunda partereada de azu

e que encimaWebDeUnDes

ías confundir

arte del códi

del código sl.

a del código spistado”. Esr las IDs.

igo aconseja

será la que m

te dice que es importante

a insertarla ju

muestre nues

el código dele saberlo por

usto después

stro “Me gus

l pluggin ha srque si tienes

s de la etique

sta”, que es l

sido generads varias aplic

eta <BODY>

la que no est

do para caciones crea

de la

adas,

Page 20: Cómo insertar Facebook en Web

19.- U<BOD

Una foto conDY>.

n el detalle de la primera

parte del cóódigo justo después de laa etiqueta

Page 21: Cómo insertar Facebook en Web

20.- D

Detalle del cóódigo insertaado en la cel

da de una taabla.

Page 22: Cómo insertar Facebook en Web

21.- AhuboURL,

Ahora toca po algún error

ya que la we

probar el códen el proces

eb no es mía

igo en la weso, URL incory la he subid

eb. Si nada mrrecta, ID de do a un host

más ponerlo yla app incor

t cualquiera.

ya tienes 473rrecta, etc...

3 amigos, es mi error es l

que a

Page 23: Cómo insertar Facebook en Web

22.- A

Bien,

Vale.

Cuandice qa:

https

Ahora te esta

cuando algu

.. bugs in live

do me dispuque han cam

s://github.co

arás pregunt

uien se regist

e xD

use a abrir el mbiado el pro

m/facebook

tando, para q

tra y quieres

ZIP que me oyecto de sit

k/facebook-p

que quieres e

s obtener sus

habia descaio y que este

php-sdk

el SDK que te

s datos, nece

rgado solo me ya está obs

e has descar

esitas el SDK

me encuentrosoleto, ahora

rgado?

.

o un readmea tenemos qu

e que ue ir

Page 24: Cómo insertar Facebook en Web

23.- Una vez abierto el SDK, vemos que hay una carpeta que pone example, pues mas que ejemplo, nos lo da hecho.

Este es el código de la parte en PHP:

<?php /** * Copyright 2011 Facebook, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); you may * not use this file except in compliance with the License. You may obtain * a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the * License for the specific language governing permissions and limitations * under the License. */ require '../src/facebook.php'; // Create our Application instance (replace this with your appId and secret). $facebook = new Facebook(array( 'appId' => '344617158898614', 'secret' => '6dc8ac871858b34798bc2488200e503d', )); // Get User ID $user = $facebook->getUser(); // We may or may not have this data based on whether the user is logged in. // // If we have a $user id here, it means we know the user is logged into // Facebook, but we don't know if the access token is valid. An access // token is invalid if the user logged out of Facebook. if ($user) { try { // Proceed knowing you have a logged in user who's authenticated. $user_profile = $facebook->api('/me'); } catch (FacebookApiException $e) { error_log($e); $user = null; } } // Login or logout url will be needed depending on current user state. if ($user) { $logoutUrl = $facebook->getLogoutUrl();

Page 25: Cómo insertar Facebook en Web

} else { $loginUrl = $facebook->getLoginUrl(); } // This call will always work since we are fetching public data. $naitik = $facebook->api('/naitik'); ?> Y aquí tienes el código de la parte en HTML que deberá ir en tu web, por ejemplo, index.php, para probar el código del ejemplo. <!doctype html> <html xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <title>php-sdk</title> <style> body { font-family: 'Lucida Grande', Verdana, Arial, sans-serif; } h1 a { text-decoration: none; color: #3b5998; } h1 a:hover { text-decoration: underline; } </style> </head> <body> <h1>php-sdk</h1> <?php if ($user): ?> <a href="<?php echo $logoutUrl; ?>">Logout</a> <?php else: ?> <div> Login using OAuth 2.0 handled by the PHP SDK: <a href="<?php echo $loginUrl; ?>">Login with Facebook</a> </div> <?php endif ?> <h3>PHP Session</h3> <pre><?php print_r($_SESSION); ?></pre> <?php if ($user): ?> <h3>You</h3> <img src="https://graph.facebook.com/<?php echo $user; ?>/picture"> <h3>Your User Object (/me)</h3> <pre><?php print_r($user_profile); ?></pre> <?php else: ?> <strong><em>You are not Connected.</em></strong> <?php endif ?> <h3>Public profile of Naitik</h3> <img src="https://graph.facebook.com/naitik/picture">

Page 26: Cómo insertar Facebook en Web

<?php echo $naitik['name']; ?> </body> </html>

En este código se muestra como un usuario al entrar a la web se loguea y obtiene su nombre.

También controla si está conectado o no. Además, puedes crear una base de datos para guardar su acceso y felicitarle cuando regrese, hacer una estadística de visitantes, guardar el tiempo que se quedan en tu web, y todo lo que el usuario tenga público en su perfil, podrás usarlo.

Ya te dejo investigar y que descubras por tu cuenta :)