Facebook Open Graph implementation in the Harvard Gazette
•
1 gefällt mir•2,393 views
Talk presented at the April 2011 meeting of the Harvard CMS working group. Overview for Facebook open graph integration and the approaches taken at the Harvard Gazette.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (18)
Ähnlich wie Facebook Open Graph implementation in the Harvard Gazette
Ähnlich wie Facebook Open Graph implementation in the Harvard Gazette (20)
Mehr von Harvard Web Working Group
Mehr von Harvard Web Working Group (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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