Page 1 of 1

added automated meta tags, and disqus comments disappeared

Posted: Thu Dec 22, 2016 7:44 pm
by echobrin
I set up automated meta tags to share news posts on Facebook, as described here: http://www.cmscanbesimple.org/blog/base ... d-metatags. But now my disqus comments no longer appear below the post. I'm trying to figure out how to get the Disqus comments to appear, and I'm also not sure if Facebook sharing is working as it should -- it doesn't always get the description or correct image. Thanks for suggestions.

A blog post from my site: http://198.252.106.87/~benjami4/index.p ... eturnid=33

Page template:

Code: Select all

{strip}
    {process_pagedata}
    {$canonical_url = "{$content_obj->GetURL()|lower|default:''}" scope=global}
    {$root_url = "{root_url}" scope=global}
    {$theme_url = "{uploads_url}/_template" scope=global}
    {$site_name = "{sitename}" scope=global}
    {$page_description = "{description}" scope=global}
    {$page_image = "{$theme_url}/page_image.png" scope=global}
    {$page_lang = 'en' scope=global}
    {$page_modified = "{modified_date format='%e-%m-%Y'}" scope=global}
    {$page_title = "{title}" scope=global}
    {$content = "{content}" scope=global}
    {if empty($page_description)}
      {$page_description = $content|strip_tags|strip|truncate:150|default:'' scope=global}
    {/if}
{/strip}
<!doctype html>
<__html lang="{cms_get_language}">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">
      <!-- Viewport configuration, scaling options -->
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <!-- CSS Stylesheet -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/demo3/navigation-3.css" rel="stylesheet">
      <!-- Font Awesome icon -->
      <link href="{root_url}/css/font-awesome.min.css" rel="stylesheet">
      <!-- Google web font  -->
      <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,greek' rel='stylesheet' type='text/css'>
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!--[if lt IE 9]>
      <__script__ src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></__script>
      <__script__ src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></__script>
      <![endif]-->

	<title>{$page_title}</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">
	{metadata}
	{cms_stylesheet}

<meta name="application-name" content="{$site_name}">
<meta name="copyright" content="Copyright (C) Benjamin Groff, All Rights Reserved"> {* <- Change this *}
<meta name="description" content="{$page_description}">
<meta name="generator" content="CMS Made Simple - Copyright (C) 2004-{$smarty.now|date_format:'%Y'} CMSMS™. All rights reserved.">

<link rel="canonical" href="{$canonical_url}">

<meta property="og:description" content="{$page_description}">
<meta property="og:image" content="{$page_image}">
<meta property="og:site_name" content="{$site_name}">
<meta property="og:title" content="{$page_title}">
<meta property="og:type" content="website">
<meta property="og:updated_time" content="{$page_modified}">
<meta property="og:url" content="{$canonical_url}">

<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@wearetheguard"> {* <- Change this *}
<meta name="twitter:description" content="{$page_description}">
<meta name="twitter:domain" content="{$root_url}">
<meta name="twitter:image" content="{$page_image}">
<meta name="twitter:site" content="@wearetheguard"> {* <- Change this *}
<meta name="twitter:title" content="{$page_title}">
<meta name="twitter:url" content="{$canonical_url}">

</head>

</__body>
<a name="top"></a>
      <!-- Navigation -->
      <div class="my-nav">
         <nav class="navbar navbar-custom navbar-fixed-top mnav" role="navigation">
            <div class="container">
               <div class="navbar-header mnav">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fa fa-bars fa-2x"></i> </button>
               </div>
               <!-- Collect the nav links, forms, and other content for toggling -->
               <div class="collapse navbar-collapse navbar-right navbar-main-collapse mnav">
                  {Navigator loadprops=0 template='bootstrap-main-menu' number_of_levels="2"}
               </div>
            </div>
         </nav>
      </div>
      <!-- Intro Header -->
      <header>
         <div class="outer header-small" align="center">
         <span class="name">BENJAMIN<BR>GROFF</span>
         </div>
      </header>
<div class="container">
  <div class="row">
    <div id="post" class="col-sm-9">
      {$content|strip}
    </div>
    <div id="sidebar" class="col-sm-3">
      <div id="subscribe">
        <form>
           <span class="subscribe-header">Subscribe</span>
           <p style="padding: 5px;">Join 1,000,000+ who are in the loop and upgrading their lives!</p>
           <input type="text" name="name" placeholder="Name">
           <input type="text" name="email" placeholder="Email">
           <input type="submit" value="Send">
       </form>
      </div>
      <div id="LatestPosts">
        <h2><span class="header-text">Latest Posts</span></h2>
        <p>{news summarytemplate="News Summary Sidebar" number="3" moretext="CONTINUE READING"}</p>
      </div>
      <div id="ad">
      <img src="http://placehold.it/300x600" class="img-responsive">
      </div>
    </div>
  </div>
</div>
{global_content name='social'}
<div id="contact">
  <div class="container">
    <h2><span class="header-text">CONTACT</span></h2>
    <p>Duis sagittis mi vitae libero rutrum imperdiet. Donec tempor mauris sit amet odio luctus, sit amet varius magna sagittis. Morbi pulvinar viverra dui, cursus porttitor ipsum eleifend ac.</p>
{FormBuilder form='contact'}
  </div>
</div>

<div id="search">
<div class="container">
<span class="backtotop">{anchor anchor='top' text="<img src='{uploads_url}/images/back-to-top.png' alt='back to top'/>"}</span>
<h2>Find What You're Looking For</h2>
<div class="center">{search resultpage="search-results"}</div>
<hr width="100" style="border-width:3px;border-color:#07dfe9;">
<p style="text-align:center;font-size:30px;">BG</span>
</div>
</div>
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <__script__ src="js/jquery.min.js"></__script> 
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <__script__ src="js/bootstrap.min.js"></__script>
      <!-- Mynav Bar Script -->
      <__script__ src="{root_url}/js/demo3/mynavbar.js"></__script> 
      <__script__ src="{root_url}/js/scroll/smoothscroll.js"></__script> 

<__script__ id="dsq-count-scr" src="//benjamin-groff.disqus.com/count.js" async></__script>
<__body>
</__html>
News detail template:

Code: Select all

{$canonical_url = $entry->canonical|lower scope=global}
{$page_description = $entry->summary|default:$entry->content|strip_tags|strip|truncate:150 scope=global}
{$page_modified = $entry->modified_date|date_format:'%e-%m-%Y' scope=global}
{$page_title = $entry->title|cms_escape:htmlall scope=global}
{if !empty($entry->fields.photo->value)}
    {$page_image = "{uploads_url}/news/id{$entry->id}/{$entry->fieldsbyname.photo->value}" scope=global}
{/if}
{* News module entry object reference:
   ------------------------------
   In previous versions of News the 'object' returned in $entry was quite simple, and a <pre>{$entry|@print_r}</pre> would output all of the available data
   This has changed in News 2.12, the object is not quite as 'simple' as it was in previous versions, and that method will no longer work.  Hence, below
   you will find a referennce to the available data.

   ====
   news_article Object Reference
   ====

     Members:
     --
     Members can be displayed by the following syntax: {$entry->membername} or assigned to another smarty variable using {assign var='foo' value=$entry->membername}.

     The following members are available in the entry array:

     id (integer)           = The unique article id.
     author_id (integer)    = The userid of the author who created the article.  This value may be negative to indicate an FEU userid.
     title (string)         = The title of the article.
     summary (text)         = The summary text (may be empty or unset).
     extra (string)         = The "extra" data associated with the article (may be empty or unset).
     news_url (string)      = The url segment associated with this article (may be empty or unset).
     postdate (string)      = A string representing the news article post date.  You may filter this through cms_date_format for different display possibilities.
     startdate (string)     = A string representing the date the article should begin to appear.  (may be empty or unset)
     enddate (string)       = A string representing the date the article should stop appearing on the site (may be empty or unset).
     category_id (integer)  = The unique id of the hierarchy level where this article resides (may be empty or unset)
     status (string)        = either 'draft' or 'published' indicating the status of this article.
     author (string)        = The username of the original author of the article.  If the article was created by frontend submission, this will attempt to retrieve the username from the FEU module.
     authorname (string)    = The full name of the original author of the website. Only applicable if article was created by an administrator and that information exists in the administrators profile.
     category (string)      = The name of the category that this article is associated with.
     canonical (string)     = A full URL (prettified) to this articles detail view using defaults if necessary.
     fields (associative)   = An associative array of field objects, representing the fields, and their values for this article.  See the information below on the field object definition.   In past versions of News this was a simple array, now it is an associative one.
     customfieldsbyname     = (deprecated) - A synonym for the 'fields' member
     fieldsbyname           = (deprecated) - A synonym for the 'fields' member
     useexp (integer)       = A flag indicating wether this article is using the expiry information.
     file_location (string) = A url containing the location where files attached the article are stored... the field value should be appended to this url.


   ====
   news_field Object Reference
   ====
   The news_field object contains data about the fields and their values that are associated with a particular news article.

     Members:
     --------
     id (integer)  = The id of the field definition
     name (string) = The name of the field
     type (string) = The type of field
     max_length (integer) = The maximum length of the field (applicable only to text fields)
     item_order (integer) = The order of the field
     public (integer) = A flag indicating wether the field is public or not
     value (mixed)    = The value of the field.


   ====
   Below, you will find the normal detail template information.  Modify this template as desired.
*}

{* set a canonical variable that can be used in the head section if process_whole_template is false in the config.php *}
{if isset($entry->canonical)}
  {* note this syntax ensures that the canonical variable is set into global scope *}
  {assign var='canonical' value=$entry->canonical scope=global}
{/if}

<h3 id="NewsPostDetailTitle">{$entry->title|cms_escape:htmlall}</h3>

{if $entry->summary}
	<div id="NewsPostDetailSummary">
		<strong>
			{$entry->summary}
		</strong>
	</div>
{/if}


{if isset($entry->fields)}
  {foreach from=$entry->fields item='field'}
     <div class="PostImg">
        {if $field->type == 'file'}
	  {* this template assumes that every file uploaded is an image of some sort, because News doesn't distinguish *}
          {if isset($field->value) && $field->value}
            <img src="{$entry->file_location}/{$field->value}"/>
          {/if}
        {else}
          {$field->name}:&nbsp;{$field->value}
        {/if}
     </div>
  {/foreach}
{/if}

<div class="postDetails">
   {if $entry->postdate}
      <div class="NewsPostDetailDate">
         {$entry->postdate|date_format:"%B %e, %Y"}
      </div>
   {/if}
      <div class="share">
         {global_content name='share'}
      </div>
</div>
<div id="NewsPostDetailContent">
	{$entry->content}
</div>

{if $entry->extra}
	<div id="NewsPostDetailExtra">
		{$extra_label} {$entry->extra}
	</div>
{/if}
<div id="disqus_thread"></div>
<__script__>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = $canonical_url;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = $entry->id; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//benjamin-groff.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</__script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Re: added automated meta tags, and disqus comments disappear

Posted: Thu Dec 22, 2016 9:27 pm
by velden
In your news detail template it seems you have the disqus config/variables commented with /* */ AND there you didn't use the curly brackets around the smarty variables.

Unfortunately I'm typing on my phone else I'd post more details.

Not sure it's causing your issue BTW.

Re: added automated meta tags, and disqus comments disappear

Posted: Thu Dec 22, 2016 11:20 pm
by echobrin
Thanks for your reply. I have uncommented that section and added the curly brackets. Still no disqus displaying. Not sure if disqus was set up to actually function correctly before, but it was at least appearing below the post before I added the code for the automated meta tags.

Re: added automated meta tags, and disqus comments disappear

Posted: Fri Dec 23, 2016 4:10 am
by rotezecke
I added the script snippet

Code: Select all

<__script__>
var disqus_config = function () {
this.page.url = $canonical; 
this.page.identifier = $page_alias; 
} ;
(function() { 
var d = document, s = d.createElement('script');
s.src = '//benjamin-groff.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
d.body.appendChild(s);
} ) ();
</__script>
to the bottom of my template (after closing <__body> tag) and get a JS error
TypeError: a is null

...null;return b.style.visibility="hidden",a.appendChild(b),e=j(b,c,d),a.removeChil...
caused by the appended script itself.

[SOLVED] added automated meta tags, disqus comments disappea

Posted: Fri Dec 30, 2016 3:09 pm
by echobrin
I never quite got this working with the news module, but I solved my issue by changing my news posts to regular content items. Meta tags are working correctly with content items and it shares the correct info to Facebook.

It's not a perfect solution because I will have to manually update my "latest posts" section, but the site won't be updated frequently so it should be okay.

Thanks to those who offered help.