64

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.

Improve this question

5 Answers 5

Reset to default
88

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">
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

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
@RaulRene cant you make the meta dynamic using a server language?
Yeah. Well ... generating pages like mypage?{hash} will do the trick. Have a single page and based on some hash serve different meta content
I think your <meta name="twitter:image:src" content="http://placekitten.com/250/250"> should be <meta name="twitter:image" content="http://placekitten.com/250/250"> THERE IS NO :src according to https://dev.twitter.com/cards/types/photo
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: cards-dev.twitter.com/validator
|
23

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>
Improve this answer

4 Comments

You dont need a separate account. Just hit delete button and this url will be displayed in confirmation dialog.
This is not really practical from an App that generate a photo, though...
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.
This used to work. But it does not any longer since they seem to have changed something. Does anyone know about a workaround?
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/.

Improve this answer

Comments

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.

Improve this answer

Comments

-1

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) })
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.