what it means and how to do it
play

what it means and how to do it David Hunt http://dnotes.net October - PowerPoint PPT Presentation

what it means and how to do it David Hunt http://dnotes.net October 2011 Disclaimer: This is primarily about integrating a Drupal website with Facebook. It does not cover all aspects of Facebook application development. and also,


  1. what it means and how to do it David Hunt http://dnotes.net October · 2011

  2. Disclaimer: This is primarily about integrating a Drupal website with Facebook. It does not cover all aspects of Facebook application development.

  3. “…and also, the site should be integrated with Facebook.” all the different ways to integrate with Facebook

  4. integrating with facebook to the public to Facebook users on a public url on a Facebook url Facebook content: your content: in an iFrame in an iFrame through Facebook’s api only. http://www.insidefacebook.com/2011/04/22/canvas-connect-websites-best/

  5. Notifications  The way that people get friends News Feeds information on Facebook Ticker (the full presentation shows pictures; if you are not familiar with these, the rest won’t make sense.) Timeline Timeline Views user This is not a complete list. Facebook has other social channels beyond these, such as Likes recommendations, but I find these to be the Interests most useful for a website. On a FB Page fb While I have found no comprehensive list of In a FB Group all social channels available, many are on page mentioned on the developer help pages: In an iFrame Natively developer.facebook.com * that I think are relevant to the most website integrations

  6.  Sharing  Social Plugins  Opengraph protocol  Liking  Facebook Pages  Facebook Apps  Opengraph : Custom Connections  Apps : Login through Facebook  Canvas Pages / Tabbed Pages * that I think are relevant to the most website integrations

  7. sharing Notifications friends News Feeds Ticker Timeline Timeline Views user Likes Interests On a FB Page fb In a FB Group on page In an iFrame Natively http://weorme.bandcamp.com/track/know

  8. social plugins  Facebook iFrames on YOUR website http://david-hunt-music.com/store/cds/earth-and-eagle.html

  9. social plugins  Simple Plugins: Notifications friends opengraph  like button optional News Feeds  send button Ticker  comments  activity feed Timeline  recommendations Timeline Views user  FB Page Plugins Likes  like box Interests opengraph  facepile required On a FB Page  App Plugins fb  login / registration In a FB Group  facepile on page In an iFrame  live stream Natively  add to timeline

  10. opengraph protocol Open Graph objects are annotated web pages with a set of tags which provide the property value. The properties on an object include the title, description, and any custom properties. Objects are connected to users via actions, and when this happens, an object will appear in Timeline, News Feed and Ticker. https://developers.facebook.com/docs/beta/opengraph/internationalization/

  11. opengraph protocol It’s about the connections between things. Subject Action Object Subject Action Object David Hunt like Sleeping City by We/Or/Me facebook.com/davidhuntmusic weorme.bandcamp.com/album/sleeping-city David Hunt “friend” Joseph Schmoe facebook.com/davidhuntmusic facebook.com/joeschmoe Donald Duck like Daisy Duck facebook.com/DonaldDuck facebook.com/DisneyDaisyDuck … … …

  12. opengraph protocol It’s a catalog of all existing things — and some that don’t exist— and the relationships between them.  Everything in the opengraph has an ID number  David Hunt: 510997137 (or davidhuntmusic)  Donald Duck: 134229524276 (or DonaldDuck)  Peace on Earth: 146985261982733 (etc.)  visit http://graph.facebook.com/# to see all about an object  Opengraph objects include:  Album, Application, Event, Group, Link, Message, Note, Page, Photo, Status message, Subscription, User… (and more)  All objects have connections  Add ?metadata=1 to see connections  You can read connections  http://graph.facebook.com/DonaldDuck/photos  You can write connections  …if you have the right OAuth 2.0 access token https://developers.facebook.com/docs/reference/api/

  13. opengraph protocol Use the proper meta tags . <head> ... <meta property="og:type" content="album" /> <meta property="og:url" content="http://david-hunt-music.com/store/cds/ earth-and-eagle.html" /> <meta property="og:title" content="The Earth and the Eagle" /> <meta property="og:image" content="http://david-hunt-music.com/imagecache/ opengraph_thumbnail/davidhunt.png" /> <meta property="og:site_name" content="David Hunt" /> <meta property="og:description" content="This was my first CD, the best og:type songs from my late teens and early twenties. I think this album is og:url mostly about figuring out what it means to be a human being." /> <meta property="fb:admins" content="510997137" /> og:title <meta property="fb:app_id" content="176208815755315" /> ... og:image </head> http://david-hunt-music.com/store/cds/earth-and-eagle.html og:site_name og:description Important URL: fb:admins http://developers.facebook.com/tools/debug fb:app_id

  14. liking … without Opengraph: Notifications friends News Feeds Ticker … with basic Opengraph: Timeline <meta property=“og: title ” content=“How to connect a page” /> Timeline Views user <meta property=“og: type ” content=“article” /> <meta property=“og: url ” content=“http://path.to/url” /> Likes <meta property=“og: image ” content=“http://path.to/img.jpg” /> Interests … with app_id: On a FB Page fb <meta property=“fb: app _ id ” content=“How to connect a page” /> <meta property=“fb: admins ” content=“article” /> In a FB Group on page … with certain “og:type”s: In an iFrame for a list, see https://developers.facebook.com/docs/opengraph/#types Natively

  15. facebook pages  Opengraph objects  Created on Facebook  or externally with Opengraph meta tags.

  16. facebook pages  Pages are public. Notifications friends  Anyone can like a page News Feeds  But you can block them Ticker  Page administrators can:  Invite friends Timeline  Post status updates Timeline Views user  Use a like box (on your website) Likes  Promote with ads  View statistics Interests  …and more. On a FB Page  How are page administrators fb declared in Opengraph meta tags? In a FB Group  fb:admins (Opengraph ids) on page In an iFrame  fb:app_id (Opengraph id) Natively https://www.facebook.com/help?page=904

  17. facebook apps a Facebook “canvas” that displays your content in an API key. an iFrame in the context of Facebook.

  18. facebook apps  Manage their own pages, streams, etc.  these can be used to communicate with subscribers through their news feeds, tickers, etc.  Define custom Opengraph objects & connections  Manage user accounts on your website  your user accounts can be linked to their facebook accounts  Manage fb users’ data (if they authorize you)  Obtain data about users and friends, such as events, groups, photos, videos, likes, location, birthday, hometown, checkins, etc.  Read their mail  Create and manage events as that user  Read their notifications and mark them as read  Publish actions to their stream  Communicate with them via SMS  Masquerade as and manage their pages https://developers.facebook.com/docs/reference/api/permissions

  19. apps : custom connections Notifications  Food review site: friends News Feeds  David : likes : sage potatoes Ticker  Social recipe sharing site: Timeline  David : cooked : sage potatoes Timeline Views user Likes Interests On a FB Page fb authorize app “action” a page the app posts In a FB Group on page In an iFrame Natively https://developers.facebook.com/docs/beta/opengraph https://developers.facebook.com/docs/beta/opengraph/tutorial

  20. apps : facebook login Notifications  Not always a login to Drupal! friends News Feeds  Login through Facebook Ticker authorizes your app.  It does not necessarily login to Timeline Drupal, as some of Facebook’s Timeline Views user docmentation suggests. Likes Interests  May login to Drupal, and On a FB Page  May create a Drupal user fb In a FB Group  if you set it up. on page In an iFrame Natively

  21. apps : canvas and tab pages  “App on Facebook” will let you Notifications friends build a dynamic web page and News Feeds then display it on in an iFrame as Ticker a Facebook page. Timeline  “Page Tab” will let you build a Timeline Views user dynamic web page and then Likes display it (in an iFrame) as a tab that many people can put on their Interests Facebook pages. On a FB Page fb  Your dynamic web page can be In a FB Group written in any language that on page In an iFrame accepts post requests, like PHP. Natively search YouTube for “create custom tabs facebook iframes ”

  22. review : what does what Notifications friends News Feeds Drupal Ticker Timeline Support Timeline Views user Likes Level Interests On a FB Page fb In a FB Group on page In an iFrame Natively

  23. how to do it  Use one of the many Drupal modules  addtoany  addthis  sharethis  etc.  etc.  Implement your own share button  https://developers.facebook.com/docs/share/  NOTE:  share is deprecated.  …but it still works.

Recommend


More recommend