Facebook Open Graph implementation in the Harvard Gazette

Integrating
Facebook Open Graph
into the

Chris Traganos
@ctraganos

Facebook Open Graph @Harvard

•Provides Facebook with
context and resources for
sharing your likes across
the web

•Authentic sharing tool -
vetted likes make for great
referrals

IMG: http://bit.ly/dT2how

Open Graph brings
the Gazette into the
Facebook ecosystem

og:title
og:type
og:image
og:url
og:description
og:site_name
These are <meta tags/>

Wordpress - header.php
<html
<?php if(is_single()): ?>
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"
<?php endif; ?> >
   <head>
     <title><?php the_title(); ?></title>
<link rel="stylesheet" href="/css/style.css" />

<?php if(is_single()): ?>

<meta property="og:site_name" content="Harvard Gazette"/>

<meta property="og:title" content="<?php bloginfo(‘name’); ?>"/>

<meta property="og:url" content="<?php echo get_permalink($post‐>ID); ?>"/>

<meta property="og:description" content="<?php echo get_the_excerpt(); ?>"/>

     <meta property="og:image" content="<?php echo $thumb_photo; ?>"/>

<?php endif; ?>

   </head>

Drupal - page.tpl.php
<html
<?php if($node‐>type == ‘story’ ): ?>
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"
<?php endif; ?> >
   <head>
     <title><?php print $head_title; ?></title>
<link rel="stylesheet" href="/css/style.css" />

<?php if($node‐>type == ‘story’ ): ?>

<meta property="og:site_name" content="<?php print t(‘Home’); ?>"/>

<meta property="og:title" content="<?php print $head_title; ?>"/>

<meta property="og:url" content="<?php print $permalink; ?>"/>

<meta property="og:description" content="<?php print $site_slogan; ?>"/>

     <meta property="og:image" content="<?php print $logo; ?>"/>

<?php endif; ?>

   </head>

https://developers.facebook.com/docs/guides/web/
<fb:like>
<!‐‐ FB Like ‐‐>
<div id="fb‐root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
    appId: '173993602616346',
    status: true, cookie: true,
     xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb‐root').appendChild(e);
  }());
</script>

<fb:like layout="button_count" show_faces="true" width="175" action="recommend"
font="lucida grande" colorscheme="light"></fb:like>

<!‐‐ END OF FB Like ‐‐>

http://bugs.developers.facebook.net/show_bug.cgi?id=13263

Facebook Open Graph
URL Linter
http://developers.facebook.com/tools/lint

Facebook Open Graph
Engagement Metrics
http://facebook.com/insights

Thank you!
Chris Traganos
christopher_traganos@harvard.edu

@ctraganos

Facebook Open Graph implementation in the Harvard Gazette

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Facebook Open Graph implementation in the Harvard Gazette

Similar a Facebook Open Graph implementation in the Harvard Gazette (20)

Más de Harvard Web Working Group

Más de Harvard Web Working Group (20)

Último

Último (14)

Facebook Open Graph implementation in the Harvard Gazette