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=".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?

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/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?

• php
• plugin-development
• facebook

1 Answer 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/" />
<meta property= "og:type" content="website" />
<meta property= "og:title" content="The page title" />
<meta property= "og:image" content="https://www.example/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/" />
<meta name="twitter:image" content="https://www.example/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/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.