0

I am ready to pull the remaining hair out of my darn head. Can't for the life of me figure out why Facebook will not pull the featured image, or even an image from inside the post, when I share via publicize from WordPress 4.0.

I have checked and un-checked 'insert og tags' in Yoast SEO, tried shareaholic and even hard coded the lines into my functions.php (see below for code used).

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
  return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
//Lets add Open Graph Meta Info
function insert_fb_in_head() {
  global $post;
  if ( !is_singular()) //if it is not a post or a page
    return;
  echo '<meta property="fb:admins" content="480187318774482"/>';
  echo '<meta property="og:title" content="' . get_the_title() . '"/>';
  echo '<meta property="og:type" content="article"/>';
  echo '<meta property="og:url" content="' . get_permalink() . '"/>';
  echo '<meta property="og:site_name" content="Islanders Insight"/>';
  if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
    $default_image="http://www.islandersinsight.com/wp-content/uploads/2014/08/BvlnJMzIUAEGHEu.jpg"; //replace this with a default image on your server or an image in your media library
    echo '<meta property="og:image" content="' . $default_image . '"/>';
  }
  else{
    $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
    echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
  }
  echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

This is the facebook page : https://www.facebook.com/IslandersInsight

And this is the post : http://www.islandersinsight.com/2014/10/new-york-islanders-vs-san- jose-sharks-pregame-report/

Can anyone please help? I am about to start trying to slash my wrists with plastic knives.

These are the only errors that the debugger is throwing me:

Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.

Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.

Inferred Property The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.

Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

These are the only OG tags I see being generated when I click 'check page source':

<!-- OpenGraph Facebook Start -->
<meta property="og:title" content="New York Islanders vs. San Jose Sharks: Pregame Report" />
<meta property="og:description" content=" #479084605 / gettyimages.com When: Thursday October 16th, 2014 Where: Nassau Veterans Memorial Coliseum, Uniondale, NY Time: 7 p.m. TV: MSG+ (Howie Rose, Butch Goring) Radio: WRHU 88.7 FM (Chris King..." />
<meta property="og:image" content="http://www.islandersinsight.com/wp-content/uploads/2014/10/SharksatIsles-150x150.png" /> <!-- OpenGraph Facebook Ends -->
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://www.islandersinsight.com/xmlrpc.php" />

As you can see, it looks like something is shrinking my featured image to 150x150 even though its sized 1800x1200.

What could be doing that? And why wouldn't the debugger throw me an error alerting me to that fact? Just taking a shot in the dark obviously.

1

It is because your markup is invalid which is causing Facebook to think the meta elements are in the body. You can see this by running the page through W3C validator which make sense for the Facebook linter error message:

Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree. Please fix this in order for the tags to be usable.

I suspect it is all the tracking codes you have at the start of your head.

<!-- Start DFP SETUP -->
  <script type="text/javascript"><!--
  //<![CDATA[
  (function() {
  var useSSL = 'https:' == document.location.protocol;
  var src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
  document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
  })();
  //]]>
  //--></script>
  <script type='text/javascript' src='http://img.bnqt.com/lib/js/sdpdfphelper.js'></script>
  <script type="text/javascript">
    googletag.pubads().enableSyncRendering();
    googletag.pubads().setTargeting("title", sdpTargeting.title)
                      .setTargeting('targetPaths', sdpTargeting.targetPaths)
                      .setTargeting('fullPath', sdpTargeting.fullPath)
                      .setTargeting('queryStr', sdpTargeting.queryStr)
                      .setTargeting('domainName', sdpTargeting.domainName);       
  </script>
  <!-- DFP SETUP end -->

<!-- Begin comScore Tag -->
<script>
  var _comscore = _comscore || [];
  _comscore.push({ c1: "2", c2: "6035223" });
  (function() {
    var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true;
    s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js";
    el.parentNode.insertBefore(s, el);
  })();
</script>
<noscript>
  <img src="http://b.scorecardresearch.com/p?c1=2&c2=6035223&cv=2.0&cj=1" />
</noscript>
<!-- End comScore Tag -->

Move those to the very end of your page right before the </body></html>.

  • I moved the ad tags, which I was told had to be between the header tags, from the very top of header.php to right above the closing header tag, </head>. Will report back. Thanks. I did not see anything in my header.php for </body></html> using the "f" find function. – Andy Graziano Oct 17 '14 at 15:09
  • You were told incorrectly, that particular code should absolutely not be in the head, but in the body, just before the ending /body tag. – Otto Oct 17 '14 at 15:20
  • This is the only body tag I see in my header.php and I don't see a close body tag. <body – Andy Graziano Oct 17 '14 at 15:36
  • How do I enter code in my comment correctly and I can paste my header.php. – Andy Graziano Oct 17 '14 at 15:46
  • Ok - see what you mean. </body></html> was in the inspect page element but not actually listed in header.php. I moved the ad code to the very bottom of my header.php and will report back. – Andy Graziano Oct 17 '14 at 16:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.