1

I am using Twitter Intents as part of my theme and I can successfully share posts’ URLs on Twitter. However, I would like to be able to show the images of the shared posts. Is that even possible? I was thinking to make use of Twitter cards: https://dev.twitter.com/cards/overview Is that a viable solution? I guess I am trying to understand if what I am trying to do is even possible.

This is an excerpt from the code:

<div class="myclass>
<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode( the_permalink() ) ?>" target="_blank"><i class="icon-twitter"></i></a>
</div>

Thanks for your help.

1

Yes, what you want to implement is cards. This is basically the concept of injecting metadata into your site that tells Twitter how you want it to be presented. If you wanted to do it using code, you could implement it doing something like this (barebones version):

add_action( 'wp_head', 'wpse_add_twitter_metadata' );
function wpse_add_twitter_metadata() {
    global $post;
    printf(
        '<meta name="twitter:card" content="summary" />
        <meta name="twitter:title" content="%s" />
        <meta name="twitter:description" content="%s" />
        <meta name="twitter:image" content="%s" />',
        get_the_title( $post ),
        get_the_excerpt( $post ),
        get_the_post_thumbnail_url($post)
    );
}

With that configured, when someone goes to share your page with web intent or by copying and pasting the URL, Twitter should have the information it needs to generate the proper preview. With that said, I'd rely on a plugin to do something like this, personally. Social media API's and integrations like this are always changing and a free plugin like Yoast SEO will handle this for multiple social networks without having to implement it yourself.

  • Hi, thank you so much! This is brilliant, I have implemented it in my functions.php, but still when sharing the URL I cannot see any preview. I am testing it with my local instance, would that work? Am I missing anything obvious? Thank you – paranza Feb 28 '17 at 22:11
  • I wonder whether the issue is my actual a href code? – paranza Feb 28 '17 at 22:16
  • @paranza without being able to see your site, hard to say... But this tool should help figure out what might be going wrong cards-dev.twitter.com/validator – brianjohnhanna Feb 28 '17 at 22:26
  • Thanks for this, yes I checked that already and the only message I am returned with is: INFO: Page fetched successfully WARN: No metatags found The metadata you specified seem to be correct as per: dev.twitter.com/cards/types/summary (I think I should be using a summary card). Not sure what the issue is.... – paranza Feb 28 '17 at 22:57
0

I have ended up with the following:

function my_twitter_cards() {
    if (is_singular()) {
        global $post;
    $twitter_user = str_replace('@', '', get_the_author_meta('twitter'));
    $twitter_url = get_permalink();
    $twitter_title = get_the_title();
    $twitter_excerpt = get_the_excerpt();
    $twittercard_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
    $twittercard_thumb = $twittercard_image[0];
    if ($twitter_user) {
        echo '<meta name="twitter:creator" content="@' . esc_attr($twitter_user) . '" />' . "\n";
    }
    echo '<meta name="twitter:card" content="summary" />' . "\n";
    echo '<meta name="twitter:url" content="' . esc_url($twitter_url) . '" />' . "\n";
    echo '<meta name="twitter:title" content="' . esc_attr($twitter_title) . '" />' . "\n";
    echo '<meta name="twitter:description" content="' . esc_attr($twitter_excerpt) . '" />' . "\n";
    echo '<meta name="twitter:image" content="' . esc_url($twittercard_thumb) . '" />' . "\n";
    }
}
add_action('wp_head', 'my_twitter_cards');
  • Once moved to a publicly available website, the above twitter cards code worked fine. The issue is when you try to test it with the twitter card validator with a non publicly available website. – paranza Mar 11 '17 at 20:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.