Taco Steemers

A personal blog.
☼ / ☾

The Twitter share button does not need javascript

When we let Twitter generate a 'tweet this button' for our website, Twitter includes a javascript file. We don't need to include this javascript file. The share button can be just a hyperlink. Twitter uses the referrer header to determine which URL the user wants to tweet about.

The javascript does not benefit the reader. It might include tracking features that the reader does not like.

Twitter generates the following HTML:

<a href="https://twitter.com/share" 
    class="twitter-share-button" 
    data-via="{{TWITTER_USERNAME}}" 
    data-text="{{ article.title }}" 
    data-dnt="true" data-show-count="false" 
    data-count="horizontal">Tweet about this article</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

We only need the a-tag. The Twitter-specific anchor attributes become unused after removing the javascript. We can simplify the anchor to the following:

<a href="https://twitter.com/share?url=url_of_this_page">Tweet about this article</a>

In Pelican, the URL would be built up as follows:

https://twitter.com/share?url={{ SITEURL }}/{{ output_file }}

If we want to have an icon then we can do that with an image. To get the image file you can copy one from Twitter, or any other share button such as the one on this website.

<div>
    <img class="icon" src="/{{ THEME_STATIC_DIR }}/images/twitter.png" alt="Twitter"/>
    <a href="https://twitter.com/share">Tweet about this article</a>
</div>

The image would preferably be placed on a location that is yours. The src attribute needs to refer to the exact location of the image.