<commit_before>---
title: "TUTORIAL: Create A Custom 'Click to Tweet' link with JavaScript"
comments: true
author: <NAME>
layout: post
meta-excerpt: "Create an optimized, dynamic Click to Tweet link with JavaScript. Includes a demo and code samples."
permalink: /click-to-tweet-link/
has-home-img: click-to-tweet.jpg
category: tutorial
cat-name: "Tutorials"
tags: [tutorials]
---
"Click to Tweet" links are a highly-recommended way of promoting your site content. Politely asking readers to Tweet the content through their personal Twitter accounts often leads to them doing so when you give them an easy way to do it: it's proven to be an effective way of spreading your message.

I'm redesigning my blog with WordPress at the time of this post and am adding this functionality to the new design. I want the code optimized to run as fast as possible, so I'm using JavaScript to create this functionality instead of depending on a WordPress plugin...yes, __this code can work outside of WordPress__.

<h2 style="clear:both;">Table of Contents</h2>

1. [Some Notes](#notes)
2. [This Code Is Optimized](#optimized)
3. [A Simple Click To Tweet Link](#simple-link)
4. [Review The HTML & CSS](#html-css)
5. [Dealing with Complicated URLs](#complicated-url)
6. [Clean Up The Link With A Regular Expression](#regex)
7. [Conclusion](#conclusion)

<a name="notes"></a>
## Some Notes
This code only works if it runs on some sort of web server setup. So if you want to test it, you'll need to either run it on an actual website or simulate a web server on your local machine using something like [MAMP for Mac](https://www.mamp.info/ "Learn more about MAMP for Mac"), [WAMP for Windows](http://www.wampserver.com/ "Learn more about WAMP for Windows") or [XAMMP, which is cross-platform](https://www.apachefriends.org/index.html, "Learn more about XAMMP for Windows, Mac and Linux").

Due to how I build my posts, my final JS code requires a regular expression. It's a simple one but it still may be too complex for your needs; therefore, you may want to go directly to [the part of the post with the simple Click to Tweet code](#simple-link).

This Click to Tweet code is meant to work dynamically: it uses JavaScript (and SOME jQuery) to find elements on a web page, add attributes to one of them and set up click events...very dynamic. If you want to hard-code a Click to Tweet link, I suggest reading [Guillaume Piot's excellent tutorial](http://gpiot.com/blog/elegant-twitter-share-button-and-dialog-with-jquery/ "Read Guillaume Piot's Click to Tweet tutorial"), which was the main source of inspiration for my code.

Lastly, if you're using something like WordPress, Drupal or Jekyll to build a site, I'm assuming you can figure out how to use this code within it. In the case of my WordPress site, I'll have to (at the bare minimum) create a custom `footer.php` file for the single posts that's different from the one used for the non-post pages. All this requires creating custom WordPress PHP code, which you may not want to do. If this describes your situation, you may want to just use a plugin like [Click To Tweet for WordPress](https://wordpress.org/plugins/click-to-tweet-by-todaymade/ "Review the Click To Tweet plugin for WordPress").

<a name="optimized"></a>
## This Code Is Optimized
This code optimized to run as fast as possible in two ways:

1. __No need to use widgets.js:__ `widgets.js` is the core Twitter file for creating various kinds of Twitter buttons on a site. Not using it for this code means that my site will make one *less* server request. I should point out that Twitter prefers that your site use this file if it has any sort of Tweet sharing functionality, but it seems to work fine without it.

2. __No need for plugins:__ No need for any jQuery plugins, WordPress plugins, Drupal plugins or whatever. This code creates a very small footprint.

<a name="html-css"></a><commit_msg>update Click to Tweet post<commit_after>---
title: "TUTORIAL: Create A Custom 'Click to Tweet' link with JavaScript"
comments: true
author: <NAME>
layout: post
meta-excerpt: "Create an optimized, dynamic Click to Tweet link with JavaScript. Includes a demo and code samples."
permalink: /click-to-tweet-link/
has-home-img: click-to-tweet.jpg
category: tutorial
cat-name: "Tutorials"
tags: [tutorials]
---
"Click to Tweet" links are a highly-recommended way of promoting your site content. Politely asking readers to Tweet the content through their personal Twitter accounts often leads to them doing so when you give them an easy way to do it: it's proven to be an effective way of spreading your message.

I'm redesigning my blog with WordPress at the time of this post and am adding this functionality to the new design. I want the code optimized to run as fast as possible, so I'm using JavaScript to create this functionality instead of depending on a WordPress plugin...yes, __this code can work outside of WordPress__.

<h2 style="clear:both;">Table of Contents</h2>

1. [Some Notes](#notes)
2. [This Code Is Optimized](#optimized)
3. [A Simple Click To Tweet Link](#simple-link)
4. [Review The HTML & CSS](#html-css)
5. [Dealing with Complicated URLs](#complicated-url)
6. [Clean Up The Link With A Regular Expression](#regex)
7. [Conclusion](#conclusion)

<a name="notes"></a>
## Some Notes
This code only works if it runs on some sort of web server setup. So if you want to test it, you'll need to either run it on an actual website or simulate a web server on your local machine using something like [MAMP for Mac](https://www.mamp.info/ "Learn more about MAMP for Mac"), [WAMP for Windows](http://www.wampserver.com/ "Learn more about WAMP for Windows") or [XAMMP, which is cross-platform](https://www.apachefriends.org/index.html, "Learn more about XAMMP for Windows, Mac and Linux").

Due to how I build my posts, my final JS code requires a regular expression. It's a simple one but it still may be too complex for your needs; therefore, you may want to go directly to [the part of the post with the simple Click to Tweet code](#simple-link).

This Click to Tweet code is meant to work dynamically: it uses JavaScript (and SOME jQuery) to find elements on a web page, add attributes to one of them and set up click events...very dynamic. If you want to hard-code a Click to Tweet link, I suggest reading [Guillaume Piot's excellent tutorial](http://gpiot.com/blog/elegant-twitter-share-button-and-dialog-with-jquery/ "Read Guillaume Piot's Click to Tweet tutorial"), which was the main source of inspiration for my code.

Lastly, if you're using something like WordPress, Drupal or Jekyll to build a site, I'm assuming you can figure out how to use this code within it. In the case of my WordPress site, I'll have to (at the bare minimum) create a custom `footer.php` file for the single posts that's different from the one used for the non-post pages. All this requires creating custom WordPress PHP code, which you may not want to do. If this describes your situation, you may want to just use a plugin like [Click To Tweet for WordPress](https://wordpress.org/plugins/click-to-tweet-by-todaymade/ "Review the Click To Tweet plugin for WordPress").

<a name="optimized"></a>
## This Code Is Optimized
This code optimized to run as fast as possible in two ways:

1. __No need to use widgets.js:__ `widgets.js` is the core Twitter file used to  create various kinds of Twitter buttons on a site. Not needing it for this code means that my site will make one less server request. I should point out that Twitter prefers that you use this file on your site if when creating Tweet functionality, but the code seems to work fine without it.

2. __No need for plugins:__ No need for any jQuery plugins, WordPress plugins, Drupal plugins or whatever. This code creates a very small footprint.

<a name="html-css"></a>
{'fraction_non_alphanumeric': 0.07531273934133265, 'fraction_numerical': 0.002808271636456472, 'mean_word_length': 4.381181318681318, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 6, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1783373', 'n_tokens_mistral': 2150, 'n_tokens_neox': 2057, 'n_words': 1207}