{"id":1511,"date":"2010-12-05T21:52:51","date_gmt":"2010-12-06T04:52:51","guid":{"rendered":"http:\/\/wordpress.reams.me\/?p=1511"},"modified":"2010-12-05T21:57:53","modified_gmt":"2010-12-06T04:57:53","slug":"quickly-add-facebook-open-graph-to-wordpress-theme","status":"publish","type":"post","link":"https:\/\/wordpress.reams.me\/?p=1511","title":{"rendered":"Quickly add Open Graph to WordPress theme"},"content":{"rendered":"<p>I&#8217;ve found a lot of benefit adding <a href=\"http:\/\/opengraphprotocol.org\/\">Open Graph<\/a> properties to my blogs. Primarily: more visitors. By adding simple code to my WordPress theme headers, social plugins like the &#8216;Like&#8217; button will make your content display more meaningful within Facebook.<\/p>\n<p>Which of these two articles would you be drawn to? Which would cause you to stop, read, and consider clicking through to? <\/p>\n<p>Yet another easily ignorable line item:<\/p>\n<p><a href=\"http:\/\/wordpress.reams.me\/wp\/wp-content\/uploads\/2010\/12\/without-open-graph.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/wordpress.reams.me\/wp\/wp-content\/uploads\/2010\/12\/without-open-graph.png\" alt=\"\" title=\"without-open-graph\" width=\"555\" height=\"25\" class=\"aligncenter size-full wp-image-1600\" srcset=\"https:\/\/wordpress.reams.me\/wp-content\/uploads\/2010\/12\/without-open-graph.png 555w, https:\/\/wordpress.reams.me\/wp-content\/uploads\/2010\/12\/without-open-graph-300x13.png 300w, https:\/\/wordpress.reams.me\/wp-content\/uploads\/2010\/12\/without-open-graph-510x22.png 510w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/a><\/p>\n<p>Or this rich image and excerpt:<\/p>\n<p><a href=\"http:\/\/wordpress.reams.me\/wp\/wp-content\/uploads\/2010\/12\/with-open-graph-properties.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/wordpress.reams.me\/wp\/wp-content\/uploads\/2010\/12\/with-open-graph-properties.png\" alt=\"\" title=\"with-open-graph-properties\" width=\"555\" height=\"187\" class=\"aligncenter size-full wp-image-1599\" srcset=\"https:\/\/wordpress.reams.me\/wp-content\/uploads\/2010\/12\/with-open-graph-properties.png 555w, https:\/\/wordpress.reams.me\/wp-content\/uploads\/2010\/12\/with-open-graph-properties-300x101.png 300w, https:\/\/wordpress.reams.me\/wp-content\/uploads\/2010\/12\/with-open-graph-properties-510x171.png 510w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/a><\/p>\n<p>With WordPress I can easily drop a few lines of code into my theme&#8217;s header and make any &#8216;Liked&#8217; content a little more compelling.<\/p>\n<h2>The Source<\/h2>\n<p>In the header, I&#8217;ve added a quick snippet to grab only the image URL of the featured image for the current post (<a href=\"http:\/\/wpcanyon.com\/tipsandtricks\/get-the-src-attribute-from-wordpress-post-thumbnail\/\">via wpcanyon.com<\/a>):<\/p>\n<pre>\r\n<code>\r\n$thumb = get_the_post_thumbnail($post->ID);\r\n$pattern= \"\/(?<=src=['|\\\"])[^'|\\\"]*?(?=['|\\\"])\/i\";\r\npreg_match($pattern, $thumb, $thePath);\r\n$theSrc = $thePath[0];<\/blockquote>\r\n<\/code>\r\n<\/pre>\n<p>I then add the following to define the <a href=\"http:\/\/developers.facebook.com\/docs\/opengraph\">required Open Graph properties<\/a>:<\/p>\n<pre>\r\n<code>\r\n&lt;meta property=\"fb:admins\" content=\"<strong>FACEBOOK ID<\/strong>\" \/>\r\n&lt;? if (is_single()) { ?>\r\n&lt;meta property=\"og:title\" content=\"&lt;?php echo get_the_title(); ?>\"\/>\r\n&lt;meta property=\"og:type\" content=\"article\"\/>\r\n&lt;meta property=\"og:image\" content=\"&lt;?php echo $theSrc; ?>\" \/>\r\n&lt;meta property=\"og:url\" content=\"&lt;?php the_permalink() ?>\" \/>\r\n&lt;meta property=\"og:description\" content=\"&lt;?php the_excerpt_rss() ?>\" \/>\r\n&lt;meta propert=\"og:site_name\" content=\"&lt;?php bloginfo('name'); ?>\" \/>\r\n&lt;? } ?><\/code>\r\n<\/pre>\n<p>And just like that, you&#8217;ve added all the necessary properties to your theme to tell anything that respects Open Graph (primarily Facebook) to your blog articles.<\/p>\n<p>Be sure to use the <a href=\"http:\/\/developers.facebook.com\/tools\/lint\/\">Facebook URL Linter<\/a> to test this out. Here&#8217;s <a href=\"http:\/\/developers.facebook.com\/tools\/lint\/?url=http%3A%2F%2Fwordpress.reams.me%2F2010%2Fhalloween-2010-in-colorado%2F\">an example<\/a> of a recent post of mine.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve found a lot of benefit adding Open Graph properties to my blogs. Primarily: more visitors. By adding simple code to my WordPress theme headers, social plugins like the &#8216;Like&#8217; button will make your content display more meaningful within Facebook. Which of these two articles would you be drawn to? Which would cause you to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1616,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9,579],"tags":[],"class_list":["post-1511","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet","category-wordpress"],"jetpack_featured_media_url":"https:\/\/wordpress.reams.me\/wp-content\/uploads\/2010\/12\/open_graph_protocol_logo.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.reams.me\/index.php?rest_route=\/wp\/v2\/posts\/1511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.reams.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.reams.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.reams.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.reams.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1511"}],"version-history":[{"count":18,"href":"https:\/\/wordpress.reams.me\/index.php?rest_route=\/wp\/v2\/posts\/1511\/revisions"}],"predecessor-version":[{"id":1615,"href":"https:\/\/wordpress.reams.me\/index.php?rest_route=\/wp\/v2\/posts\/1511\/revisions\/1615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.reams.me\/index.php?rest_route=\/wp\/v2\/media\/1616"}],"wp:attachment":[{"href":"https:\/\/wordpress.reams.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.reams.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.reams.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}