-1

I have a dynamically generated page in a WordPress environment. This page uses a simple shortcode, with no parameters, but the page is launched via another page and passes a URL parameter. This parameter indicates which data set I am to display on the page. Works great, with a big but.....

The sharing on the page works. The link properly shares the location and with the URL parmeter, the correct information is displayed upon opening. BUT I want the image, description and Name to be different that the default page.

After some work, and help from others here on StackExchange, I have successfully changed the header with the facebook required meta fields and have confirmed their existence.

First the page title:

 add_filter('document_title_parts','ChangeTitleParts', 10, 1);  
 function ChangeTitleParts($TitleParts)
 {
  if ( isset( $TitleParts[ 'title' ] ) && $TitleParts[ 'title' ] == 'Details' ) 
     $TitleParts[ 'title' ] = $_GET[ 'Name' ];  

 return $TitleParts;    
 }

The then changing the meta values in the header:

 add_action( 'wp_head', 'add_custom_meta', 10 );    
 function add_custom_meta()
 {
 $slug = basename(get_permalink());
 if(    $slug == 'details')
   {
   $Name = $_GET[ 'Name' ];
   $Desc = $_GET[ 'Desc' ];
   $Logo = $_GET[ 'Logo' ]; 
   ?>    
    <meta property="og:title" content="<?php echo $Name; ?>>"/>
    <meta property="og:description" content="<?php echo $Desc; ?>">
    <meta property="og:image" content="<?php echo $Logo; ?>">
     <?PHP
   }
 }

The facebook meta properties are as such:

 <meta property="og:title" content="Facebook Open Graph Demo">
 <meta property="og:image" content="http://example.com/main-image.png">
 <meta property="og:site_name" content="Example Website"> 
 <meta property="og:description" content="Here is a nice description">

The problem is, facebook refuses to display the Title, description or associated iamge, even though the required Meta values are in the header. What am I doing wrong?

1

I used this code; change values as needed, get an FB app ID.

And it's not immediate; there is a process to clear the FB cache of a page so it gets the current info. (Can't find it right now...but I think it's on the FB app pages.)

(I added the viewport meta value; always useful to have.)

<meta property= "og:url" content="https://www.example.com/" />
<meta property= "og:type" content="website" />
<meta property= "og:title" content="The page title" />
<meta property= "og:image" content="https://www.example.com/full/path/to/the/thumbnail.jpg" />
<meta property="og:description" content="A longer description, maybe the excerpt" />
<meta property="og:site_name" content="the site name">
<meta property="fb:app_id" content="your-fb-app-id-number" />

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="the page title" />
<meta name="twitter:description" content="A longer string like the excerpt" />
<meta name="twitter:url" content="https://www.example.com/" />
<meta name="twitter:image" content="https://www.example.com/cover-final/Cover-Book-One-Final.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Added

Found this info on how to clear the developer FB cache: https://leadseven.zendesk.com/hc/en-us/articles/203358641-How-To-Clear-Facebook-Share-Cache . Similar to what I have done. Good to use while debugging, or when you make a major change to 'og' things.

  • Nice. Will investigate that. The FB caching issue had cross my mind. Hopefully I can find it. To confirm, twitter does not require the app id. – Debbie Kurth Jun 9 at 0:16
  • The caching for facebook is called "Open Graph Object Debugger" – Debbie Kurth Jun 9 at 16:50

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.