Twitter - Schaltfläche zum Teilen, aber mit Bild

Question

Ich möchte den regulären Share-Button verwenden, wie auf dieser Seite https://twitter.com/about/resources/buttons#tweet, aber ein eingebettetes Bild von meiner Website hinzufügen, nicht nur den Link.

Ich kenne mich mit der 1.1 API und dem Hochladen aus, aber eine Twitter-Anwendung zu erstellen und dann den Besucher auf meiner Website um Erlaubnis zu bitten, auf seine Timeline zu schreiben, nur um ein Bild von meiner Website zu teilen, ist wahrscheinlich unwahrscheinlich Szenario, also denke ich über Alternativen nach.

Ich habe bemerkt, dass wenn man einfach Links von Bildern einfügt, die bereits auf Twitter hochgeladen wurden, in Tweets einfügt, wird der Link wie https://pbs.twimg.com/media/BPpk_KUCMNBXsPN.jpg nicht eingebettet, aber wenn man den Link wie pic.twitter.com/NuDSx1ZKwy einfügt, wird er eingebettet. Also denke ich, wenn ich ein Profil und eine App erstelle, die https://upload.twitter.com/1/statuses/update_with_media.json aufrufen und das Bild hochladen, und dann den Link im Share-Button einfügen, bekomme ich einen Tweet mit eingebettetem Bild. Oder gibt es einen besseren Weg? Ich benutze php.

Answer 1

Schau dir Twitter Cards an.

Der Trick liegt nicht im Button, sondern vielmehr auf der Seite, die du teilst. Twitter Cards ziehen das Bild aus den Metatags ähnlich wie beim Teilen auf Facebook.

Beispiel:

Answer 2

Um einen Twitter-Share-Link mit einem Foto zu erstellen, müssen Sie zuerst das Foto von Ihrem Twitter-Konto aus tweeten. Nachdem Sie es getweetet haben, müssen Sie den pic.twitter.com-Link ergreifen und diesen innerhalb Ihrer Twitter-Share-URL platzieren.

Hinweis: Sie können den pic.twitter.com-Link nicht sehen, also was ich mache, ist, ein separates Konto zu verwenden und auf die Retweet-Schaltfläche zu klicken. Ein Modal wird erscheinen mit dem Link darin.

Ihr Twitter-Share-Link wird ungefähr so aussehen:

Auf Twitter teilen

Answer 3

Du hast Recht, wenn du denkst, dass du, um ein Bild auf diese Weise zu teilen, ohne den Twitter Cards Weg zu gehen, das Bild bereits getweetet haben musst. Wie du sagst, ist es auch wichtig, dass du den Bild-Link in der Form pic.twitter.com/NuDSx1ZKwy hast

Dieser Schritt-für-Schritt-Leitfaden ist für alle empfehlenswert, die einen 'tweet this' Link oder Button implementieren möchten: http://onlinejournalismblog.com/2015/02/11/how-to-make-a-tweetable-image-in-your-blog-post/.

Answer 4

Sie können einen href-Link wie folgt erstellen:

Klicken Sie zum Tweeten

Sie können den Bildlink abrufen, wenn er zuerst getweetet wurde. Gehen Sie zum Tweet, klicken Sie auf Optionen & klicken Sie auf Tweet einbetten. Dort finden Sie den Bildlink im eingebetteten Tweet.

Answer 5

Mit Javascript wird ein Twitter-Button erstellt, dabei werden Fontawesome-Klassen verwendet, um das Design abzurufen. Denken Sie daran, das Fontawesome-Skript in den HTML-Head einzufügen.

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