Twitter Cards for Web (basics)


#1

Hello. I have assumed that the best way of making a user in my website post a tweet with an image is with a Twitter Card. If I am wrong, it would be great to know which one is the best option instead.

I’m new to Twitter Cards, and don’t really get how do they work. I have my website with all the meta tags needed for a Large Image Twitter Card, but… how do I make a button (or link, or whatever) able to create the pop up with the Twitter Card content? Do I have to type some href? I really don’t know, and any help would be appreciated.

My intentions are:

  • Once you click a button in my website, open a popup with a text and an image (i guess that would be the content set in the meta tags).
  • Call a callback function once the user shares the content on Twitter (with my web as context, obviously).

And another question. Can I modify the content of the meta tags (via javascript) so the content of the Tweet changes once I click that button/link/whatever? For example, I want the user to be able to change the text in the description, and I allow him to change the default value with an input text, which i will use as content of the meta tag twitter:description. Will that work?

Thank you in advantage.


#2

Could anybody lend me a hand, please? I really need this for my website :wink:


#4

A Twitter card provides three major features: a link preview for your content; attribution for your site’s and webpage’s Twitter account; associating an iOS and/or Android app with your webpage.

A Tweet button populates a Tweet composer, which may include pre-filled text you define, a URL, and hashtags. The Twitter card content for the shared URL may appear alongside the Tweet.

Example Tweet with a Twitter card:


#5

That’s not what I asked at all…


#6

As @niall explained, you can use the Tweet Button to open a popup, and, as you ask subsequently, you can indeed add custom text in there (see the documentation on Twitter for Websites). You won’t see an image in the popup, but you can add your URL, and when the URL is shared on Twitter, the card can be attached based on the meta tags you include in your site markup.

There is an event available when the Tweet button is clicked, as we describe in this thread.