TMPA-2015: Expanding the Meta-Generation of Correctness Conditions by Means of Semantic Markup
How clean "semantic" markup can power simple Facebook Connect integrations
-
Upload
the-guardian-open-platform -
Category
Technology
-
view
2.500 -
download
3
description
Transcript of How clean "semantic" markup can power simple Facebook Connect integrations
![Page 1: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/1.jpg)
How clean semantic markup in your HTML can power Facebook Connect
Chris Thorpe
FACEBOOK DEVELOPER GARAGE FOWA EDITION
So this looks like a bit of an odd title
![Page 2: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/2.jpg)
Semantic Web
FACEBOOK DEVELOPER GARAGE FOWA EDITION
Do I mean this? Well no not yet, although RDF and other forms of semantic markup are gaining ground but some of the principles which underly RDF’s precursor - semantically marked up HTML or XHTML
![Page 3: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/3.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
Stuff more like this, either marked up in real microformats like hAtom or the wonderful hRecipe. If more publishers can build these sorts of formats into their products then we’ll be able to make really simple little bits of code which can extract, scrape and most importantly extend the information and functionality of pages and sites
![Page 4: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/4.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<ul id="clippings"> <li class="a-clipping"> <div class="clipping-contents" id="clipping-265621"> <h2><a href="http://www.guardian.co.uk/media/2009/aug/26/big-brother-dropped-channel-4">Big Brother axed by Channel 4</a></h2> <div class="clipping-trail-text" id="clipping-trail-text-265621">Broadcaster confirms that reality show will be dropped after 11th series in 2010. By Mark Sweney and Leigh Holmwood</div> <p class="clipped-on" id="clipped-on-265621">Clipped on 26 August 2009 <a class="show-edit-clipping" href="http://www.guardian.co.uk/tools/clipping/265621/edit">Edit</a> </p> </div> </li> <li class="a-clipping"> <div class="clipping-contents" id="clipping-265614"> <h2><a href="http://www.guardian.co.uk/world/2009/aug/26/us-senator-ted-kennedy-dies" >Senator Ted Kennedy dies aged 77</a></h2> <div id="clipping-trail-text-265614">One of the most influential and longest serving senators in US history had battled brain cancer since May 2008</div> <p class="clipped-on" id="clipped-on-265614">Clipped on 26 August 2009 <a class="show-edit-clipping" href="http://www.guardian.co.uk/tools/clipping/265614/edit" name="&lid={yourClippings}{Edit}&lpos={yourClippings}{5}">Edit</a> </p> </div> </li></ul>
But we can start today with HTML with some simple semantic markup telling us what each bit does, like this rather simplified bit from The Guardian
![Page 5: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/5.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
Which outputs something which looks a bit like this
![Page 6: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/6.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<ul> <li> <div> <h2><a href="">Title</a></h2> <div>Trail text</div> <p>Date <a href="">Edit</a> </p> </div> </li></ul>
And if we simplify it further we get this... not too interesting or useful... and certainly not semantic, but it shows the structure
![Page 7: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/7.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
title
trail text
URL
actions
What we get from this sort of structure is this
![Page 8: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/8.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<ul id="clippings"> <li class="a-clipping"> <div class="clipping-contents" id="clipping-XXXXXX"> <h2><a href="">Title</a></h2> <div class="clipping-trail-text" id="clipping-trail-text-XXXXXX">Trail text</div> <p class="clipped-on" id="clipped-on-XXXXXX">Date <a class="show-edit-clipping" href="">Edit</a> </p> </div> </li></ul>
We can make it more semantic with a few id’s and classes which relate to the function of the text contained within some of the nodes
![Page 9: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/9.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
title
trail text
URL
And when you look at it, this
![Page 10: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/10.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
has a lot in common with the sort of things you’d want to go into the stream
![Page 11: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/11.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<ul id="clippings"> <li class="a-clipping"> <div class="clipping-contents" id="clipping-XXXXXX"> <h2><a href="">Title</a></h2> <div class="clipping-trail-text" id="clipping-trail-text-XXXXXX">Trail text</div> <p class="clipped-on" id="clipped-on-XXXXXX">Date <a class="show-edit-clipping" href="">Edit</a> </p> </div> </li></ul>
So how do we get from this on The Guardian
![Page 12: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/12.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
to this on Facebook
![Page 13: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/13.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
which brings us to this...
The Guardian is interested in all sorts of things to do with identity and distributed/aggregated identity and one really great way to learn is to experiment and prototype
![Page 14: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/14.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<ul id="clippings"> <li class="a-clipping"> <div class="clipping-contents" id="clipping-XXXXXX"> <h2><a href="">Title</a></h2> <div class="clipping-trail-text" id="clipping-trail-text-XXXXXX">Trail text</div> <p class="clipped-on" id="clipped-on-XXXXXX">Date <a class="show-edit-clipping" href="">Edit</a> </p> </div> </li></ul>
So if we want to go from this
![Page 15: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/15.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
to this sort of thing, how do we do it simply and in a prototype way, in say about an hour to test out how it works so we can make a case for it to go into production and help the engineers
![Page 16: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/16.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
this is a good start, JQuery is a really lovely JavaScript framework and since at it’s most basic level Facebook Connect is a client side development environment a good JavaScript libary is all we need to build a prototype
![Page 17: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/17.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<ul id="clippings"> <li class="a-clipping"> <div class="clipping-contents" id="clipping-XXXXXX"> <h2><a href="">Title</a></h2> <div class="clipping-trail-text" id="clipping-trail-text-XXXXXX">Trail text</div> <p class="clipped-on" id="clipped-on-XXXXXX">Date <a class="show-edit-clipping" href="">Edit</a> </p> </div> </li></ul>
So how do we get the good bits from this...
![Page 18: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/18.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
var title = $('a', $('#clipping-'+ id)).html(); var trailtext = $('#clipping-trail-text-'+ id).html(); var href = $('a', $('#clipping-'+ id)).attr('href');
<ul id="clippings"> <li class="a-clipping"> <div class="clipping-contents" id="clipping-XXXXXX"> <h2><a href="">Title</a></h2> <div class="clipping-trail-text" id="clipping-trail-text-XXXXXX">Trail text</div> <p class="clipped-on" id="clipped-on-XXXXXX">Date <a class="show-edit-clipping" href="">Edit</a> </p> </div> </li></ul>
it’s pretty easy, it’s actually about 3 lines of JQuery get us the relevant bits of content if the content is marked up well, so how do we put it together with Connect
![Page 19: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/19.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
actions
but how would we add some actions to post to Facebook
![Page 20: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/20.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
actions
1
2
well actually part of the clue is that within the UL there is an iterator waiting to be unlocked
![Page 21: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/21.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<ul id="clippings"> <li class="a-clipping"> <div class="clipping-contents" id="clipping-XXXXXX"> <h2><a href="">Title</a></h2> <div class="clipping-trail-text" id="clipping-trail-text-XXXXXX">Trail text</div> <p class="clipped-on" id="clipped-on-XXXXXX">Date <a class="show-edit-clipping" href="">Edit</a> </p> </div> </li> <li class="a-clipping"> <div class="clipping-contents" id="clipping-YYYYYY"> <h2><a href="">Title</a></h2> <div class="clipping-trail-text" id="clipping-trail-text-YYYYYY">Trail text</div> <p class="clipped-on" id="clipped-on-YYYYYY">Date <a class="show-edit-clipping" href="">Edit</a> </p> </div> </li></ul>
1
2
We can build the iterator out of the HTML and JQuery, within the UL which has the unique id of clippings there are DIVs which have a class of clipping-contents
and because we’ve got the HTML maked up with the clipping id we can do something interesting with this
![Page 22: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/22.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<ul id="clippings"> <li class="a-clipping"> <div class="clipping-contents" id="clipping-265621"> </div> </li> <li class="a-clipping"> <div class="clipping-contents" id="clipping-265614"> </div> </li></ul>
$("#clippings .clipping-contents").each( function() { var currentid = $(this).attr('id').replace('clipping-', ''); $('#clipped-on-'+ currentid).append(" | <a href=\"javascript:onPost("+ currentid +")\">share on Facebook</a>");});
like this, which basically says for each time you find a something with a class of clipping-contents then get the content id of it through a bit of JavaScript string manipulation
![Page 23: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/23.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<ul id="clippings"> <li class="a-clipping"> <div class="clipping-contents" id="clipping-265621"> </div> </li> <li class="a-clipping"> <div class="clipping-contents" id="clipping-265614"> </div> </li></ul>
$("#clippings .clipping-contents").each( function() { var currentid = $(this).attr('id').replace('clipping-', ''); $('#clipped-on-'+ currentid).append(" | <a href=\"javascript:onPost("+ currentid +")\">share on Facebook</a>");});
then in the node which has an id of clipped-on and that content id append a piece of HTML which gives the link to share on Facebook
![Page 24: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/24.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
new actions
then in the node which has an id of clipped-on and that content id append a piece of HTML which gives the link to share on Facebook
![Page 25: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/25.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<script type="text/javascript"> function onConnected() { $('#connectbutton').remove(); $('#connectdetails').show(); $("#clippings .clipping-contents").each( function() { var currentid = $(this).attr('id').replace('clipping-', ''); $('#clipped-on-'+ currentid).append(" | <a href=\"javascript:onPost("+ currentid +")\">share on Facebook</a>");
}); }
FB.init("MY_API_KEY_FOR_MY_APP", "/xd_receiver.htm", {"ifUserConnected":onConnected});
</script>
we can now add in some of the simple Connect stuff
![Page 26: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/26.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<script type="text/javascript"> function onConnected() { $('#connectbutton').remove(); $('#connectdetails').show(); $("#clippings .clipping-contents").each( function() { var currentid = $(this).attr('id').replace('clipping-', ''); $('#clipped-on-'+ currentid).append(" | <a href=\"javascript:onPost("+ currentid +")\">share on Facebook</a>");
}); }
FB.init("MY_API_KEY_FOR_MY_APP", "/xd_receiver.htm", {"ifUserConnected":onConnected});
</script>
we can now add in some of the simple Connect stuff
![Page 27: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/27.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<script type="text/javascript"> function onConnected() { $('#connectbutton').remove(); $('#connectdetails').show(); $("#clippings .clipping-contents").each( function() { var currentid = $(this).attr('id').replace('clipping-', ''); $('#clipped-on-'+ currentid).append(" | <a href=\"javascript:onPost("+ currentid +")\">share on Facebook</a>");
}); }
FB.init("MY_API_KEY_FOR_MY_APP", "/xd_receiver.htm", {"ifUserConnected":onConnected});
</script>
we can now add in some of the simple Connect stuff
![Page 28: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/28.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
<div id="connectbutton"> <h2>Share your clippings with your friends on Facebook</h2> <fb:login-button size="large" background="white" length="long"></fb:login-button></div>
<div id="connectdetails"> <fb:profile-pic uid="loggedinuser" facebook-logo="true" size="thumb" linked="true"></fb:profile-pic> <fb:name uid="loggedinuser" useyou="false"></fb:name></div>
<script type="text/javascript"> function onConnected() { $('#connectbutton').remove(); $('#connectdetails').show(); $("#clippings .clipping-contents").each( function() { var currentid = $(this).attr('id').replace('clipping-', ''); $('#clipped-on-'+ currentid).append(" | <a href=\"javascript:onPost("+ currentid +")\">share on Facebook</a>");
}); }
$('#connectdetails').hide();FB.init("MY_API_KEY_FOR_MY_APP", "/xd_receiver.htm", {"ifUserConnected":onConnected});
</script>
and can add in a pair of divs to contain the Connect login button and the Connect details, we’ll hide the Connect details div by default on page load and if the user connects or is connected we’ll hide the Connect button div and show the Connect details one
![Page 29: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/29.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
function onPost(id) { var title = $('a', $('#clipping-'+ id)).html(); var trailtext = $('#clipping-trail-text-'+ id).html(); var href = $('a', $('#clipping-'+ id)).attr('href'); var attachment = { 'name': title, 'href': href, 'caption': '{*actor*} just clipped a link on The Guardian and shared it.', 'description': trailtext, }; FB.Connect.streamPublish('', attachment, null, null, 'Tell people about your clipping'); }
and then we’ll roll up the pieces of JavaScript where we were assembling the content to go into the stream into a handler for when the user clicks the link and pass them as an attachment to the FB.Connect.streamPublish method
![Page 30: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/30.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
function onPost(id) { var title = $('a', $('#clipping-'+ id)).html(); var trailtext = $('#clipping-trail-text-'+ id).html(); var href = $('a', $('#clipping-'+ id)).attr('href'); var attachment = { 'name': title, 'href': href, 'caption': '{*actor*} just clipped a link on The Guardian and shared it.', 'description': trailtext, }; FB.Connect.streamPublish('', attachment, null, null, 'Tell people about your clipping'); }
and then we’ll roll up the pieces of JavaScript where we were assembling the content to go into the stream into a handler for when the user clicks the link and pass them as an attachment to the FB.Connect.streamPublish method
![Page 31: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/31.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
and here’s how it works...
![Page 32: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/32.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
time to connect
![Page 33: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/33.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
click Share on Facebook
![Page 34: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/34.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
Up pops the feed box
![Page 35: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/35.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
Up pops the feed box
![Page 36: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/36.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
What next?
Well we have an API for ourcontent, so it could be thatyou could make socially connected content widgets for your site.
![Page 37: How clean "semantic" markup can power simple Facebook Connect integrations](https://reader033.fdocuments.us/reader033/viewer/2022060108/554d881bb4c905390c8b52ec/html5/thumbnails/37.jpg)
FACEBOOK DEVELOPER GARAGE FOWA EDITION
Thank you
http://www.guardian.co.uk/open-platformTwitter: @openplatform