Twitter - кнопка "Поделиться", но с изображением

Question

Я хочу использовать обычную кнопку "Поделиться", как на этой странице https://twitter.com/about/resources/buttons но добавить встроенное изображение с моего сайта, а не просто ссылку.

Я знаю все о 1.1 api и загрузке, но сделать заявку на двоих, а затем попросить посетителя на моем сайте дать разрешение написать на его временной шкале, чтобы просто поделиться одним снимком с моего сайта, маловероятно, поэтому я думаю об альтернативах.

Я заметил, когда просто вставляешь ссылки с картинками, которые уже загружены в твиттер, в твит, если ты вставляешь ссылку как https://pbs.twimg.com/media/BPpk_KUCMNBXsPN.jpg это не будет встроено, но если вы вставите ссылку, как это pic.twitter.com/NuDSx1ZKwy это будет включено. Поэтому я думаю, что если я сделаю профиль и приложение, которое будет вызывать https://upload.twitter.com/1/statuses/update_with_media.json и загрузите картинку, а затем вставьте ссылку в кнопку "Поделиться", я получу твит с картинкой. Или есть лучший способ? Я использую php.

Answer 1

Посмотри в твиттер-карты.

Хитрость не в кнопке, а в странице, которой вы делитесь. Твиттер-карты извлекают изображение из метатегов, похожих на facebook обмен.

Пример:

<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">

Answer 2

Чтобы создать ссылку для публикации в Твиттере с фотографией, сначала нужно опубликовать фотографию в своем твиттере. После того, как вы написали в Твиттере, вам нужно взять ссылку на pic.twitter.com и поместить ее в свой URL для общего доступа в Твиттере.

примечание: вы не сможете видеть url pic.twitter.com, поэтому я использую отдельную учетную запись и нажимаю кнопку ретвита. Появится модал со ссылкой внутри.

Ваша ссылка в Твиттере будет выглядеть примерно так:

<a href="https://twitter.com/home?status=This%20photo%20is%20awesome!%20Check%20it%20out:%20pic.twitter.com/9Ee63f7aVp">Share on Twitter</a>

Answer 3

Вы правы, полагая, что для того, чтобы обмениваться изображениями таким образом, не переходя по маршруту Twitter Cards, вам нужно уже твитнуть изображение. Как вы говорите, также важно, чтобы вы взяли ссылку на изображение, которое имеет вид pic.twitter.com/NuDSx1ZKwy

Это пошаговое руководство стоит проверить для тех, кто хочет реализовать ссылку или кнопку "твитнуть это": http://onlinejournalismblog.com/2015/02/11/how-to-make-a-tweetable-image-in-your-blog-post/.

Answer 4

Я использовал этот код для решения этой проблемы.

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

Вы можете проверить документацию по tweet-button здесь tweet-button

Answer 5

Вы можете создать ссылку href следующим образом:

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

Вы можете получить ссылку на изображение, если оно было опубликовано первым. Перейдите к твиту, нажмите «Параметры» и нажмите «Встроить твит». Ссылку на изображение вы найдете в твите Embed.

Answer 6

Используя Javascript для создания кнопки Twitter, я использую классы Fontawesome для получения дизайна. Не забудьте добавить скрипт Fontawesome в заголовок HTML.

      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)
})