61

I want to use regular share button like on this page https://twitter.com/about/resources/buttons#tweet but to add an embedded image from my site, not just link.

I know all about 1.1 api and uploading, but making an tw application and then ask visitor on my site to give permission to write on his timeline just to share one pic from my site is not likely scenario, so I think about alternatives.

I've noticed when just paste links of pic that are already uploaded on twitter into tweet, if you paste link like https://pbs.twimg.com/media/BPpk_KUCMNBXsPN.jpg that is not going to be embeded, but if you paste link like this pic.twitter.com/NuDSx1ZKwy it will be embeded. So I think if I make profile and app that will call https://upload.twitter.com/1/statuses/update_with_media.json and upload pic, and then paste link in share button I will get tweet with pic embeded. Or there is better way? I use php.

S S
  • 987
  • 1
  • 9
  • 20

6 Answers6

83

Look into twitter cards.

The trick is not in the button but rather the page you are sharing. Twitter Cards pull the image from the meta tags similar to facebook sharing.

Example:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@site_username">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:creator" content="@creator_username">
<meta name="twitter:image" content="http://placekitten.com/250/250">
<meta name="twitter:domain" content="YourDomain.com">
wittich
  • 2,079
  • 2
  • 27
  • 50
t q
  • 4,593
  • 8
  • 56
  • 91
  • 8
    This is a nice feature indeed, but unfortunately it works only for static pages. If you have a sort of a quiz page that generates results based on the user's input, there's no way to share a different image for each user – Raul Rene Oct 16 '15 at 06:57
  • 2
    @RaulRene cant you make the meta dynamic using a server language? – t q Oct 16 '15 at 14:52
  • 3
    Yeah. Well ... generating pages like mypage?{hash} will do the trick. Have a single page and based on some hash serve different meta content – Raul Rene Oct 16 '15 at 19:55
  • If you render universally/isomorphically you can use something like helmet to change the meta tags on load. This allows scrapers to get dynamic meta tag information and populate the associated data – Peege151 Nov 23 '15 at 16:03
  • can anyone please take a look at this.. http://stackoverflow.com/questions/34430871/working-example-of-tweet-with-image-using-javascript-django – vijay shanker Dec 23 '15 at 11:46
  • 9
    I think your `` should be `` THERE IS NO `:src` according to [https://dev.twitter.com/cards/types/photo](https://dev.twitter.com/cards/types/photo) – Prodigy Jul 22 '16 at 08:30
  • 1
    Important is actually that `twitter:card` is set to the string `summary_large_image`. _I did first the mistake and changed this string._ To validate the result it helps to use: https://cards-dev.twitter.com/validator – wittich Jul 06 '18 at 10:15
  • I am not able share the image using meta tag. So I have question regarding what size of image will work and Is it required only square image.? – Maulik Patel Apr 05 '20 at 05:44
  • @MaulikPatel can you share a link or post a question with your code. – t q Sep 17 '20 at 17:41
  • @RaulRene I think i have a similar problem to implement. Sharing function would share the image base on user choice from the slider? Did you manage to solve yours ? – Dev01 Jan 15 '21 at 18:25
22

To create a Twitter share link with a photo, you first need to tweet out the photo from your Twitter account. Once you've tweeted it out, you need to grab the pic.twitter.com link and place that inside your twitter share url.

note: You won't be able to see the pic.twitter.com url so what I do is use a separate account and hit the retweet button. A modal will pop up with the link inside.

You Twitter share link will look something like this:

<a href="https://twitter.com/home?status=This%20photo%20is%20awesome!%20Check%20it%20out:%20pic.twitter.com/9Ee63f7aVp">Share on Twitter</a>
Michael Sørensen
  • 191
  • 2
  • 14
Amy Leaman
  • 308
  • 2
  • 6
  • 1
    You dont need a separate account. Just hit delete button and this url will be displayed in confirmation dialog. – tenphi Feb 01 '16 at 21:37
  • 5
    This is not really practical from an App that generate a photo, though... – Alexis Wilke Aug 02 '16 at 04:40
  • This is, indeed, a very interesting answer. Static page metas won't help at all in creating individual share links similar to what you can do with Facebook and Pinterest. – Garavani Jun 25 '17 at 07:11
  • 2
    This used to work. But it does not any longer since they seem to have changed something. Does anyone know about a workaround? – Garavani Sep 17 '19 at 14:13
7

You're right in thinking that, in order to share an image in this way without going down the Twitter Cards route, you need to to have tweeted the image already. As you say, it's also important that you grab the image link that's of the form pic.twitter.com/NuDSx1ZKwy

This step-by-step guide is worth checking out for anyone looking to implement a 'tweet this' link or button: http://onlinejournalismblog.com/2015/02/11/how-to-make-a-tweetable-image-in-your-blog-post/.

philipnye
  • 352
  • 1
  • 3
  • 16
1

You can create an href link like this:

<a href="https://twitter.com/intent/tweet?url=myUrl&text=myTitle https://pic.twitter.com/kyQ3DWS9LH&name=medium&hashtags=quickbankingapp,USSD,ussd" target="_blank">Click to tweet</a>

You can grab the image link if it has been tweeted first. Go to the tweet, click on options & click Embed tweet. You will find the image link in the Embed tweet.

CodeGreenie
  • 11
  • 1
0

Using Javascript to create a twitter button, I use Fontawesome's classes for fetching the design. Remember to add the Fontawesome script in your HTML head.

let twitter_btn = document.createElement("i")
twitter_btn.className = "fa-brands fa-twitter-square fa-xl"
twitter_btn.setAttribute("index", array_index)
element.appendChild(twitter_btn)
twitter_btn.addEventListener("click", () => {
   let url = "https://twitter.com/intent/tweet?url=" + params.url + 
   "&text=" + params.text
   window.open(url)
})
Crypto-Frank
  • 142
  • 6
-1

I used this code to solve this problem.

<a href="https://twitter.com/intent/tweet?url=myUrl&text=myTitle" target="_blank"><img src="path_to_my_image"/></a>

You can check the tweet-button documentation here tweet-button

Michael Sørensen
  • 191
  • 2
  • 14
Kenany
  • 446
  • 3
  • 11
  • 2
    They were't asking how to make an image the button, they were asking how to add media to the tweet via a share link. – BritishSam Jan 25 '23 at 08:30