"Tweet This" Links with Images: A Simpler Guide
How important is a "TWEET THIS" bit in a blog?
I don't know, honestly.
But let's say you want to do that. There are lots of websites that will do this for you for free, and many have tracking and all sorts of things. But maybe you want to do this yourself.
Why? Well, perhaps you like control. Okay, sure. But the biggest reason is that if you want to be able to have people tweet an image that will show up as a NATIVE TWITTER IMAGE, which will pop right there under the tweet in people's feeds, you will need to learn how to take this process apart.
I learned this from the tutorials at onlinejournalismblog.com, the first on making clickable text tweets and the second on making image tweets. But, honestly, these are not NEARLY as easy to figure out as the writers think. I had to go to Twitter developer stuff (here and here) to figure out the details. I have taken their lessons and repackaged it into an easier, image-laden, more step-by-step format.
Here goes.
For example, let's say I wanted to have this image have some kind of "tweet me" message next to it, or in a caption, or whatever (If you want to make the image itself something that will generate a tweet when you click it, go down to the bottom section of this post for that -- that is usually not what people want). Like this:
 |
| Tweet this image! |
That's the full monty version. Maybe you just want the picture and no additional weblink, or maybe you want the "via" @you gone. Easy enough. Let's take all this apart.
You are making a temporary webpage (that's the browser window that opens) that gives Twitter instructions to make the tweet once the person who clicked logs in. You will need to hyperlink to that place. If you are a blogger and can't make something into a hyperlink, well, um, there is usually a nice button on the top of your blogging software to do that for you, or you can program it with full on "<a href . . ." html to prove that you know some code, bro. #nojudgments
You make this web destination with the "intent" command. Your code generates the webpage you need on the fly when they click on it, so all we have to do is work with the code.
Let's take a look at that code:
https://twitter.com/intent/tweet?text=How%20to%20ACETHIS:%207%20keys%20to%20public%20speaking%20bit.ly/advicetiles%20pic.twitter.com/s90qVND0Cc&via=morebrainz
As we break this down, I will demonstrate how to customize the pieces you want and to remove the parts you don't (I find this easier than instructions for how to add things. I don't know why).
The Intent Command
https://twitter.com/intent/tweet?
This is the basic setup that tells Twitter to make a page with a command to tweet. No matter what, you have to have this part, just as it is (Note that there are other "intent" commands besides "tweet," so you can knock yourself out and learn that, but that is for different tasks than this post is about).
The Parameters
These are additional instructions you can add to the instructed tweet. In this case, adding text to the tweet (I know, right, why would you NOT want this?) and adding the "via" username command:
text=
After this parameter, you input the text.
&via=
To add the additional parameter, you need the ampersand ("&"). The via command allows you to basically @ yourself, so if you don't want to do this, just leave this command and your @ off. Again, there are more of these parameters if you want to go crazy with it.
The Tweet Text
How%20to%20ACETHIS:%207%20keys%20to%20public%20speaking
These are your words, separated by the html replacement for a space (like, hitting the space bar once, you know?), which is that weird "%20". You can just write the words, drop it into a browser window and then copy the address of the new window, which your browser will convert to this form. I'd rather just program it correctly to start with.
You can also add extra %20s in order to add extra spaces and stuff like that.
A Web Address Destination
%20bit.ly/advicetiles
Do you want to make a clickable link in the text? You add that right away with a %20 immediately after the text of the tweet. You can have a super-long address if you like. Twitter will shorten it. But I like custom bitly links anyway, so I just put that in there.
If you don't want a link, you leave this out.
The Picture
%20pic.twitter.com/s90qVND0Cc
Okay. This is the hardest part. Make sure you have a beverage handy. Dehydration is a real danger when it comes to technology. You've been here awhile already.
The trick here is that you need to tweet the image first yourself to give Twitter a stable inside-of-Twitter destination to find your image for the person who clicks.
Tweet it and then see your tweet in your feed. Then you will want to click to open the tweet. An easy place to click to do this is the time stamp I circled in red here:
When you do that it will open up in a white subwindow on top of the greyed-out rest of the page. You will need to RIGHT-CLICK on the white space:
Then select "View page source" from the menu that will appear:
That will bring up a huge page full of the code that renders this tweet with this image. It will look horrible to most of you, with lots of text like this:
You are going to totally chill about this mess. Remember, you have that beverage. Sip it. Good. Sip again. Calm the hell down, now.
You are doing all of this because this is the only place you can find the exact Twitter location for your image that you tweeted. The only place. If there was a friendlier place, I promise I would have sent you there.
Okay, when you are on that page of the the page source text spew hit "Ctrl F" (that means holding the "Ctrl" button down [somewhere at the corner of your keyboard] an then hitting the letter "f" at the same time). This opens the "Find" menu. I'm using Chrome, so it looks like this:
You are going to search for "pic.twitter." Your browser might start highlighting things on the page as you type. That's okay. Wait until it gives you the full phrase. Then you will have that and a string of characters which end at the </a> tag for closing a link. In my case it looks like this:
pic.twitter.com/s90qVND0Cc
If you remember what we are doing, you are going to highlight that and put it in our Twitter command:
%20pic.twitter.com/s90qVND0Cc
Of course, you will add that %20 at the beginning to make sure everything works right.
If it does, it will attach the picture to the tweet they send. Their display on the webpage you created for them will have the "pic.twitter/etc" in their tweet window, but in their actually tweet, that command will convert to the image. You can see that again in the first three images in this post.
Hey, look at that! That was the hard part!
The Via Command
morebrainz
This is where you direct their ultimate tweet to @ you. The via command, which you learned how to append to this mess earlier, is followed by your Twitter username WITHOUT THE @.
Putting It All Together
So there you have it. You can now recreate this feature.
https://twitter.com/intent/tweet?text=How%20to%20ACETHIS:%207%20keys%20to%20public%20speaking%20bit.ly/advicetiles%20pic.twitter.com/s90qVND0Cc&via=morebrainz
I still can't guarantee anyone would actually click anything on your blog to tweet it, but that's a different sort of problem.
Making the Image Itself Clickable
Earlier I suggested you might not want to do this.
How do your readers know that if you click the image it will tweet it out? You could have a text message next to it telling them to, but then you are not really adding anything to their experience.
How do your readers know that if you click the image it will tweet it out? You could have a text message next to it telling them to, but then you are not really adding anything to their experience.
I suppose you could establish a pattern in your blog that all pictures are tweetable? But do you really want them all to be tweetable? And how are new readers going to learn this pattern?
Anyway, if you want to do this, you have to do all the steps above and then you have to edit the html of your picture to make it into a link. Blogger or Wordpress do not do this on their regular "Compose" or "Visual" menus. You might use another blogging platform, but who are we kidding?
Each platform lets you go into html and you can change all of this. Here's the way Blogger made the html for my first image in this blog:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcFEnNW6c3JzyzPm2HEEEprcuZWCcOizX9qGx2am57EZMjMFXQcwkrt2jq4wwryzfPkGmffYpB8aCrKo8DzgukNDxtpW5fPcAWCkGpqi8ojZSqYauUEVqW7UVgIKrnVoQytGG29kBsnqs7/s1600/acethis.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: "trebuchet ms" , sans-serif;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcFEnNW6c3JzyzPm2HEEEprcuZWCcOizX9qGx2am57EZMjMFXQcwkrt2jq4wwryzfPkGmffYpB8aCrKo8DzgukNDxtpW5fPcAWCkGpqi8ojZSqYauUEVqW7UVgIKrnVoQytGG29kBsnqs7/s400/acethis.png" width="400" /></span></a>
Yeah, ok. Part of this is that Blogger makes images into links to the image itself. Weird, I know, but it means that when you click an image in a blogger blog it opens up that image full-screen, like opening a tweet. This way you can make the image smaller in your blog and they can click to blow it up.
Yeah, I know. Whatever, right? Here's the thing: that coding makes it easier to turn an image into something that takes people somewhere else when they click it.
In this case, you want to replace the first instance of the web address in the code, the bit in yellow, with the entire text of the customized web address you built earlier in this blog post. The yellow bit of the link code is the destination the user will go to when they click. The second time it shows up, the pink, is what the page displays that is clickable, which you don't want to change.
In Wordpress, an image is coded more simply, like this :
<img class="alignnone size-full wp-image-18" src="https://comm339.files.wordpress.com/2017/02/acethis.png" alt="acethis" width="1987" height="1987" />
That is the equivalent of the pink portion in the Blogger code. So you'd have to add all the rest: the red and the yellow (replaced with the other code you developed before).
So here's how it turns out:
Incidentally, all the rest of the code commands in these two examples, anchors, spans, classes and margins, are instructions for how to render the image on the screen. Being able to manipulate the code for that is not exactly fun if you don't like learning html and css, so probably just leave that stuff the way your blog made it for you.
I still don't know if any of this matters! But that's kind of like all of blogging and social media rolled up into one dilemma, right? You can try it and see.
Likely, you are here because you already think it is a good idea and, like me, you thought the other guides were too hard to get through correctly. Or perhaps someone at your newly acquired social media job or internship said, "Hey, could you make click-to-tweet stuff without using that website?" and you said "Yes I can," because that's how Sheryl Sandberg told us to roll.
Good luck.
Each platform lets you go into html and you can change all of this. Here's the way Blogger made the html for my first image in this blog:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcFEnNW6c3JzyzPm2HEEEprcuZWCcOizX9qGx2am57EZMjMFXQcwkrt2jq4wwryzfPkGmffYpB8aCrKo8DzgukNDxtpW5fPcAWCkGpqi8ojZSqYauUEVqW7UVgIKrnVoQytGG29kBsnqs7/s1600/acethis.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: "trebuchet ms" , sans-serif;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcFEnNW6c3JzyzPm2HEEEprcuZWCcOizX9qGx2am57EZMjMFXQcwkrt2jq4wwryzfPkGmffYpB8aCrKo8DzgukNDxtpW5fPcAWCkGpqi8ojZSqYauUEVqW7UVgIKrnVoQytGG29kBsnqs7/s400/acethis.png" width="400" /></span></a>
Yeah, ok. Part of this is that Blogger makes images into links to the image itself. Weird, I know, but it means that when you click an image in a blogger blog it opens up that image full-screen, like opening a tweet. This way you can make the image smaller in your blog and they can click to blow it up.
Yeah, I know. Whatever, right? Here's the thing: that coding makes it easier to turn an image into something that takes people somewhere else when they click it.
In this case, you want to replace the first instance of the web address in the code, the bit in yellow, with the entire text of the customized web address you built earlier in this blog post. The yellow bit of the link code is the destination the user will go to when they click. The second time it shows up, the pink, is what the page displays that is clickable, which you don't want to change.
In Wordpress, an image is coded more simply, like this :
<img class="alignnone size-full wp-image-18" src="https://comm339.files.wordpress.com/2017/02/acethis.png" alt="acethis" width="1987" height="1987" />
That is the equivalent of the pink portion in the Blogger code. So you'd have to add all the rest: the red and the yellow (replaced with the other code you developed before).
So here's how it turns out:
Incidentally, all the rest of the code commands in these two examples, anchors, spans, classes and margins, are instructions for how to render the image on the screen. Being able to manipulate the code for that is not exactly fun if you don't like learning html and css, so probably just leave that stuff the way your blog made it for you.
Conclusion
I still don't know if any of this matters! But that's kind of like all of blogging and social media rolled up into one dilemma, right? You can try it and see.
Likely, you are here because you already think it is a good idea and, like me, you thought the other guides were too hard to get through correctly. Or perhaps someone at your newly acquired social media job or internship said, "Hey, could you make click-to-tweet stuff without using that website?" and you said "Yes I can," because that's how Sheryl Sandberg told us to roll.
Good luck.
