<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
    xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
    >

<channel>
    <title>Webmonkey &#187; Open Graph</title>
    <atom:link href="http://www.webmonkey.com/tag/open-graph/feed/" rel="self" type="application/rss+xml" />
    <link>http://www.webmonkey.com</link>
    <description>The Web Developer&#039;s Resource</description>
    <lastBuildDate>Fri, 05 Apr 2013 20:20:46 +0000</lastBuildDate>
    <language>en-US</language>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <generator>http://wordpress.org/?v=3.4.2</generator>
    
    <item>
        <title>Adding Facebook &#8216;Like&#8217; Buttons to Your Site Is Damn Easy</title>
        <link>http://www.webmonkey.com/2010/04/adding-facebook-like-buttons-to-your-site-is-damn-easy/</link>
        <comments>http://www.webmonkey.com/2010/04/adding-facebook-like-buttons-to-your-site-is-damn-easy/#comments</comments>
        <pubDate>Wed, 21 Apr 2010 21:27:49 +0000</pubDate>

                <dc:creator>Michael Calore</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=47224</guid>
        		<category><![CDATA[APIs]]></category>
		<category><![CDATA[Events]]></category>
		<category><![CDATA[Social]]></category>
		<category><![CDATA[F8]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[Open Graph]]></category>
            <enclosure url="http://www.webmonkey.com/wp-content/uploads/2010/04/picture-10.png" type="image/png" length="48000" />
                    <description><![CDATA[<div class="rss_thumbnail"><img src="http://www.webmonkey.com/wp-content/uploads/2010/04/picture-10.png" alt="Adding Facebook &#8216;Like&#8217; Buttons to Your Site Is Damn Easy" /></div>I want to offer a quick look inside the technology behind Facebook&#8217;s Open Graph initiative to show how easy it is to mark up your website and let Facebook users interact with it. This is only a part of the broad Open Graph strategy the company announced at its 2010 F8 developer conference. (Read our [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled --><a href="http://www.webmonkey.com/wp-content/uploads/2010/04/picture-10.png"><img src="http://www.webmonkey.com/wp-content/uploads/2010/04/picture-10.png" alt="Like this? Yes, &quot;Like&quot; this." title="picture-10" width="218" height="157" /></a>
<p>I want to offer a quick look inside the technology behind Facebook&#8217;s Open Graph initiative to show how easy it is to mark up your website and let Facebook users interact with it.</p>
<p>This is only a part of the broad Open Graph strategy the company announced at its 2010 F8 developer conference. (<a href="http://www.webmonkey.com/2010/04/facebook-shows-off-new-tools-to-socialize-the-entire-web/">Read our full coverage of the keynote</a>).</p>
<p>Basically, Facebook is offering up a set of widgets &#8212; it calls them Social Plug-ins &#8212; that you can drop into any web page to make that page more &#8220;Facebooky.&#8221; There&#8217;s a Like button, a Recommendations widget that shows what other pages people&#8217;s friends are reading, an Activity Stream widget that shows a simplified version of the visitor&#8217;s personal Facebook news feed, and a Facebook Bar, a toolbar site owners can float at the bottom of the screen that serves all of these things at once.</p>
<p>Using the Open Graph widgets, you can incorporate some of Facebook&#8217;s key social interaction features into any page on the web.</p>
<p>The most important Social Plug-in, and the one we&#8217;ll no doubt see the most use of, is <a href="http://developers.facebook.com/docs/reference/plugins/like">the Like button</a>. Put it on your page, and if a Facebook user visits your site and clicks on it, a link to your page gets added to their activity stream. Suddenly, all of their friends can see that link, click on it and be led directly to your page. When that second person arrives, the Like button is personalized for them &#8212; it shows which of <em>their</em> friends have already clicked it, and when they click on it, a link to your page gets added to <em>their</em> stream.</p>
<p><span id="more-47224"></span></p>
<p>There are actually two versions of the Like button, one that uses an i-frame and one that uses JavaScript.</p>
<h3>The i-frame version</h3>
<p>For the simple i-frame version, it&#8217;s one line of code:</p>
<pre class="brush: js">
&lt;iframe src="Some Facebook URL" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>
</pre>
<p>You can generate your own bit of i-frame code for any URL of your choosing (and tweak the parameters) using the tool at the bottom of <a href="http://developers.facebook.com/docs/reference/plugins/like">this page on Facebook&#8217;s developer site</a></p>
<p>The content inside the i-frame is hosted by Facebook, and Facebook can detect whether the user is logged in or not using a cookie. If the person is logged in to Facebook, the stuff in the i-frame is personalized for them. It shows a list of their friends who have also liked the page. If they&#8217;re not logged in, they&#8217;ll be prompted to log in or to join.</p>
<h3>The JavaScript version</h3>
<p>The slightly more complicated JavaScript version of the button utilizes two other bits of Facebook technology: the XFBML <code>fb:like</code> tag and Facebook&#8217;s <a href="http://developers.facebook.com/docs/reference/javascript/">JavaScript SDK</a>.</p>
<pre class="brush: js">
&lt;fb:like href="Your URL" layout="standard" show-faces="true" width="450" action="like" colorscheme="light" />
</pre>
<p>You get all the same personalization features as the i-frame version, so each logged in Facebook user who visits your site sees which of their friends have clicked the &#8220;Like&#8221; button, and a link to your site gets shared across their social graph. Also like the i-frame version, you can tweak the parameters however you want.</p>
<p>But the JavaScript version offers some extras. In the code above, you can also see there&#8217;s a <code>show-faces</code> flag that will show the profile pictures of your friends who have clicked on the Like button.</p>
<p>The JavaScript version also gives your visitors the chance to add a comment to the link when they click on the Like button.</p>
<p>If a user is not logged in to Facebook when they visit your site, you can authenticate them automatically using OAuth 2.0, which Facebook now supports. <a href="http://developers.facebook.com/docs/authentication/">Full details are here</a>.</p>
<h3>Tag up your page</h3>
<p>When a user Likes your page, it does more than just pass the link around. If you&#8217;re a band, or you run a site for a movie, you can add some semantic markup to your page that tells Facebook the type of thing your page represents. That way, if I go to your movie page and &#8220;Like&#8221; your movie, Facebook can easily add a link to your movie&#8217;s website in my profile. If I keep a list of my favorite movies in my Facebook profile, a link to your public website will be added there, where it belongs.</p>
<p>This part is optional, but it&#8217;s recommended. Just <a href="http://developers.facebook.com/docs/opengraph">add some Open Graph meta tags</a> to your page so Facebook knows what you are. There are four that are required, the rest are gravy. You can claim your entity&#8217;s identity by picking the most relevant <a href="http://developers.facebook.com/docs/opengraph#types">content type</a>. The list is long &#8212; musician, sports team, blog, drink, hotel, movie, book, city, cause &#8212; so whatever your page represents, Facebook can understand it and deal with the link properly when somebody clicks your Like button.</p>
<h3>Get used to it</h3>
<p>Like buttons are a step up from the other sharing buttons that have been on the web for years. Unlike those for Digg and Twitter, which just display a blind count of aggregate clicks from everyone on the social network, the Facebook Like button shows you how <em>your friends</em> are interacting with the page you&#8217;re on. </p>
<p>We can certainly expect other social networks to pick up on this model and start serving up lists of your friends, and maybe even their faces, along side their own social widgets.</p>
<p>As if the number of icons and little doo-dads at the bottom of blog posts wasn&#8217;t distracting enough&#8230;</p>
<p><b>See Also:</b></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/04/facebook-shows-off-new-tools-to-socialize-the-entire-web/">Facebook Shows Off New Tools to Socialize the Entire Web</a></li>
</ul>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/04/adding-facebook-like-buttons-to-your-site-is-damn-easy/feed/</wfw:commentRss>
        <slash:comments>65</slash:comments>

        
    </item>
    
    <item>
        <title>Facebook Shows Off New Tools to Socialize the Entire Web</title>
        <link>http://www.webmonkey.com/2010/04/facebook-shows-off-new-tools-to-socialize-the-entire-web/</link>
        <comments>http://www.webmonkey.com/2010/04/facebook-shows-off-new-tools-to-socialize-the-entire-web/#comments</comments>
        <pubDate>Wed, 21 Apr 2010 18:07:19 +0000</pubDate>

                <dc:creator>Michael Calore</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=47210</guid>
        		<category><![CDATA[Events]]></category>
		<category><![CDATA[Social]]></category>
		<category><![CDATA[F8]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[Open Graph]]></category>
        <description><![CDATA[SAN FRANCISCO, California &#8212; Facebook is launching a new suite of tools that bring the Facebook social experience to any site on the web. The company is releasing a set of products called Social Plugins, which any web publishers can drop into their website using one very simple line of code. These plug-ins will let [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled --><img src="http://www.webmonkey.com/wp-content/uploads/2010/04/picture-11.png" />
<p>SAN FRANCISCO, California &#8212; Facebook is launching a new suite of tools that bring the Facebook social experience to any site on the web.</p>
<p>The company is releasing a set of products called Social Plugins, which any web publishers can drop into their website using one very simple line of code. These plug-ins will let visitors &#8220;Like&#8221; news stories, photos and so on. Once a user likes something, it instantly gets added to the appropriate section of their Facebook profile.</p>
<p>The plug-ins are part of a new Facebook initiative to make every website on the internet sharable across its network, something the company is calling the Open Graph.</p>
<p>The announcements were made by Facebook CEO Mark Zuckerberg and platform engineer Brett Taylor at the company&#8217;s <a href="http;//www.facebook.com/f8">F8 developer&#8217;s conference</a> taking place here Wednesday.</p>
<p>Facebook will roll out the Like buttons Wednesday morning, and Zuckerberg boldly estimates that within 24 hours, there will be one billion Like buttons across the web.</p>
<p>Facebook has often been branded as the next AOL, a website that basically recreates several experiences available on the open web &#8212; chat, e-mail and link sharing &#8212; behind a closed gate. But with Wednesday&#8217;s Open Graph announcements, the company is giving website owners a bigger door into Facebook&#8217;s closed system using simple HTML tools and by <a href="http://www.webmonkey.com/2010/04/up-next-for-facebook-expect-more-open-interactions/">incorporating open standards</a> into its authentication system.</p>
<p>Zuckerberg, speaking with his trademark brand of stiff, awkward enthusiasm, calls the new Open Graph initiative &#8220;the most transformative thing we&#8217;ve ever done for the web.&#8221;</p>
<p>A grand platitude, certainly, but one of the most transformative shifts in Facebook&#8217;s policies, as it enables sites to more easily link up their content on the open web with the Facebook ecosystem and access its 400 million active users.</p>
<p>&#8220;With these tools, any web page can become a Facebook page,&#8221; Taylor says. &#8220;If you don&#8217;t like the way Facebook pages look, just make your own. Add the Like buttons and the Open Graph elements and you&#8217;ve got a page that&#8217;s fully integrated into Facebook.&#8221;<br />
<span id="more-47210"></span></p>
<p>Central to the experience is the Like button. Websites can add them by dropping in an <a href="http://www.webmonkey.com/2010/02/floating_content_in_i-frames/">i-frame</a>, and when a Facebook user clicks on it, it&#8217;s the same as them clicking on a Like button inside Facebook. Facebook knows who the person is, because it can now see a user&#8217;s logged-in state via a cookie.</p>
<p>There&#8217;s also a Recommendations plug-in, which shows you a curated list of content on the site you&#8217;re visiting that you might be interested in.</p>
<p>It&#8217;s not just a blind list of the 10 most-read or most-e-mailed articles on the site, Taylor explained, but a socially curated list based on what you are interested in.</p>
<p>Third is an Activity Stream plug-in, which shows you what your friends are up to and Liking around the web. </p>
<p>The new social plug-ins offer instant personalization to any website, Zuckerberg says. &#8220;You can have a user who&#8217;s never been to your site before and present them with a totally personalized experience.&#8221;</p>
<p>The final widget is a Facebook Bar, a toolbar website publishers can float at the bottom of their site&#8217;s user interface (again with an i-frame) to make these sharing features more visible. It also has elements that let users send Facebook mails or hold chat sessions.</p>
<p>To handle user authentication across all of these pieces on the web, Facebook is adopting the <a href="http://oauth.net/">OAuth 2.0</a> standard &#8212; an open-source industry standard that&#8217;s already being used by Twitter and other social networks. We expected something like this and <a href="http://www.webmonkey.com/2010/04/up-next-for-facebook-expect-more-open-interactions/">predicted it</a> in our pre-conference coverage.</p>
<p>During a press conference after the keynote, Zuckerberg and Taylor said that Facebook will be ditching the Facebook Connect brand. Connect will be replaced by OAuth 2.0, and all authentication will be handled by the <a href="http://developers.facebook.com/docs/authentication/">various Open Graph tools</a>, which utilize the standard.</p>
<p>&#8220;It&#8217;s an industry standard and it&#8217;s super easy,&#8221; Taylor said of OAuth, &#8220;You can implement it in about five minutes, as opposed to five days for our old authentication system.&#8221;</p>
<p>Facebook is also giving websites a new way to identify themselves using semantic HTML. The new markup tells Facebook what type of real-world object your site represents. So, if you run a band website, you can add semantic HTML tags that tell Facebook a bit about the band: we are called Throbbing Monkeys and we are from San Francisco. So, when a Facebook user clicks on the Like button embedded on your page, the band gets added to the &#8220;Music&#8221; section of their profile.</p>
<p>Best of all, the link that appears on the user&#8217;s Facebook profile will lead directly to the website where the Like button was clicked &#8212; a first.</p>
<p>&#8220;For the first time, the Likes and Favorites on my profile page are linked to sites off of Facebook.com,&#8221; Bret Taylor said. He earned a round of applause.</p>
<p>Finally, Faceboook is also dropping the policy that forbids outside applications from holding on to user data for more than 24 hours. This was a <a href="http://www.webmonkey.com/2009/05/why_facebook_shut_down_the_only_useful_app_it_ever_had/">controversial policy</a> to begin with, since it prevented developers from making anything (like an RSS reader or a photo-browsing app) that let the user keep things like status updates any longer than a day.</p>
<p>&#8220;This is just a technical restriction that we&#8217;re lifting,&#8221; Taylor says. &#8220;It doesn&#8217;t change any of the rules around what you can and can&#8217;t do with the user data.&#8221;</p>
<p>Facebook is offering real-time user action updates as part of the new Graph API, which makes it easier for developers to consume user&#8217;s activity streams.</p>
<p>Brett Taylor, who walked through the real-time features of the Graph API is part of the team that built FriendFeed, which Facebook aquired last year. Taylor says there aren&#8217;t any plans to develop FriendFeed any further, but that Facebook will keep it alive.</p>
<p><em>UPDATED at 2:30pm PDT to include details about OAuth and Facebook Connect.</em></p>
<p><b>See Also:</b></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/03/facebook-finds-its-place-in-the-location-sharing-landscape/">Facebook Finds its Place in the Location Sharing Landscape</a></li>
<li><a href="http://www.webmonkey.com/2010/04/facebook-tags-everyone-at-f8-with-rfid-chips/">Facebook Tags Everyone at F8 with RFID Chips</a></li>
<li><a href="http://www.webmonkey.com/2010/04/up-next-for-facebook-expect-more-open-interactions/">Up Next For Facebook: Expect More Open Interactions</a></li>
</ul>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/04/facebook-shows-off-new-tools-to-socialize-the-entire-web/feed/</wfw:commentRss>
        <slash:comments>17</slash:comments>

        
    </item>
    </channel>
</rss>