Depuis plusieurs heures, twitter.com ma activé mes TweetCards. Mais qu’est-ce qu’un TweetCards me direz-vous?!
Twitter cartes permetent de joindre vos médias aux Tweets qui pointent vers votre contenu. Il suffit d’ajouter quelques lignes de code HTML à vos pages Web, et les utilisateurs qui Tweet liens vers votre contenu aura une «carte», a ajouté le Tweet qui est visible à tous leurs partisans.
En gros, le but est d’obtenir quelques chose comme cela:
Pour commencer, plusieurs liens utiles:
- La doc: https://dev.twitter.com/docs/cards
- Outils de prévisualisation: https://dev.twitter.com/docs/cards/preview
- Soumettre votre site: https://dev.twitter.com/form/participate-twitter-cards
Quelques code simple
Images redimensionnées:
1 2 3 4 5 6 7 8 9 | <meta name="twitter:card" content="photo"> <meta name="twitter:site" content="@examplephotosite"> <meta name="twitter:creator" content="@sippey"> <meta name="twitter:url" content="http://example.com/photo/a/"> <meta name="twitter:title" content="Good Morning, San Francisco"> <meta name="twitter:description" content="Great view this morning"> <meta name="twitter:image" content="http://example.com/photo/a/image.jpg"> <meta name="twitter:image:width" content="610"> <meta name="twitter:image:height" content="610"> |
Player Card
1 2 3 4 5 6 7 8 9 | <meta name="twitter:card" content="player"> <meta name="twitter:site" content="@examplevideosite"> <meta name="twitter:url" content="http://example.com/watch/a"> <meta name="twitter:title" content="Example Video"> <meta name="twitter:description" content="This is a sample video from example.com"> <meta name="twitter:image" content="http://example.com/keyframe/a.jpg"> <meta name="twitter:player" content="https://example.com/embed/a"> <meta name="twitter:player:width" content="435"> <meta name="twitter:player:height" content="251"> |
Twitter cards et Open Graph
1 2 3 4 5 6 7 | <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 time 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"> |
N’oubliez pas de soumettre votre site: https://dev.twitter.com/form/participate-twitter-cards
Merci à @Tarok pour l’astuce