Facebook Open Graph implementation in the Harvard Gazette
1 like2,397 views
The document discusses integrating Facebook Open Graph into web platforms, particularly focusing on implementations for WordPress and Drupal. It highlights the use of specific Open Graph meta tags for sharing content and offers resources for testing and debugging the integration. Additionally, it includes contact information for Chris Traganos at Harvard University.
Facebook Open Graph implementation in the Harvard Gazette
- 1. Integrating Facebook Open Graph into the Chris Traganos @ctraganos
- 2. 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
- 4. 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/>
- 6. 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>
- 8. 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>
- 9. test & debug
- 10. 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
- 11. Facebook Open Graph URL Linter http://developers.facebook.com/tools/lint
- 13. Facebook Open Graph Engagement Metrics http://facebook.com/insights
- 15. Thank you! Chris Traganos christopher_traganos@harvard.edu @ctraganos