Cómo insertar Facebook en Web
-
Upload
kimera-kimeraweb -
Category
Documents
-
view
239 -
download
1
description
Transcript of 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.
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.
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
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
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
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,
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
8.- Va
ayamos a la aaplicación
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
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
11.- A
Ahora un simmple control.
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
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
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
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
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.
17.- Unuest
Una vez relletro pluggin.
enado el mini formulario,
, clicamos enn Get Code ppara obtener r el código paara
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
tá
adas,
19.- U<BOD
Una foto conDY>.
n el detalle de la primera
parte del cóódigo justo después de laa etiqueta
20.- D
Detalle del cóódigo insertaado en la cel
da de una taabla.
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
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
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();
} 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">
<?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 :)