From Facebook to your Drupal site

cakeexoticInternet και Εφαρμογές Web

13 Δεκ 2013 (πριν από 3 χρόνια και 7 μήνες)

86 εμφανίσεις

From  Facebook  to  your  Drupal  site  
D.C.  United  
Oscar  Merida  -­‐  July  2011  
D.C.  United  


D.C.  United  will  win  
championships,  and  serve  the  
community.  


One  of  10  original  Major  
League  Soccer  teams.  


AcEve  on  Facebook  &  TwiJer  


hJp://facebook.com/dcunited
 


hJp://twiJer.com/dcunited
 
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Who  am  I?  


Started  using  PHP3  in  2000  


First  Drupal  website  was  a  Drupal  4.6  project  


Joined  D.C.  United  in  2008  


omerida@dcunited.com  


hJp://www.oscarm.org/
 


hJp://twiJer.com/omerida
 
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
DCUnited.com  


Using  Drupal  6  since  2009  


Site  integrates  w/social  networks  


Using  Facebook’s  like,  recommend,  and  comment  plugins  


Using  TwiJer’s  “Tweet  this”  buJon  


Aggregate  fan  tweets  on  site  


Import  Flickr  photos  


Social  networks  provide  significant  share  of  returning  
traffic  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Why  Facebook?  


Reach  new,  and  casual  fans.  


750  Million  acEve  users,  50%  log  in  on  any  given  day.  


Average  user  spends  15.5  hours  per  month.  


Engage  exisEng  supporters  and  their  social  networks.  


130  friends  on  average  


Bring  fans  to  the  game  by  providing  news,  previews,  and  
offers  ahead  of  Eme.  
Sources:    
hJps://www.facebook.com/press/info.php?staEsEcs
   
hJp://www.mycorporatemedia.com/2011/06/23/2011-­‐facebook-­‐staEsEcs/
 
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Why  Facebook  Contests?  


Use  a  list  building/lead  generaEon  tool.  


Entries  imported  into  CRM.  


Can  follow  up  with  entrants  outside  of  Facebook.  


Collect  demographic  data  unavailable  through  Facebook.  


Sponsors  like  being  a  partner  in  engagement  


Benefits  both  sponsors  and  D.C.  United  


Sponsorship  dollars  well  spent  in  reaching  people.  


Can  do  a  contest  they  may  not  be  able  to  otherwise.  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Why  Drupal?  


Control  the  data  collected.  


Integrates  with  exisEng  site  


Reuse  exisEng  images,  content.  


Fine  tune  and  customize  the  applicaEon  flow  


Could  integrate  with  other  plaiorms.  


Offer  alternate  points  of  entry.  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Results  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Facebook’s  Guidelines  for  PromoEons  


Must  be  “administered  within  an  App”  


Acknowledge  that  contest  is  not  affiliated,  sponsored  
by  Facebook  


Can’t  use  only  acEons  such  as  liking  a  post,  or  
commenEng  to  enter  a  contest  


Can  require  liking  a  page,  checking  into  a  place,  or  
connecEng  to  app.  


Complete  rules  at  
hJps://www.facebook.com/promoEons_guidelines.php
 
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Contest  flow  
1.

User  clicks  on  contest  URL  and  app  gets  a  
Facebook
 
session  to  login  user.  
2.

Login  user  and  request  permission  to  access  new  
user’s  data  
3.

Test  if  a  user  meets  required  likes.  
4.

Display  form  to  capture  contest  entry.  
5.

Display  confirmaEon  screen  &  allow  users  to  share.  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
What  do  we  need?  


Drupal  site  


Registered  Facebook  ApplicaEon  


Webform  Module  


Facebook  PHP  &  Javscript  SDKs  


hJps://github.com/facebook/php-­‐sdk/  


Custom  glue  module  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Webform  module  


Collects  entries.  


UI  for  creaEng  forms  


hJp://drupal.org/
project/webforms
 


Not  limited  to  contests  


Surveys    &  
QuesEonnaires  


Volunteer/Event  signup  


Exports  data  to  CSV  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Register  your  ApplicaEon  


hJps://www.facebook.com/developers/createapp.php
 


Need  to  verify  your  account  now.  


APP  ID  


unique  idenEfier  for  your  applicaEon  


App  Secret  


AuthenEcates  requests  &  used  for  OAuth  authenEcaEon  


Canvas  Page    


name  on  facebook  hJp://apps.facebook.com/your_app  


Canvas  URL    


your  server  hosEng  the  applicaEon.  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
ApplicaEon  Request  Flow  
User’s  Browser  
Facebook
 
hJp://
apps.facebook.com/your_app
 
Your  Web  Server  
hJp://
www.youdomain.com/your_app
 
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Caveats  for  working  with  Canvas  


Users  will  only  see  your  canvas  page  URL.  


Page  can’t  be  more  than  740  pixels  wide.  


More  than  740  pixels,  might  get  scroll  bars  in  some  
browsers.  


Don’t  use  relaEve  URLs  to  redirect  between  pages.    


Try  to  keep  styling  &  design  simple.  


ApplicaEon  will  be  framed  by  Facebook  navigaEon      
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
AuthenEcaEng  Users  


New  users  must  approve  your  applicaEon  &  
permissions  


hJps://developers.facebook.com/docs/reference/api/permissions/
 
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
AuthenEcaEng  Users  


Facebook  uses  OAuth  for  authenEcaEon.  


In  App  serngs,  Site  Domain  should  match  Canvas  URL  


IE  user’s  require  P3P  header  to  get  cookies  to  work  right.  
hJp://stackoverflow.com/quesEons/1835285/iframe-­‐facebook-­‐applicaEon-­‐and-­‐cookies-­‐internet-­‐explorer  


Must  provide  an  HTTPS  version  of  your  canvas  URL  


Otherwise  PHP  ExcepEon  or  endless  reloading  loop
 
 


Facebook  Graph  API  App  Easy  w/  PHP  SDK  


hJp://www.joeyrivera.com/2010/facebook-­‐graph-­‐api-­‐app-­‐easy-­‐w-­‐php-­‐sdk/  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Allowing  only  Fans  to  Enter
 
 


We  can  require  user’s  to  Like  our  page  before  
submirng  an  entry.  


Used  the  REST  API  for  tesEng  if  someone  likes  you.  


$is_fan  =  $facebook-­‐>api(array('method'  =>  'pages.isfan',  
'uid'  =>  $user['id'],  'page_id'  =>  $page_id));  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Allowing  only  Fans  to  Enter
 
 


Display  like  box(es)  for  non  fans,  use  javscript  sdk  to  
respond  to  likes.  


FB.Event.subscribe('edge.create',  funcEon()  {  
//  redirect  to  form  })  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Displaying  the  Entry  Form  


Use  node_load  &  
node_view  to  
render  the  form.  


Need  to  change  
form  acEon  so  that  
the  form  posts  to  
the  Canvas  URL  (not  
node  page).  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Displaying  the  Entry  Form  


Check  if  a  user  has  already  submiJed  an  entry.  


Pre-­‐fill  form  with  user  data  


On  submit,  save  user,  form  nid,  submission  id  to  a  
tracking  table.  


Redirect  to  share  this  page  


Display  a  confirmaEon  page  a~er  submit.  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Send  to  friends    


Use  the  Requests  
Dialog  to  send  
messages.  


Can  specify  the  
message  text.  


Maximum  50  friends  
to  send  to.  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
ConfirmaEon  page  


Confirms  entry  and  
provides  follow  up  
details.  


Prompt  user  to  
share  link  to  the  
contest.  


Link  to  
dcunited.com  
content.  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
TesEng  your  applicaEon  


Test  with  non-­‐technical  users,  casual  facebook  users    


Some  plugins  render  differently  across  browsers.  


IE  is  stricter  about  cookies  


Test  with  HTTPS  &  HTTP  users  


Create  a  tesEng  app  for  ongoing  improvements.  


ApplicaEons  can  create  test  accounts  


But  test  accounts  can’t  Like  pages/places  


Can  test  publishing  to  wall  


PHP  ApplicaEon  to  manage  test  users  
hJp://blog.rafaeldohms.com.br/2011/02/07/managing-­‐test-­‐users-­‐in-­‐facebook/
 
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
Working  with  Facebook  API  


DocumentaEon  is  poor  and  scaJered  


Search  results  may  be  outdated  or  incomplete.  


May  not  match  actual  behavior,  parEcularly  for  advanced  
widgets.  


May  have  to  hack  the  PHP  SDK  


api-­‐read.facebook.com  causes  curl  to  Emeout.  


Facebook  may  change  anything  at  anyEme.  


Dependent  on  their  systems  working.  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
What  have  we  learned?  


Increased  parEcipaEon  from  fans.  


The  prize  maJers  to  moEvate  users  to  enter.  


Added  new  people  to  our  lists  for  future  contact.  


Standard  behavior  minimizes  effort  to  set  one  up.  


July  18
th
 contest  results:  


644  entries  over  2.5  days  


52%  new  leads  


156  leads  requested  calls  about  a  premium  Ecket  offer  like  
Season  Tickets  or  Group  packages.  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website  
What’s  next?  


Mobile  usability  &  access  


Engagement  moving  to  mobile  devices  


Links  &  integraEon  with  smart  phone  app  tricky.  


Need  to  measure  effecEveness  of  


Sharing  entries  


Referral  traffic  


Conversion  offline.  How?  


BeJer  instrumentaEon  for  analyEcs.  


GA  parameters  for  tracking  referrals  


Track  user  posts.  
Oscar  Merida  
From  Facebook  to  your  Drupal  Website