Forum

Thread tagged as: Meta, Blog, Twitter

Implementing 'Facebook Open Graph Tags and Twitter Cards' on Blog article pages

Hi,

I’m trying to implement Facebook Open Graph Tags and Twitter Cards, following this article. I got it all working for the homepage, but I have trouble getting it to work on the blog article pages. The meta code doesn’t appear on the blog article pages.

I’m trying to use ‘perch_page_attributes_extend’ as described in the article, although my code is placed into a layouts template, named ‘global.header-blog.php’ which contains the entire top part code of the HTML page. This layout template file is then linked via php into ‘post.php’ file (which contains the blog template for my blog posts). This ‘post.php’ is located in a folder on the root of the site named ‘blog’.

I’m guessing it’s a problem with the path to the template that holds the meta tags, but not sure… as I don’t know PHP. Maybe the code is totally wrong here.

This is the code I have in place in 'global.header-blog.php’ (right below the link to my stylesheets and above the javascripts):

<?php
# get the post
$post = perch_blog_custom(array(
      ‘filter’        => ‘postSlug’,
      ‘match’         => ‘eq’,
      ‘value’         => perch_get(’s’),
      ‘skip-template’ => ‘true’,
      ‘return-html’   => ‘true’,
  ));

# set up the variables
$title       = $post[‘0’][‘postTitle’];
$description = strip_tags($post[‘0’][‘excerpt’]);
if (isset($post[0][‘fbimage’])) {
    $fbimage = $post[0][‘fbimage’];
} else {
    $fbimage = ‘’;
}

# use the variables in the array value 
perch_page_attributes_extend(array(
    ‘description’    => $description,
    ‘og_description’ => $description,
    ‘og_title’       => $title,
    ‘og_type’        => ‘article’,
    ‘sharing_image’  => $fbimage,
    ‘og_author’      => ‘https://www.facebook.com/frederik.backelandt',
    ‘template’ => ‘default.html’
));
?>

It might be something basic I’m missing here that isn’t explained in the article. I have no idea. Any help would be very much appreciated.

Thank you very much in advance, Veerle
Veerle Pieters

Veerle Pieters 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Just to check - is the above all happening before the point in the page where the meta tags are output?
Veerle Pieters

Veerle Pieters 0 points

6 years ago

It's below this part:

<!doctype html>
<html class="no-js" lang="nl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title><?php perch_layout_var('title'); ?></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link rel="stylesheet" href="/css/styles.css">

        … here is the Perch PHP code …

and then below the Perch PHP code follows this :

        <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
        <script src="https://use.typekit.net/hox6cum.js"></script>
        …

Also, not sure if you need this info, but the post.php file code starts with this:

<?php include('../perch/runtime.php');?>

<?php
$title = perch_blog_post_field(perch_get('s'), 'postTitle', true);
perch_layout('global.header-blog', array(
  'title'=>$title,
  'class'=>'blogpage',
));
?>
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Ok, great. Where do you call perch_page_attributes() to output the result?
Veerle Pieters

Veerle Pieters 0 points

6 years ago

Not 100% sure I understand the question, but I guess you mean the template that outputs/has these metatags?

At the end of the PHP code there is ‘template’ => ‘default.html’

That is the template that is located here: perch > templates > pages > attributes > default.html

Maybe that is wrong? Should I have created a different template in the folder 'blog' (located in perch > templates > blog)?
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

It's using perch_page_attributes() that will output the tags to the page. perch_page_attributes_extend() is passing in the extra data, but perch_page_attributes() creates the tags.

If you don't have perch_page_attributes() anywhere, add it after the perch_page_attributes_extend().
Veerle Pieters

Veerle Pieters 0 points

6 years ago

I have now this code in place in the 'global.header-blog.php' layout template:

<?php
# get the post
$post = perch_blog_custom(array(
      'filter'        => 'postSlug',
      'match'         => 'eq',
      'value'         => perch_get('s'),
      'skip-template' => 'true',
      'return-html'   => 'true',
  ));

# set up the variables
$title       = $post['0']['postTitle'];
$description = strip_tags($post['0']['excerpt']);
if (isset($post[0]['fbimage'])) {
    $fbimage = $post[0]['fbimage'];
} else {
    $fbimage = '';
}


# use the variables in the array value 
perch_page_attributes_extend(array(
    'description'    => $description,
    'og_description' => $description,
    'og_title'       => $title,
    'og_type'        => 'article',
    'sharing_image'  => $fbimage,
    'og_author'      => 'https://www.facebook.com/frederik.backelandt',  
));


perch_page_attributes(array(        
  'template' => 'default.html'    
));

?>

It's placed in the 'head' element, where the metatags are located (as described before). This template is loaded into 'post.php' template page. It's still not giving any results. Nothings shows up :(
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Well, that's very strange! If you add debug to your page, what does it output?

https://docs.grabaperch.com/docs/installing-perch/configuration/debug/
Veerle Pieters

Veerle Pieters 0 points

6 years ago

This is what it outputs on the blog page (blog.php):

Debug Message
SELECT * FROM perch2_blog_posts WHERE postStatus='Published' AND postDateTime<='2015-09-30 08:57:00' AND postSlug='2015-09-28-arriva-feest-mee-met-wuustwezel'
SELECT DISTINCT settingID, settingValue FROM perch2_settings WHERE userID=0
SELECT * FROM perch2_blog_sections ORDER BY sectionTitle ASC
Using template: /templates/blog/post.html
SELECT SQL_CALC_FOUND_ROWS DISTINCT tbl.* FROM ( SELECT idx.itemID, main.*, idx2.indexValue as sortval FROM perch2_blog_index idx JOIN perch2_blog_posts main ON idx.itemID=main.postID AND idx.itemKey='postID' JOIN perch2_blog_index idx2 ON idx.itemID=idx2.itemID AND idx.itemKey='postID' AND idx2.indexKey='_id' WHERE 1=1 AND ((idx.indexKey='postSlug' AND idx.indexValue='2015-09-28-arriva-feest-mee-met-wuustwezel')) AND idx.itemID=idx2.itemID AND idx.itemKey=idx2.itemKey GROUP BY idx.itemID ) as tbl WHERE (postStatus='Published' AND postDateTime<='2015-09-30 08:57:00' ) GROUP BY itemID ORDER BY sortval ASC LIMIT 0, 10
SELECT FOUND_ROWS() AS `count`
Using template: /templates/blog/post.html
SELECT * FROM perch2_categories ORDER BY catTreePosition ASC
SELECT catID, catPath FROM perch2_categories
SELECT * FROM perch2_pages WHERE pagePath='/blog/post.php' LIMIT 1
SELECT SQL_CALC_FOUND_ROWS DISTINCT tbl.* FROM ( SELECT idx.itemID, main.*, idx2.indexValue as sortval FROM perch2_blog_index idx JOIN perch2_blog_posts main ON idx.itemID=main.postID AND idx.itemKey='postID' JOIN perch2_blog_index idx2 ON idx.itemID=idx2.itemID AND idx.itemKey='postID' AND idx2.indexKey='_id' WHERE 1=1 AND ((idx.indexKey='postSlug' AND idx.indexValue='2015-09-28-arriva-feest-mee-met-wuustwezel')) AND idx.itemID=idx2.itemID AND idx.itemKey=idx2.itemKey GROUP BY idx.itemID ) as tbl WHERE (postStatus='Published' AND postDateTime<='2015-09-30 08:57:00' ) GROUP BY itemID ORDER BY sortval ASC LIMIT 0, 1
SELECT FOUND_ROWS() AS `count`
Using template: /templates/blog/post.html
SELECT * FROM perch2_categories ORDER BY catTreePosition ASC
SELECT catID, catPath FROM perch2_categories
SELECT SQL_CALC_FOUND_ROWS DISTINCT tbl.* FROM ( SELECT idx.itemID, main.*, idx2.indexValue as sortval FROM perch2_blog_index idx JOIN perch2_blog_posts main ON idx.itemID=main.postID AND idx.itemKey='postID' JOIN perch2_blog_index idx2 ON idx.itemID=idx2.itemID AND idx.itemKey='postID' AND idx2.indexKey='postID' WHERE 1=1 AND ((idx.indexKey='postID' AND idx.indexValue < 9)) AND idx.itemID=idx2.itemID AND idx.itemKey=idx2.itemKey GROUP BY idx.itemID ) as tbl WHERE (postStatus='Published' AND postDateTime<='2015-09-30 08:57:00' ) GROUP BY itemID ORDER BY sortval * 1 DESC LIMIT 0, 1
SELECT FOUND_ROWS() AS `count`
Using template: /templates/blog/navtest-prev.html
SELECT SQL_CALC_FOUND_ROWS DISTINCT tbl.* FROM ( SELECT idx.itemID, main.*, idx2.indexValue as sortval FROM perch2_blog_index idx JOIN perch2_blog_posts main ON idx.itemID=main.postID AND idx.itemKey='postID' JOIN perch2_blog_index idx2 ON idx.itemID=idx2.itemID AND idx.itemKey='postID' AND idx2.indexKey='postID' WHERE 1=1 AND ((idx.indexKey='postID' AND idx.indexValue > 9)) AND idx.itemID=idx2.itemID AND idx.itemKey=idx2.itemKey GROUP BY idx.itemID ) as tbl WHERE (postStatus='Published' AND postDateTime<='2015-09-30 08:57:00' ) GROUP BY itemID ORDER BY sortval * 1 ASC LIMIT 0, 1
SELECT FOUND_ROWS() AS `count`
Using template: /templates/blog/navtest-next.html
Fetching from cache: perch_blog_post_categories1a86ca67a4c70149be0acb1bb03ffbf7
Cache file not found: perch_blog_post_categories1a86ca67a4c70149be0acb1bb03ffbf7
Using template: /templates/blog/post_category_link.html
Fetching from cache: perch_blog_post_tags667bc68b88584efac6d72f3edba1e792
Cache file not found: perch_blog_post_tags667bc68b88584efac6d72f3edba1e792
SELECT t.* FROM perch2_blog_tags t, perch2_blog_posts_to_tags p2t WHERE t.tagID=p2t.tagID AND p2t.postID='9'
Using template: /templates/blog/post_tag_link.html
Array
(
    [type] => 8
    [message] => Undefined variable: post
    [file] => /data/sites/web/arrivacc/www/blog/post.php
    [line] => 53
)
Eystein Alnaes

Eystein Alnaes 0 points

6 years ago

I've got the same problem, though with a simpler php script.

perch_page_attributes(array(
    'template' => 'default.html'
));

Inside <head> on post.php isn't outputting any HTML. But it works on index.php.

Thanks in advance, Eystein
Veerle Pieters

Veerle Pieters 0 points

6 years ago

Hi Eystein,

For blog (or other) app pages you need to use 'perch_page_attributes_extend' instead. It's explained in this article (scroll down a bit). It's what I try to do, but somehow I doesn't seem to work. Hope this helps.

Cheers, Veerle
Eystein Alnaes

Eystein Alnaes 0 points

6 years ago

Thanks Veerle,

I've tried it, and many workarounds, all day. Unfortunately without any luck either. I think it's time to sleep on it and tomorrow will be better. fingers: crossed;

Cheers, Eystein
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Can you try this:

<?php
# get the post
$post = perch_blog_custom(array(
      'filter'        => 'postSlug',
      'match'         => 'eq',
      'value'         => perch_get('s'),
      'skip-template' => true,
  ));

# set up the variables
$title       = $post[0]['postTitle'];
$description = strip_tags($post[0]['excerpt']);
if (isset($post[0]['fbimage'])) {
    $fbimage = $post[0]['fbimage'];
} else {
    $fbimage = '';
}


# use the variables in the array value 
perch_page_attributes_extend(array(
    'description'    => $description,
    'og_description' => $description,
    'og_title'       => $title,
    'og_type'        => 'article',
    'sharing_image'  => $fbimage,
    'og_author'      => 'https://www.facebook.com/frederik.backelandt',  
));


perch_page_attributes(array(        
  'template' => 'default.html'    
));

?>
Veerle Pieters

Veerle Pieters 0 points

6 years ago

Hi Drew,

Thank you for the help. I pasted the code in the 'global.header-blog.php' layout template(which is linked into post.php), replacing the old/previous PHP code with this code, but unfortunately the meta tags still don't appear :(

Cheers, Veerle
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Is there any change at all?

Do you still get the same error? What code is on the line of the error?
Veerle Pieters

Veerle Pieters 0 points

6 years ago

I'm assuming you mean the part of the code that is in red? This:

Array
(
    [type] => 8
    [message] => Undefined variable: post
    [file] => /data/sites/web/arrivacc/www/blog/post.php
    [line] => 53
)
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Yes, what's on line 53 of blog/post.php ?
Veerle Pieters

Veerle Pieters 0 points

6 years ago

this:

echo $post['html'];
Veerle Pieters

Veerle Pieters 0 points

6 years ago

FYI here is full PHP code (it's code I found to create previous and next buttons):

 <?php 
          $result = perch_blog_custom(array(
        'template' => 'post.html',
        'filter' => 'postSlug',
        'match' => 'eq',
        'value' => perch_get('s'),
        'count' => 1,
        'skip-template' => true,
        'return-html'   => true
      ));

      $prev = perch_blog_custom(array(
        'template' => 'navtest-prev.html',
        'filter'=>'postID',
        'match'=>'lt',
        'value'=>$result[0]['sortval'],
        'sort'       => 'postID',
        'sort-type'=> 'numeric',
        'sort-order' => 'DESC',
        'count'      => 1,
        'skip-template' => true,
        'return-html' => true
      ));

      $next = perch_blog_custom(array(
        'template' => 'navtest-next.html',
        'filter'=>'postID',
        'match'=>'gt',
        'value'=>$result[0]['sortval'],
        'sort'       => 'postID',
        'sort-type'=> 'numeric',
        'sort-order' => 'ASC',
        'count'      => 1,
        'skip-template' => true,
        'return-html' => true
      ));

      echo $result['html'];
      echo $post['html'];
      echo $prev['html'];
      echo $next['html'];
        ?>

I guess echo $result['html']; shows the post and echo $post['html']; isn't really needed?
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Yes, I think you can remove

 echo $post['html'];

it's not doing anything.
Veerle Pieters

Veerle Pieters 0 points

6 years ago

Hi Drew,

Just so you know: I removed this… unfortunately it didn't change anything else :( So the meta tags still don't show up on the blog pages.

Let me know if I can provide anything else to help you solve this weird issue.

Meanwhile, thanks again for all your efforts.

Cheers, Veerle