Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MozCon Seattle 2011 - Social Design

7,513 views

Published on

Published in: Technology, Business
  • You can ask here for a help. They helped me a lot an i`m highly satisfied with quality of work done. I can promise you 100% un-plagiarized text and good experts there. Use with pleasure! ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If he's shutting you out, here's what's missing... ☀☀☀ https://dwz1.cc/bz4fCHVR
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

MozCon Seattle 2011 - Social Design

  1. 1. Social Design @matclayton
  2. 2. What is Social?why is social so effective?
  3. 3. Recommend me a film
  4. 4. Stars and Reviews
  5. 5. The Social Graph
  6. 6. Open Graph
  7. 7. Open Graph Tags
  8. 8. http://developers.facebook.com/tools/lint/
  9. 9. Tag Tips• Open graph tags on objects not actions.• “Secret” admin panel• DO NOT USE the “article” type• make sure to add fb:admins for insights and admin panel• Open graph pages can post to users
  10. 10. Creating EdgesLike, Send, Share, Requests 2.0
  11. 11. Like
  12. 12. Code<fb:like href="..." ref="my_ref"></fb:like> <div id="fb-root"></div> <script> (function() { window.fbAsyncInit = function() { FB.Event.subscribe(edge.create, function(response) { _gaq.push([_trackSocial, facebook, like, response]); }); FB.Event.subscribe(edge.remove, function(response) { _gaq.push([_trackSocial, facebook, unlike, response]); }); }; var e = document.createElement(script); e.async = true; e.src = document.location.protocol + //connect.facebook.net/en_US/all.js#xfbml=1; document.getElementById(fb-root).appendChild(e); }()); </script>
  13. 13. Like Tips• Use XFBML not iFrames • Higher weighting • Commenting/cleaner ui• Don’t use the demo code, it blocks• Point the url to the creation object not the current page • Aggregates likes to onto single object • Create a good reason to post new updates to user• Track them! In Insights + Google Analytics• Touch point for FB signup
  14. 14. Bonus Tip: Demographic tracking
  15. 15. Send
  16. 16. Code<fb:like href="..." send=”true” ref="my_ref"></fb:like> <div id="fb-root"></div> <script> (function() { window.fbAsyncInit = function() { FB.Event.subscribe(message.send, function(response) { _gaq.push([_trackSocial, facebook, send, response]); }); }; var e = document.createElement(script); e.async = true; e.src = document.location.protocol + //connect.facebook.net/en_US/all.js#xfbml=1; document.getElementById(fb-root).appendChild(e); }()); </script>
  17. 17. Send Tips• Dont expect good results....... yet, maybe in time• Users still don’t understand it.• CTR’s are low• No fan out distribution effect• :(
  18. 18. Share
  19. 19. FB.ui() - Feed
  20. 20. <script> FB.ui({ method: feed, Code message: Come checkout Laid back radio, name: Laid Back, caption: on Mixcloud, description: ‘Laid back is an internet medium...’, link: http://www.mixcloud.com/laidbackradio/’, picture: http://mixcloud.com/lb.jpg, actions: [ { name: mixcloud, link: http://www.mixcloud.com/ } ] },function(response) { if (response && response.post_id) { _gaq.push([_trackSocial, facebook,share, response]); } });</script>
  21. 21. Feed Dialog Tips• Stop using sharer.php• Fb.ui works for logged out users as well• Dont include action link(s)• Share objects not actions • users more likely to add message• Touch point for FB Connect signup• Can directly post to another users wall
  22. 22. Edge RankNews Feed Optimization (NFO)
  23. 23. News Feed Optimization• Create engaging content, encourage likes/ shares/comments• Increase affinity between users (Friend Dialog)• Create > Share > Comment > Like• Reduce time period of activity
  24. 24. Social Analytics
  25. 25. www.facebook.com/insights
  26. 26. Engagement
  27. 27. Analytics - Social Actions
  28. 28. Analytics - Social Actions
  29. 29. Analytics - Social Actions
  30. 30. Facebook Platformidentify, distribution and community
  31. 31. 1. Authenticate identity + permissions
  32. 32. User targettingFB.getLoginStatus(function (response) { if (response.status==connected) { // Auto log the user in } else if (response.status==notConnected) { // Signup with Facebook Dialog }});
  33. 33. Permissions
  34. 34. 2. Personalize add social context
  35. 35. Artfinder.com
  36. 36. Artfinder.com
  37. 37. iFrame <iframe src="http://www.facebook.com/plugins/activity.php? site=mixcloud.com&amp;width=300&amp;height=300&amp;header=tr ue&amp;colorscheme=light&amp;font&amp;border_color&amp;recom mendations=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:300px;" allowTransparency="true"></iframe>XFBML <fb:activity site="mixcloud.com" width="300" height="300"></fb:activity>
  38. 38. 3. Drive Distributionmake it easy to share / contribute back
  39. 39. Touch pointskey moments in the user journey
  40. 40. Offsite touch points
  41. 41. Advanced FB targettingFB.getLoginStatus(function (response) { if (response.status==connected) { // Auto log the user in } else if (response.status==notConnected) { // Signup with Facebook Dialog }});
  42. 42. Customize landing page
  43. 43. Please get in touchWeʼre keen to hear your thoughtsEmail: mat@mixcloud.comTwitter: @matclayton / @mixcloudCode: https://gist.github.com/975939

×