This document discusses social design and optimization for Facebook. It provides tips for using common Facebook features like the Like button, sending content, sharing content, and requests. It also discusses optimizing content for the News Feed by encouraging engagement. Facebook Connect is discussed as a way to authenticate users, personalize their experience, and drive distribution by making sharing easy.

1. Social Design
@matclayton

2. Social Design
why is social so effective?

3. Recommend me a film

10. Stars and Reviews

11. Whats the social
graph?

19. Open Graph

22. Open Graph Tags

23. http://developers.facebook.com/tools/lint/

24. 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
• Open graph pages can post to users

26. Creating Edges
Like, Send, Share, Requests 2.0
Optimization

27. www.facebook.com/insights

28. Like

29. 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(['page', 'like', response]);
});
FB.Event.subscribe('edge.remove', function(response) {
_gaq.push(['page', '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>

31. www.facebook.com/insights

32. 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

33. Send

34. 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(['object', '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>

36. 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
• :(

37. Requests 2.0

38. Code
FB.ui({
method: 'apprequests',
message: 'You should visit Mixcloud.'
});

39. Comments

40. Share

42. <script>
FB.ui({ Code
method: 'feed',
message: 'getting educated about Facebook Connect',
name: 'Connect',
caption: 'The Facebook Connect JavaScript SDK',
description: ‘Description goes here’,
link: 'http://fbrell.com/',
picture: 'http://fbrell.com/f8.jpg',
actions: [
{ name: 'fbrell', link: 'http://fbrell.com/' }
]
},function(response) {
if (response && response.post_id) {
_gaq.push(['share',
'success']);
} else {
_gaq.push(['share',
'fail']);
}
});
</script>

43. 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

45. Edge Rank
News Feed Optimization (NFO)

47. 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

48. Social Search

49. Its a bit of a mystery
• Graph traversal algorithm, minimum distance
• based on likes / friend graph
• Dynamically calculated per user per query
• Dont keyword stuff, brand title seems to work best, space
seperated
• E.g. “Diet Coke” not “DietCoke”
• Page titles are locked after 100? likes so choose carefully
• Exact keyword matching only

51. Facebook Connect
identify, distribution and community

52. 1. Authenticate
identity + permissions

53. Advanced FB targetting
FB.getLoginStatus(function (response) {
if (response.status=='connected') {
// Auto log the user in
} else if (response.status=='notConnected') {
// Signup with Facebook Dialog
}
});

55. Customize landing page

57. 2. Personalize
add social context

61. Artfinder.com

62. 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>

63. 3. Drive Distribution
make it easy to share / contribute back

65. Please get in touch
Weʼre keen to hear your thoughts
Email: mat@mixcloud.com
Twitter: @matclayton / @mixcloud
Code: https://gist.github.com/975939