"Tweet This" links make it easy for your readers to share your posts on Twitter. And, with a little bit of code, it's pretty easy to make any text on your blog tweetable! Today I'm going to give you the tools to make click-to-Tweet links of your own.
What the Code Does
After a one-time setup, this code lets you make any sentence in your post tweetable in a few seconds. A link to your blog post is automatically added to the end of the Tweet. Here's a demo link, styled to match my blog with optional CSS I've included at the end of the tutorial:
I'm learning how to make click to Tweet links on #Blogger from @MMosley
The colors and Twitter icon are part of the CSS styling, and you can change them to suit your blog's style, or create a completely different design.
Compatibility
This works with all of the standard Blogger templates except Dynamic Views, which does not accept customization. This will also work with custom templates that have the same internal structure as a standard template.
For best results, make sure timestamp links are enabled for your blog (here's how to check). If you have timestamp links enabled, the tweet will include a link to your blog post at the end. If you don't, the tweet will link to the page your reader was on when they clicked the link. Often that's ok, but if your reader tweets from from your home page or an index page, visitors who click the link in the tweet may not end up on the right post.
All set? Let's get started!
Add the Twitter Code
If you already have the official Twitter timeline widget installed on your blog you can skip this step.Twitter has a code snippet that makes your tweet links open a new, small Twitter window, like this:
To install it: first, back up your template (instructions here). Do not skip the backup.
Next, open your template by clicking the "Edit HTML" button below your "Live On Blog" screenshot.
Then, open your template's search box by placing your cursor over the code, clicking once, and pressing CTRL and F at the same time (PC) or Command and F (Mac).
Enter </body> in the search box, then press enter. The code will "jump" to the </body> tag in your template and highlight it in yellow.
Paste the following line of code immediately above the </body> tag:
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
Then, press the orange "Save Template" button. Nothing will change on your blog yet — that comes later!
Add the HTML/JavaScript Gadget
Now, let's add the jQuery that makes your links tweetable!
Go to Layout and click an "Add a Gadget" space.
Select HTML/JavaScript from the popup menu and insert the following code into the gadget:
Save the gadget. Nothing will change on your blog yet, but it will after the next step.
Make Tweetable Links
Now that you have the code installed, you can make any text on your blog a tweetable link! Make sure to pick sentences that are 117 characters or less to leave room for the link to your post at the end of the tweet.
To make text tweetable, switch to the HTML view of your post and find the text you want to twitterize.
Wrap the text in <p></p> paragraph tags, like this:
<p>This is my tweetable text. Click to tweet it!</p>
Then, add the class of "tweetable" to the opening paragraph tag, like this:
<p class="tweetable">This is my tweetable text. Click to tweet it!</p>
You can use blockquote or span elements if you prefer, but I'm using the paragraph element here because it's a good fit for most blogs.
Save your post and check it out on your blog. Your text is now tweetable! Click it and see how it works.
Style Your Tweetable Links
At this point your link will just look like a regular link — but you want it to stand out, right? That's where CSS comes in.
I put an editable demo of a styled "tweetable" link on Codepen. You can play with it to customize the colors and styling.
Note: the "tweetable" link inside the demo won't open a new window when you click it because it's hosted on Codepen. Don't worry, that's just a Codepen thing — the code from this tutorial will open a new window on Blogger.
<div class="post-outer">
<a href="http://www.codeitpretty.com" class="timestamp-link"></a>
<p class="tweetable">I'm learning how to make tweetable links for #Blogger from @codeitpretty!</p>
</div>
See the Pen 6b71bca216f2c7eb6ed8c85e246cd482 by mariemosley (@mariemosley) on CodePen
When you have it styled the way you like it, copy everything in the CSS tab and paste it into your blog's CSS field (Template > Customize > Advanced > Add CSS). Press the orange "Apply to Blog" button to save your changes. Now all of your tweetable links will have style!
