Share the link , title and one image in custom twitter share icon

Question

Here is the custom twitter icon code:

HTML:

<i id="twitter_share" class="fa fa-twitter fs20" style="position: relative; bottom: 4px;"></i>

And Jquery:

$('#twitter_share').click(function (e) {
    e.preventDefault();
    var loc = "<?= base_url(uri_string()); ?>";
    var title = "<?= $video->title; ?>";
    window.open('http://twitter.com/share?url=' + loc + '&text=' + title + '&', 'twitterwindow', 'height=450, width=550, top=' + ($(window).height() / 2 - 225) + ', left=' + $(window).width() / 2 + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});

It works fine with the url and title. The problem is , how can I share one image as well?

Thanks a lot for helping.

Update: reference in facebook in facebook I can share the content like this, can it be done in twitter as well? Thanks. !

Answer 1

The image comes from your HTML markup, which is scraped by twitter when someone tweets your url.

Twitter refers to the collection of meta info accompanying a tweet as a card, which they need to approve before it will appear on the network.

1. Have a good read through the Twitter Cards Developer page
2. Select an appropriate card (summary_large_image is a good one) and include the appropriate twitter meta tags in the head of your HTML
3. Validate your card on the Cards Validator page
4. Once your domain has been whitelisted any tweets with your url will also include your card