I am going to show you how to add a suggested tweet feature to the bottom of blog posts for web sites based on Jekyll.1 This technique requires no plugin and thus easily publishes to github pages without pre-building.

You will notice at the bottom of this post a twitter bubble with links, that if clicked, will show a popup to suggest a tweet linking to the current post. This is a great way to build your Twitter presence and build traffic to your blog. I added this capability to my minima Jekyll theme using the steps described below.

Prerequisites

I assume that you already have a github pages site already created and running. I also assume you use the minima theme. If you don’t, these techniques will work, but you may need to adapt to slight differences (name of layout page, for example).

Step By Step

Step 1

Create a suggested-tweet.html file in your _includes directory. Create the directory in the root of your project if it does not exist. Add this to your file.


<div class="entry-meta-suggested-tweet">
  <!-- Set Base URL  -->
  {% assign suggested_tweet_url_base = "https://twitter.com/intent/tweet" %}
  <!-- Select the text of the post to tweet -->
  {% if page.suggested_tweet.text %}
    {% assign suggested_tweet_text = page.suggested_tweet.text %}
  {% else %}
    {% assign suggested_tweet_text = page.title %}
  {% endif %}
  <!-- Build up the hashtags to tweet -->
  {% if page.suggested_tweet.hashtags %}
    {% capture suggested_tweet_hashtags %}
      {{ page.suggested_tweet.hashtags | join: "," }}
    {% endcapture %}
  {% elsif page.tags %}
    {% capture suggested_tweet_hashtags %}
      {{ page.tags | join: "," }}
    {% endcapture %}
  {% else %}
    {% assign suggested_tweet_hashtags = "" %}
  {% endif %}
  <!-- Build url string -->
  {% capture suggested_tweet_url_string %}
    {{ suggested_tweet_url_base }}?text={{ suggested_tweet_text | url_encode }}&url={{ page.url | absolute_url}}&via={{ site.twitter_username | cgi_escape | escape }}&hashtags={{ suggested_tweet_hashtags | lstrip | rstrip | url_encode}}
  {% endcapture %}

  <h3 class="suggested-tweet-title">Spread the Word</h3>
  <p>If you found this information helpful, I would appreciate a kind mention.</p>
  <a href="{{ suggested_tweet_url_string }}" class="suggested-tweet-bubble">
    <span class="suggested-tweet-text">{{ suggested_tweet_text }}</span>
    {% if page.suggested_tweet.hashtags %}
      {% for hashtag in page.suggested_tweet.hashtags %}
        <span class="suggested-tweet-hashtag">#{{ hashtag }}</span>
      {% endfor %}
    {% elsif page.tags %}
      {% for tag in page.tags %}
        <span class="suggested-tweet-hashtag">#{{ tag }}</span>
      {% endfor %}
    {% endif %}
    <span class="suggested-tweet-via">via @{{ site.twitter_username }}</span>
  </a>
  <p class="suggested-tweet-link">
    <svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#twitter' | relative_url }}"></use></svg>
    <a href="{{ suggested_tweet_url_string }}" class="icon-left icon-twitter">Click to Tweet</a> <small>(you may edit before posting.)</small>
  </p>
</div>

Step 2

Create a _layouts directory off of the root of your project if it does not exist. Grab the ./_layouts/post.html source code from the minima project and copy it to a new file of the same name in your project. Be sure to first select the github tag of the version applicable to your project’s minima theme. You can find this by looking in the Gemfile.lock file in the root of your project.

Put the following code in the spot you want the twitter bubble to appear in the post.html file:


  <!-- Build the suggested tweet -->
  {% if page.suggested_tweet.enable and site.twitter_username != blank %}
    {% include suggested-tweet.html %}
  {% endif %}

Step 3

Create a ./assets/main.scss file if it does not already exist. You’ll need the content below at a minimum. If you have other custom styles, you can add the -bubble styles below to your existing file. Make sure to start the file with front matter and remember the import statement to bring in existing theme styles.

---
---

@import "minima";

/* Add the twitter bubble style for the oval */
.suggested-tweet-bubble {
  position: relative;
  display: inline-block;
  margin-bottom: 1.33333em;
  padding: 1em 1em 1.125em;
  border-radius: 1em;
  background-color: #f6f6f6;
}

/* Add the twitter bubble style for the oval downward pointer */
.suggested-tweet-bubble::after {
  position: absolute;
  z-index: 2;
  bottom: -18px;
  left: 62px;
  content: '';
  border-width: 20px 20px 0;
  border-style: solid;
  border-color: #f6f6f6 transparent;
}

Step 4

In every post you want a suggested tweet to appear, add the following in your front matter:

suggested_tweet:                        # Tweet block will not appear if omitted.
  enable: true
  text: "Text in tweet"                 # Optional. Blog title used as default.
  hashtags: [any, hashtags, go, here]   # Optional. Blog tags used as default.

Step 5

At this point, the suggested tweet block should work. But you will notice the suggested tweet page navigates away from your blog. If you’d like a popup instead, the fix is simple2. Grab the head.htm file from the _layouts directory within the minima project and stick it in your _layouts directory. Mind the version. Then, add the following one-liner:

  <script src="//platform.twitter.com/widgets.js"></script>

You’ll get a popup like:

a screen shot of the suggested tweet popup window
Suggested Tweet Popup Window

Notes

I assume you have filled in your twitter handle in the _config.yml file. The suggested tweet will contain a via @{{site.twitter_username}} string. If you don’t, the tweet block will not show. This behavior can be changed with some minor mods.

  1. Many thanks to David Ensinger for his plugin described in Suggested Tweet Plugin For Jekyll. ↩

  2. I found this tip in How To Share Webpages With Twitter ↩