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. !

Solution 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

Solution 2

I searched a little bit for a solution and one Solution is to use Twitter Cards

Maybe this thread will help you Twitter - share button, but with image

Comments

[user782104]

thanks for help.As you refer the image need to approve by twitter before, Then how can I share the dynamic content?

[som]

the image doesn't need to be approved, only your domain. it's also automatic, you usually get an email within minutes. It's part of card validation: cards-dev.twitter.com/validator

[user782104]

Thanks, it is now white list, the only problem left is how to create the share dialog

[user782104]

if like this :gpiot.s1.cotidia.com/twitter-share-demo , then the dialog does not have the share image preview

[som]

Those instructions will work fine or you could use a Tweet button dev.twitter.com/web/tweet-button. The image will show up once the tweet has been posted. If you want to see what it looks like, and make sure your image is embedded properly use the validator (link above)

[Cray]

Just an addition: Only websites providing a player card have to be whitelisted. See dev.twitter.com/cards/overview -> Get started in 5 simple steps