Missing ‘Read Full Story’ Link

What exactly does the “Read Full Story” link do within the Apple News context?

The “Read Full Story” Link allows users to scroll down to the bottom of the article and be taken to the original article loaded within a child browser.

Example Publishers with this feature on their articles are “Fox Sports” and “Entrepreneur”

I noticed this, too. Moving from RSS publication to API publication with this plugin resulted in this going missing. Here are screenshots from our Apple News page with the differences. It’s just a link to the canonical URL. Seems Apple was putting it in automatically for RSS-based articles, but leaving that formatting up to you/us for API-based ones… and I’d love the option of putting it back in. ??

I was digging into a solution for this and trying to use some of the filters. Using the apple_news_exporter_content_pre filter it’s possible to add the link and content to the end of the body, but there doesn’t seem to be nay way to control the styles or formatting to match the original look.

I then saw the apple_news_initialize_components would that work for adding additional role:body elements and styles?

So we came up with a solution for this that seems to work. I wish I had more control over the display formatting, but at least this bring back the missing functionality. The solution involves making two filter calls. We put these in a custom theme plug-in, but they could also be added to the functions.php file of your theme.

The first call uses the apple_news_generate_json filter. In it I add a couple of textStyles JSON entries to the top level properties on main JSON object. These will be used to apply in-line text styles to the markdown code which you’ll see later. See Apple’s docs on the textStyle for more info. Here is the code:

function add_text_styles_to_apple_news($json, $content_id) {
  
  /* Add custom inline styles */
  $json['textStyles'] = array(
    'read-original-url' => array(
      'fontName'    => 'AvenirNext-Regular',
      'fontSize'    => 14,
      'textColor'   => '#0a5785',
    ),
    'read-original-link' => array(
      'fontName'    => 'AvenirNext-Bold',
      'fontSize'    => 14,
      'textColor '  => '#666',
    )
  );

  return $json;
}

add_filter( 'apple_news_generate_json', 'add_text_styles_to_apple_news', 10, 2 );

This defines two new textStyles: read-original-url and read-original-link. These can be used later using Apple News’ inline text style. The basic format is Example of [text to be styled]{read-original-url} where the text you want to apply the style to is in the square braces and the style to apply to it is in the curly braces (in this example the read-original-url style which we defined with the filter call above).

The second filter call we used is apple_news_exporter_content_pre. In here we are simply appending the “Read Original” text and link to the content before it’s parsed by the Apple News plugin. Here’s the code:

function add_content_to_apple_news($content, $ID) {

 $post = get_post($ID);

 //create the Read Full Story link and apply the styles
 $link = sprintf('<p>[Read Original:]{tmo-read-original-link} [[%s](%s)]{read-original-url}</p>', $post->post_title, get_permalink($ID) );

  $content .= $link; //append link to content

  return $content;
}
add_filter( 'apple_news_exporter_content_pre', 'add_content_to_apple_news', 10, 2 );

This is fairly straight forward. We grab the post object using the $ID and then build out our link content and append it to $content and return it.

That’s it. For us this is working well. In our case the result looks like this:

• This reply was modified 7 years, 7 months ago by maccast.

Not sure what happened, but I had posted out solution to this, but when I tried to add a screenshot the whole post disappeared. I attempted to re-post it, but nothing is happening. In case it never shows back up here is a gist with the same content: https://gist.github.com/phylaxis/db31ae99fc5670235d810311fb09eddb

• This reply was modified 7 years, 7 months ago by maccast.
• This reply was modified 7 years, 7 months ago by maccast. Reason: Adding link to GIST

So we came up with a solution for this that seems to work. I wish I had more control over the display formatting, but at least this bring back the missing functionality. The solution involves making two filter calls. We put these in a custom theme plug-in, but they could also be added to the functions.php file of your theme.

The first call uses the apple_news_generate_json filter. In it I add a couple of textStyles JSON entries to the top level properties on main JSON object. These will be used to apply in-line text styles to the markdown code which you’ll see later. See Apple’s docs on the textStyle for more info. Here is the code:

function add_text_styles_to_apple_news($json, $content_id) {
  
  /* Add custom inline styles */
  $json['textStyles'] = array(
    'read-original-url' => array(
      'fontName'    => 'AvenirNext-Regular',
      'fontSize'    => 14,
      'textColor'   => '#0a5785',
    ),
    'read-original-link' => array(
      'fontName'    => 'AvenirNext-Bold',
      'fontSize'    => 14,
      'textColor '  => '#666',
    )
  );

  return $json;
}

add_filter( 'apple_news_generate_json', 'add_text_styles_to_apple_news', 10, 2 );

This defines two new textStyles: read-original-url and read-original-link. These can be used later using Apple News’ inline text style. The basic format is Example of [text to be styled]{read-original-url} where the text you want to apply the style to is in the square braces and the style to apply to it is in the curly braces (in this example the read-original-url style which we defined with the filter call above).

The second filter call we used is apple_news_exporter_content_pre. In here we are simply appending the “Read Original” text and link to the content before it’s parsed by the Apple News plugin. Here’s the code:

function add_content_to_apple_news($content, $ID) {

 $post = get_post($ID);

 //create the Read Full Story link and apply the styles
 $link = sprintf('<p>[Read Original:]{tmo-read-original-link} [[%s](%s)]{read-original-url}</p>', $post->post_title, get_permalink($ID) );

  $content .= $link; //append link to content

  return $content;
}
add_filter( 'apple_news_exporter_content_pre', 'add_content_to_apple_news', 10, 2 );

This is fairly straight forward. We grab the post object using the $ID and then build out our link content and append it to $content and return it.

That’s it. For us this is working well. In our case the result looks like this

Sorry for the double post, but I can’t seem to delete now.

Here’s the missing screenshot: