The secure CMS.

Welcome to Geeklog, Anonymous Saturday, November 23 2024 @ 02:59 am EST

Geeklog Forums

Adding support for Twitter Cards

 New Topic  Post Reply
 12/03/12 01:34pm (Read 4,035 times)  
Status: offline

Dirk

Site Admin
Admin
Registered: 01/12/02
Posts: 13073
Location:Stuttgart, Germany
magical
When you post a link on Twitter and the linked website supports Twitter Cards, Twitter will display a short summary of the article right there in the tweet. That's a neat feature that Twitter seems to be rolling out slowly - it doesn't work automatically, you have to apply for it.

Example: https://twitter.com/dirkhaun/status/273354551636140032

It also works when using a link shortener other than Twitter's own t.co: https://twitter.com/iblog0711/status/275547327991791616


Here's how to implement Twitter Cards in Geeklog:

Add the following function to your lib-custom.php:

Text Formatted Code

/**
* Create the meta tags for a Twitter Summary Card
*
* @param  object  $story  A Story object
* @return string          HTML meta tags for the Twitter Card
* @link https://dev.twitter.com/docs/cards
*
*/
function CUSTOM_twitterCard($story)
{
    global $_CONF;

    $meta = '';
    $m = array();

    // Card type: summary
    $m[] = '<meta name="twitter:card" content="summary"' . XHTML . '>';

    // Canonical URL of the article
    $url = COM_buildUrl($_CONF['site_url'] . '/article.php?story='
                        . $story->getSid());
    $m[] = '<meta name="twitter:url" content="' . $url . '"' . XHTML . '>';

    // Title: Twitter would truncate it at 70 characters, so we do it
    //        here to have more control over it.
    $title = $story->DisplayElements('page_title');
    if (empty($title) || (strlen($title) > 70)) {
        // if the page title is too long, try the story title
        $title = $story->DisplayElements('title');
    }
    if (strlen($title) > 70) {
        $title = COM_truncate($title, 70, '...');
    }
    $title = str_replace('"', '&quot;', $title);
    $m[] = '<meta name="twitter:title" content="' . $title . '"' . XHTML . '>';

    // Teaser text/description: Derive from introtext
    // Twitter would truncate this at 200 chars, so again we do it outselves.
    $s = $story->DisplayElements('introtext');
    $s = preg_replace('/<h[^>]*>.*<\/h.>/', '', $s); // get rid of <Hx> tags
    $s = COM_getTextContent($s);
    if (empty($s)) {
       $s = $story->DisplayElements('bodytext');
       $s = preg_replace('/<h[^>]*>.*<\/h.>/', '', $s);
       $s = COM_getTextContent($s);
    }
    if (strlen($s) > 200) {
        $s = COM_truncate($s, 200, '...');
    }
    $s = str_replace('"', '&quot;', $s);
    $m[] = '<meta name="twitter:description" content="' . $s . '"' . XHTML . '>';

    // add the first image from the article, if there is one
    $value = $story->DisplayElements('introtext') . ' '
           . $story->DisplayElements('bodytext');
    $imgs = preg_match("/<img[^>]*src=[\"']([^\"']*)[\"'][^>]*>(.*?)<\/a>/i",
                       $value, $matches);
    if (($imgs !== false) && ($imgs > 0)) {
        $m[] = '<meta name="twitter:image" content="' . $matches[1] . '"' . XHTML . '>';
    }

    if (count($m) > 0) {
        $meta = implode(LB, $m);
    }

    return $meta;
}
 


Then, open article.php and find the code that adds the HTML meta tags. Add this line just below that code:

Text Formatted Code

        // Meta Tags
        If ($_CONF['meta_tags'] > 0) {
            $meta_description  = $story->DisplayElements('meta_description');
            $meta_keywords  = $story->DisplayElements('meta_keywords');
            $headercode .= COM_createMetaTags($meta_description, $meta_keywords);
        }
        $headercode .= CUSTOM_twitterCard($story); // <-- add this line
 


And that's it, at least from Geeklog's side. Now when you call up an article and view the HTML, you should see 3 or 4 twitter meta tags in the page's header. Check that it works with the preview tool (linked from the Twitter Card description above). When it works, you can submit your Geeklog site for participation.

Note that I have no idea what Twitter's criteria are for accepting a site. They seem to check that the cards work (so use the preview tool to make sure), but it's not clear if they only accept certain sites or certain kinds of content. In my case, it took a little over a week to be accepted.

Some notes and observations:
  • Twitter does not seem to show a summary for tweets that were posted before the acceptance date. New tweets with those older URLs will show the summary, though.
  • Twitter cuts the title off at 70 characters and the description text at 200 characters. Instead of letting Twitter do this, the above code does it itself, so that you can tweak things locally when necessary.
  • Ideally, the description should be a summary written just for this purpose. Since we don't have a summary field in Geeklog, I tried to get away with the story's introtext.
  • If there are images in the article, the code simply picks the first one.
  • We seem to be missing an API in Geeklog to add metatags from a plugin or custom code, to avoid having to hack article.php ...


I'd be interested in ideas to create a better summary text. For now, I'm trying to write my articles with this feature in mind, but it's not always possible to make a text work as both an introduction and a summary.

If you have any improvements to the above code, please post them here.
 Quote
 New Topic  Post Reply
All times are EST. The time is now 02:59 am.
  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content