Notification texts go here Contact Us Buy Now!

How to resolve Twitter is not displaying any images twitted from your blog or website? Check this.

rying to share a link from your blog or website to Twitter but images are not showing up o How to resolve Twitter is not displaying any images twitted from your blog or website? Check this.
Trying to share a link from your blog or website to Twitter but images are not showing up on Twitter? This post would probably help you to resolve the issue. Follow the steps in detail given below to show images on Twitter. Is it important to show images in tweets? Well, yes. People are generally more interested in checking out tweets if there are appropriate images along with the text. "Picture speaks a thousand words" still is common around here.

Usually, when we share links from our blogs or websites to Twitter, we don't want just a bunch of texts, hash tags and the URL but we expect some image to show up on our posts. But I found out the images does not show up on Twitter. Since, you are here, I am sure you have found out and looking for ways to let image appear on Twitter. So, let's get on with it.

Images on Twitter tweets are what Twitter calls "cards". There are four types of Twitter cards:
  • Summary Card: Title, description, thumbnail, and Twitter account attribution.
  • Summary Card with Large Image: Similar to a Summary Card, but with a prominently featured image.
  • App Card: A Card to detail a mobile app with direct download.
  • Player Card: A Card to provide video/audio/media.

In this post, we will be checking out the "Summary Card" and the "Summary Card with Large Image".

Sample code given on Twitter for Summary Card is as: (don't use as is)

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

The above code is just an example and is to be added in the META section of your blog or website so that the images appear on Twitter tweets.

Sample code given on Twitter  for Summary Card with Large Image is as:


<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

As stated, the above codes are just for example. Looking at the code, we can make out that the URL pertains to a single post. Usually, an admin or a visitor will be using Social Media sharing tools to share links to Blogger or compose a new tweet on Twitter and paste the URL there. So, the above sample codes won't work for every post. So we need to automate, so that the post's URL, Title, Image etc. appears appropriately for any post shared.

How to configure Twitter Cards on Blogger Blog (An Example)
Watch the video tutorial below to see how to configure Twitter Cards on Blogger Blog to display images on Twitter when sharing links from Blogger Blog. Modified Twitter code for Blogger Blog is provided below.



To show images on Twitter shared from Blogger or Blogspot blogs, use the code given below.

  • Login to Blogger
  • Go to Dashboard > Template >Edit HTML
  • Find <head>
  • Copy the code below and paste it right after <head> tag
  • Use summary or summary with large image code. The only difference between the two is the text - "summary" and "summary_large_image" in the code.
Code for Google's Blogger or Blogspot Blogs:
<!-- twitter summary card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@tiyiworo" />
<meta name="twitter:creator" content="@tiyiworo" />
<meta property="og:url" expr:content='data:blog.url' />
<meta property="og:title" expr:content='data:blog.pageName' />
<meta property="og:description" expr:content='data:blog.metaDescription' />
<meta property="og:image" expr:content='data:blog.firstImageUrl' />
<!-- twitter summary card -->

OR

<!-- twitter summary card with large image details -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@tiyiworo" />
<meta name="twitter:creator" content="@tiyiworo" />
<meta property="og:url" expr:content='data:blog.url' />
<meta property="og:title" expr:content='data:blog.pageName' />
<meta property="og:description" expr:content='data:blog.metaDescription' />
<meta property="og:image" expr:content='data:blog.firstImageUrl' />
<!-- twitter summary card-->

rying to share a link from your blog or website to Twitter but images are not showing up o How to resolve Twitter is not displaying any images twitted from your blog or website? Check this.
Twitter Card Validation Tool

An image should appear on the Twitter validation page.

Test Twitter Cards:

1) Login to your Twitter account
2) Copy the URL of a blog post from your Blogger Blog and paste it in a new Twitter Tweet
3) Check if image appears

Note: Twitter Cards that is, images from your Blog posts shared to Twitter might not appear immediately. Keep testing by sharing links from your blog after some time if it does not appear now.

How to show images on Twitter Tweets from other website / blogging platforms?

Apply the same code as given above but change the data provider for "content".  For example, in the above code for Blogger, we had changed:

content = 'data:blog.url'

because, that is how Blogger provides the URL of the blog post page. You can find out the code for the blogging platform or the website and replace in the same manner.

For WordPress, the following are the standard function / code for getting Site URL, Blog Post URL, etc.

//Get the URL of the site
<?php echo get_site_url(); ?>

//Get the URL of the blog post
<?php the_permalink(); ?>

//get the title of the blog post
<?php the_title(); ?>
 <!-- twitter summary card for Wordpress -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@tiyiworo" />
<meta name="twitter:creator" content="@tiyiworo" />
<meta property="og:url" content="<?php get_the_permalink(); ?>" />
<meta property="og:title" content="<?php get_the_title(); ?>" />
<meta property="og:description" content=<?php get_the_excerpt(); ?>" />
<meta property="og:image" content=<?phpwp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full ); ?> " />
<!-- twitter summary card -->


So by replacing the text after "content=" in the Twitter code with appropriate WordPress functions to get the title, url etc.we can show Twitter Cards from WordPress blogs as well.  But don't sweat! There are plugins for WordPress. Check out the Twitter Cards Meta WordPress plugin.


References:

Twitter Card Types: https://dev.twitter.com/cards/types
Troubleshooting: https://dev.twitter.com/cards/troubleshooting
Twitter Cards and Open Graph: https://dev.twitter.com/cards/getting-started#attribution

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.