Downloaded 125 times
![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>](https://image.slidesharecdn.com/seomozseattle2011-mc-110801131244-phpapp02/85/MozCon-Seattle-2011-Social-Design-25-320.jpg)
![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>](https://image.slidesharecdn.com/seomozseattle2011-mc-110801131244-phpapp02/85/MozCon-Seattle-2011-Social-Design-29-320.jpg)
![<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>](https://image.slidesharecdn.com/seomozseattle2011-mc-110801131244-phpapp02/85/MozCon-Seattle-2011-Social-Design-34-320.jpg)
Uploaded byMat Clayton
MozCon Seattle 2011 - Social Design
The document discusses social design and the Facebook platform. It provides tips for using Open Graph tags and actions like Like, Send, and Share to optimize content distribution and engagement. It also covers connecting apps to Facebook for identity, personalization using social context, and driving distribution by making sharing easy. The goal is to identify users, add value at key touchpoints, and enable contribution back to the social graph.
MozCon Seattle 2011 - Social Design
- 1. Social Design @matclayton
- 2. What is Social? whyis social so effective?
- 3.
- 10.
- 11.
- 16.
- 19.
- 20.
- 21. Tag Tips • Opengraph 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
- 23. Creating Edges Like, Send,Share, Requests 2.0
- 24.
- 25. 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>
- 26. Like Tips • UseXFBML 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
- 27. Bonus Tip: Demographictracking
- 28.
- 29. 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>
- 31. Send Tips • Dontexpect good results....... yet, maybe in time • Users still don’t understand it. • CTR’s are low • No fan out distribution effect • :(
- 32.
- 33.
- 34. <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>
- 35. 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
- 36. Edge Rank News FeedOptimization (NFO)
- 38. 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
- 39.
- 40.
- 41.
- 42. Analytics - SocialActions
- 43. Analytics - SocialActions
- 44. Analytics - SocialActions
- 45. Facebook Platform identify, distributionand community
- 46. 1. Authenticate identity+ permissions
- 47. User targetting FB.getLoginStatus(function (response){ if (response.status=='connected') { // Auto log the user in } else if (response.status=='notConnected') { // Signup with Facebook Dialog } });
- 48.
- 50. 2. Personalize add social context
- 54.
- 55.
- 56. iFrame <iframe src="http://www.facebook.com/plugins/activity.php? site=mixcloud.com&width=300&height=300&header=tr ue&colorscheme=light&font&border_color&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>
- 57. 3. Drive Distribution makeit easy to share / contribute back
- 58. Touch points key momentsin the user journey
- 60.
- 61. 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 } });
- 63.
- 65. Please get intouch Weʼre keen to hear your thoughts Email: mat@mixcloud.com Twitter: @matclayton / @mixcloud Code: https://gist.github.com/975939
Editor's Notes
- #2 \n
- #3 \n
- #4 Search is about finding answers\n\n2 types of questions \nFactual\nSubjective\n\nSearch solves factual, but not subjective.\n\nUsers often have subjective questions, like Recommend me a film, this is what social excels at.\n\nWhen a computer cant answer a question, turn to friends.\n
- #5 Eric Fisher, Facebook Social Design Strategist\n\nRelationships can be broken down to 2 axis.\n\nFriends and family in the trust area\n\nBrands and people like the pizza boy live bottom left, least trust.\n\nWe need a way to bring the &#x201C;brand&#x201D; into the top right and this is what social design achieves/enables.\n
- #6 Circle of trust, top right quadrant\n\nFriends and Family vouch for others and they enter the circle of trust\n\n\n
- #7 I&#x2019;ve been staying with a close friend in Seattle the last few days. But during the day she was at work, so I needed to go out and explore, \n\nFriend recommendations out weigh unknown third parties.\n\nThey know and understand you, personalisation goes a long way.\n\n&#x201C;This place is awesome (local knowledge) you should go&#x201D;, &#x201C;skip that, you&#x2019;ll hate it&#x201D;\n\nEvents like this happen Millions of times a day already on Social networks and you need to figure out how to ride the wave.\n
- #8 Social networking sites have 3 key parts\n\n1. Identity, this includes not only your &#x201C;profile&#x201D; but any badges/awards/points the whole eccosystem\n2. Communication\n3. Community \n
- #9 Communication is often misunderstood\n\nMost assume its distribution, and SHOUTING..... its not its a two way street\n
- #10 Consumption is a massive driver of retention... always overlooked, (sharkfin)\n\nBut also strangely you see the following...\n\nDistribution drives consumption, but also consumption drives distribution = Growth + Retention increase\n\n\n
- #11 We have been through this consume/create (review) cycle before, with reviews.\n\nWho are these people?\nThey don&#x2019;t know me?\nDo we share the same interests?\n\nLike is one example of an attempt to solve this issue, by focussing on the top right quadrant or trust, engaging the user\n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 Its not just photos the social graph includes - Events, groups, applications everything in the eccosystem.\n
- #19 \n
- #20 \n
- #21 Lets add a new type of node.... a webpage..... (or domain)\n
- #22 like it, this is what the &#x201C;like&#x201D; button does internally within the graph\n
- #23 Define the &#x201C;object&#x201D;\n\nTitle and image&#x2019;s lock after 10? likes (images and title)\n\nIf you are debating SOCIAL put these tags on your site and start checking out insights straight away, see if there is anyone already sharing your content.\n\nRequired. title, type, image, url.... just for FB ensure you have site and fb:admins as well\n\nembedding flash to or not depends on what you want to optimize for.\n\nTOP TIP, never use # in urls, it buggers up insights totally. \n\nOfficial line is they will all be merged, I&#x2019;m pretty sure it just dumps them entirely, do some tests.\n\nAlso #! urls work as well (google ajax crawling spec) but dont do that its bad for everyone, pjax it up :)\n\n
- #24 Facebook linter, good at spotting tagging issues, things like duplicates can throw a real spanner in the works.\n\nFlush the FB cache with it, for example if you have uploaded the wrong image\n\nCan also be done programatically\n
- #25 There was this trend of publishing/liking actions for a long time this does not work, people don&#x2019;t reshare/like that\n\nArticle, blocked posting to the &#x201C;page&#x201D; so dont use it.\n\nfb:admin fb:app_id\n\nMake sure you have a favicon as well.\n
- #26 \n
- #27 \n
- #28 Like objects not actions\n\nobjects produce content = returning users\n\nEvery new like adds another page to the graph, its better to keep a small set with lots of likes than spreading them out. Having said that we now manage 100,000 pages\n\n\n\n
- #29 Default code examples are synchronous, the block horribly. Use this example to do async + GA tracking of events\n\niFrame version a second class citizen\n\n
- #30 remember those admin tags..... now goto www.facebook.com/insights/ and we can start getting to the real data.\n
- #31 \n
- #32 Using Like buttons to track demographics,\n\nYou can either hide them, or make them public. Hiding will screw the stats.\n
- #33 \n
- #34 Default code examples are synchronous, use this example to do async + GA tracking of events\n
- #35 \n
- #36 \n
- #37 effective for invite mechanics...\n\nWho actually runs these?\n
- #38 \n
- #39 Remember that you can post as a brand as well\n\nComment order is important, (friends show up at the top)\n\n
- #40 Ditch sharer.php, legacy\n\nhttp://www.facebook.com/sharer.php?u=url&t=title\n
- #41 Ditch sharer.php, legacy\n\nhttp://www.facebook.com/sharer.php?u=url&t=title\n
- #42 actions is a historical bug, but you can only have one action, and you shouldn&#x2019;t because it removes the ahre option.\n
- #43 \n
- #44 No action links\n\nFocus on objects and allow the user to define the reason in the messaging.\n\nAwesome touch point for signup\n\nIf you want to do more advanced integrations it is possible. For example you can target specific users but you need to get the uid first, good for invites....\n
- #45 \n
- #46 Screen grab from F8 2010 Session\n
- #47 Time is probably your best bet here, focus on adding more content to recent edges, not old ones.\n\nIf you release new content, drive engagement quickly, don&#x2019;t do it over a long period\n\naggregating edges onto a single object. \n
- #48 \n
- #49 Realtime, so ignore the last day drop off (has stalled a few times) \n\nNote share is way more effective than like.\n\nLike x326 CTR 0.2%\nShare x645 CTR 0.9%\n\nLet me know what you guys are seeing, no one is publishing this data, we openly share and to date we are way above average.\n\n
- #50 Social engaged users are happy users :)\n\n46mins average time on site! This is certainly biased, however we aim to transition users from not engaged to engaged.\n
- #51 Breakdown by type.\n\nGoogle now accounts for 16% of our Social Actions! not bad for month 1, maybe its a fad, but seems to be increasing\n
- #52 Breakdown by type.\n\nGoogle now accounts for 16% of our Social Actions! not bad for month 1, maybe its a fad, but seems to be increasing\n
- #53 \n
- #54 \n
- #55 Its a known active area of work.\n
- #56 Maybe a Geo element as well &#x201C;Cambourne runners&#x201D; is local to me, or could be minimal distance across graph.\n\nThe other key thing to remember with search at FB is that this is in very active development, and results change frequently.\n\nI can&#x2019;t login to our analytics clusters from here, but last time I checked search aren&#x2019;t important at all.... fb_source=search is seen in referrer\n\n\n
- #57 \n
- #58 Use personal information to kick start the social experience.\n\nUse things like Facepile to increase signup\n
- #59 Auto login to ensure minimal effort on the users part. This will take a while to fine turn, and will confuse users for a while, until you perfect the UI. \n\n\n
- #60 Do not ask for too many! 3% drop per permission, bullshit. \n\nMy tip is ask for email, so you can manage the user. (proxy emails don&#x2019;t happen that often, although its a possibility)\n\nWe just ask for email, offline_access and stream_publish, and are considering dropping offline_access shortly.\n\nManaging deleted access_token is a pain (realtime helps a lot), changing a password also deletes the access_token. Do not depend on them, learn to adapt when they change\n\n\n
- #61 OAuth 2.0 + FB JS Kit only\n\nUse the Facepile Social Plugin\n\nOfficial Facebook line is that each permission causes a CTR drop of about 3% (massive Standard deviation though)\nHowever I dont agree, asking for email caused a 5% increase in CTR...\n
- #62 The on-ramp is crucial, get this right and everything follows.\n\nConsider your core pages, what are they. For us. Content/Profiles and soon player. Can you Socialize these? \n\nWhat are your landing pages, can you Socialize even before signup. Aim for the initial touch point\n\nEnsure Social Context through out the entire experience.\n
- #63 \n
- #64 Of 6,981 people listening, it isn&#x2019;t a coincidence that Rob is showing up.....\n\nWe go to great lengths to track relationships, either those you follow directly, or friends on other sites...\n\nWorse case we can post to FB with a tainted link and either know your id or who posted it, and from that do indirect targeting, its still better than none\n\nDrive retention/engagement through adding social context, this increases the CTR of the play, and also the share rate and viral factor of the pages significantly.\n\nCreate all content as close as possible in social context to the user, aim for the top right quadrant.\n\nFACES ARE KEY, not NAMES.\n
- #65 Nikhil mentioned on the left (out of 1000 friends)\n\nNico was at out with Rawson (other hidden friends I dont know)\n
- #66 Social plugins can even do this when you aren&#x2019;t authenticated... first page, are you likely to sign up now? What do you think we did to the bounce rate, conversions? \n
- #67 Social plugins can even do this when you aren&#x2019;t authenticated... first page, are you likely to sign up now? What do you think we did to the bounce rate, conversions? \n
- #68 \n
- #69 Grow in narrow niches first, keeps concentration higher and increases the &#x201C;community&#x201D; density\n\nMake it EASY to share and give back (lots of AJAX) to the community.\n
- #70 Touch points\n\nconsider your key actions both on and off your site. What actions do your users do which suggests increased engagement.\n\nFor both your own actions, signup after share/like? you can track and count these. If someone likes your content 10 times they &#x201C;might&#x201D; be a good candidate for signing up.\n\nAlso if they just listening or read an article will they share? You can force these things but if you pick your timing smartly you can win big.\n
- #71 Touch points include\n\nShare, Tweet, like, +1, Follow, Comment, Play, embed\n
- #72 \n
- #73 Auto login to ensure minimal effort on the users part. This will take a while to fine turn, and will confuse users for a while, until you perfect the UI. \n\n\n
- #74 Social context - A friend has just recommend the item (come from newsfeed), they land on our site, already signed into FB (we check in JS), this is one of our key touch points.\n\nNote the use of FacePile, this associates friends alongside the action of &#x201C;Connecting&#x201D;\n\nBiggest issue with this is that users don&#x2019;t fully understand &#x201C;Connect&#x201D; with Facebook and that they are creating an account.\n\nGuess what this did to the bounce rate?\n\n\n
- #75 55% reduction in bounce for FB users (38%->17% bounce rate, for FB traffic)\n\n15min time on site\n\n80% increase in signup rate\n\nBiggest shift in site usage to date.\n
- #76 \n
- #77 Contact details\n