Show a picture and a summary of blogs links on Twitter - TRENDYSTORIES22

إعلان الرئيسية

Popular Posts

translate

English French German SpainMore
TECH

Show a picture and a summary of blogs links on Twitter

Views:
Views
Certainly that marketing topics your site through social networking sites is significant, and the location of Twitter is an important source of targeted visitors can not ignore it, there are 300 million active users per month, so prefer posting links so well that contain tweet on (thumbnail + Title + summary Thread ) Once you've shared a link on Twitter, the contents of the link will appear automatically, like Facebook and Google Plus. 


Getting Started with Cards

To get started with implementing Cards markup, specify the type of card for your content by adding the following HTML markup to the HEAD section of the page:
<meta name="twitter:card" content="summary"></meta> 

Card properties are simple key-value pairs, each defined in an HTML meta tag as seen above. The combined collection of properties defines the overall card experience on Twitter, and each card type supports and requires a specific set of properties.

All cards have one basic property in common - the card type value:

But for Twitter it's different. Twitter Twitter has to be used to improve the appearance of links so I will explain how to activate this blogging feature.

To install blogger blogs:
Go to the Blogger dashboard and select the "Template" tab.
Edit a template after backing up it.
Search for <head> and add the following code immediately.

<!-- twitter card details --> 
<meta expr:content='data:blog.title' name='twitter:site'/> 
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<meta expr:content='data:blog.title' name='twitter:title'/> 
<b:if cond='data:blog.metaDescription'> 
<meta expr:content='&quot;read more&quot; + data:blog.pageTitle + &quot; &quot;' property='og:description'/> 
<meta expr:content='data:blog.metaDescription' property='og:description'/> 
<b:else/> 
</b:if> 
<meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.metaDescription'> 
<meta expr:content='&quot;read more&quot; + data:blog.pageName + &quot; turkeycelebs.com &quot; + data:blog.title + &quot;&quot;' name='twitter:description'/> 
<meta expr:content='data:blog.metaDescription' name='twitter:description'/> 
<b:else/> 
</b:if> 
</b:if> 
<b:if cond='data:blog.postImageUrl'> 
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> 
<b:else/> 
<b:if cond='data:blog.postImageThumbnailUrl'> 
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/> 

<b:else/> 
<meta content='http://2.bp.blogspot.com/-UsURhuC65KU/V4FOv4KHziI/AAAAAAAAIuw/l8obNGNMFF4X71AZt5DJp9EwLRGaPU3ZACK4B/s1600/new-logo.png' name='twitter:image:src'/> 
</b:if> 
</b:if> 
<meta content='summary_large_image' name='twitter:card'/> 
<meta content='@DrRo2' name='twitter:creator'/> 
<!-- end twitter card details --> 

Replace DrRo2 @ as the username of your Twitter account. 
Replace the green color logo link with your site logo 
Replace the blue color URL with your site title. 
The code can be tested through this site Card validator and see if it works correctly or not.



Twitter Cards and Open Graph


Twitter card tags look similar to Open Graph tags, and are based on the same conventions as the Open Graph protocol. When using Open Graph protocol to describe data on a page, it is easy to generate a Twitter card without duplicating tags and data. When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience.

The example below uses a mix of Twitter and Open Graph 
tags to define a summary card:


<meta name="twitter:card" content="summary" /><meta name="twitter:site" content="@nytimesbits" /> <meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their t[,ime trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />





Turn off ad block to see the magic below










  


Tags:

No comments:

Post a Comment

Thank you for your comment and we will respond to you soon

Contact Us

Contact Form

Name

Email *

Message *