4

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

facebook share

Peter Wilson
  • 4,150
  • 3
  • 35
  • 62
user782104
  • 13,233
  • 55
  • 172
  • 312

2 Answers2

6

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
som
  • 2,023
  • 30
  • 37
  • thanks for help.As you refer the image need to approve by twitter before, Then how can I share the dynamic content? – user782104 Jul 08 '15 at 08:11
  • 1
    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: https://cards-dev.twitter.com/validator – som Jul 08 '15 at 22:18
  • Thanks, it is now white list, the only problem left is how to create the share dialog – user782104 Jul 09 '15 at 02:13
  • if like this :http://gpiot.s1.cotidia.com/twitter-share-demo/ , then the dialog does not have the share image preview – user782104 Jul 09 '15 at 02:14
  • Those instructions will work fine or you could use a Tweet button https://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) – som Jul 09 '15 at 04:21
  • Just an addition: Only websites providing a player card have to be whitelisted. See https://dev.twitter.com/cards/overview -> Get started in 5 simple steps – Cray Aug 03 '16 at 12:47
1

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

Community
  • 1
  • 1
Nico
  • 1,727
  • 1
  • 24
  • 42