Forum

Thread tagged as: Problem

Implementing 'facebook-and-twitter-sharing'

I am trying to implement the solution facebook-and-twitter-sharing.

I am having trouble with this specific line.

You should now be able to edit the contents of the template tags in the Page Details section of any page and see the values appear in the head section of your page.

Currently I am not seeing the page attributes being overriden by my page specific settings, all I see in the <head> are the defaults set in my layout.

I cant see what I am doing wrong and why these values are not being edited.

Below I have included some snippets of code.

<?php 
$currentDomain        = 'https://'.$_SERVER["HTTP_HOST"];
$url           = $currentDomain.$_SERVER["REQUEST_URI"];
$sitename      = "Dotcentric";
$twittername   = "@dotcentric";
$sharing_image = '/img/logo.png';

PerchSystem::set_var('currentDomain',$currentDomain);
PerchSystem::set_var('url',$url);
PerchSystem::set_var('sitename',$sitename);
PerchSystem::set_var('sharing_image',$sharing_image);
PerchSystem::set_var('twittername',$twittername);

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

Layout, global.social.php

<perch:template path="pages/attributes/facebook.html" />
<perch:template path="pages/attributes/twitter.html" />

The template default.html

<meta property="og:site_name" content="<perch:pages id="sitename" type="hidden" />" />
<meta property="og:url" content="<perch:pages id="url" type="hidden" />" />
<meta property="og:title" content="<perch:pages id="og_title" label="Social title" type="text" escape="true" help="Title for this document with no branding or site name" divider-before="Facebook Open Graph Tags" />" />
<meta property="og:description" content="<perch:pages id="og_description" label="Social description" type="textarea" size="s" escape="true" />" />
<perch:if exists="og_image">
    <meta property="og:image" content="<perch:pages id="currentDomain" type="hidden" /><perch:pages id="og_image" label="Image when shared" help="Should be at least 1200x630" type="image" width="1200" />" />
    <perch:else />
    <meta property="og:image" content="<perch:pages id="currentDomain" type="hidden" /><perch:pages id="sharing_image" type="hidden" />" />
</perch:if>
<perch:if exists="og_type">
    <meta property="og:type" content="<perch:pages id="og_type" label="Facebook type" type="select" options="article,book,profile,website,video,music" allowempty="true" />" />
</perch:if>
<perch:if exists="og_author">
    <meta property="article:author" content="<perch:pages id="og_author" type="hidden" />" />
</perch:if>

facebook.html

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="<perch:pages id="twittername" type="hidden" />" />
<meta name="twitter:title" content="<perch:pages id="og_title" label="Social title" type="text" escape="true" help="Title for this document with no branding or site name" />" />
<meta name="twitter:description" content="<perch:pages id="og_description" label="Social description" type="textarea" size="s" escape="true" />" />
<perch:if exists="og_image">
    <meta property="twitter:image" content="<perch:pages id="currentDomain" type="hidden" /><perch:pages id="og_image" label="Image when shared" help="Should be at least 1200x630" type="image" width="1200" />" />
</perch:if>
<meta name="twitter:url" content="<perch:pages id="url" type="hidden" />" />

twitter.html

<?php include('../perch/runtime.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <?php perch_layout('global.head'); ?>
    <?php perch_layout('global.styles'); ?>
    <?php perch_layout('global.social'); ?>
    <?php perch_layout('global.analytics'); ?>
</head>
<body>...

blog\post.php

Any help would be greatly appreciated, Thanks.

Al Higgs

Al Higgs 1 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Which version of Perch are you using?

Just updated this morning to 2.7.4

Drew McLellan

Drew McLellan 2638 points
Perch Support

You might be better to use perch_page_attributes_extend() then

perch_page_attributes_extend([
    'currentDomain' => $currentDomain,
    'url' => $url,
    'sitename' => $sitename,
    'sharing_image' => $sharing_image,
    'twittername' => $twittername,
]);

Hi,

I'm trying to do the same thing at the moment, using 'perch_page_attributes_extend', but the meta code doesn't appear on the blog article pages.I assume it's some kind of problem with the path to the template that holds the meta tags.

I'm using the method as described in this article into a layouts template named 'global.header-blog.php' which contains the top part code of the HTML page. This layout template file is then linked via php intopost.php' file (which contains the blog template for my blog posts). post.php is located in a folder on the root of the site named 'blog'.

On the homepage is works fine, but there I'm using the exact code as described in the article. For the blog pages I have this code in place :

        <?php 
$domain        = 'https://'.$_SERVER["HTTP_HOST"];
$url           = $domain.$_SERVER["REQUEST_URI"];
$sitename      = "Arriva";
$twittername   = "@arriva_cc";
$sharing_image = '/img/eddy-caravan-header-x2.png';

PerchSystem::set_var('domain',$domain);
PerchSystem::set_var('url',$url);
PerchSystem::set_var('sharing_image',$sharing_image);
PerchSystem::set_var('twittername',$twittername);

# 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' 
      ));

?>

I don't know PHP… so I assume it's something basic I'm missing here that isn't explained in the article. I've already tweaked the last part (adding in the link to the template) that I think should be there, or maybe this part is not correct. I have no idea. Any help would be very much appreciated.

Thank you very much in advance, Veerle

Bump.

The descriptions of how to use customizable meta tags in Runway last/detail pages that use layouts is one of the most mind-bending tasks that I've yet had to face as a non-PHP expert. I wish there was a more detailed explanation specific to Runway that listed the exact steps, similar to the the one on the "Using Page Attributes to add Facebook Open Graph Tags and Twitter Cards" page.