15
Integrating Facebook Open Graph into the Chris Traganos @ctraganos
| Date post: | 06-May-2015 |
| Category: |
Self Improvement |
| Upload: | harvard-web-working-group |
| View: | 4,036 times |
| Download: | 1 times |
IntegratingFacebook 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
Likes & Recommendations
Open Graph bringsthe Gazette into the
Facebook ecosystem
og:title
og:type
og:image
og:url
og:description
og:site_name
These are <meta tags/>
Wordpress Implementation
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 Implementation
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>
test debug&
<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
https://developers.facebook.com/docs/guides/web/
Facebook Open GraphURL Linter
http://developers.facebook.com/tools/lint
Facebook Open GraphEngagement Metrics
http://facebook.com/insights
