Tweet and Share Buttons Your Way

How to Automatically Generate Twitter and Facebook Tweet/Share Buttons with JavaScript

Put Twitter and Facebook share buttons on your website without using either site's API. And without enabling Twitter or Facebook to follow your site visitors around.

All it takes is an image for the button and some JavaScript. Everything you need is in this article.

Here are live examples:

Click on them and see how they work.

You're welcome to download the images for your buttons. A number of other Twitter and Facebook images can also be found on the Internet.

Using this method, the number of tweets or likes the page has received won't publish with the images. That takes software using their respective API and, if this is a consideration, allows the social sites to track your site visitors.

For a robust, simple, non-tracking solution, the code in this article is a good choice. It's suitable to put into templates for WordPress and other content management systems.

The JavaScript automatically determines the title of the web page for the tweet button link. And automatically determines the URL of the page for both button links.

(The title of the web page is assumed to be the value of the title tag in the head area of the web page source code. Most content management systems, including most WordPress templates, automatically put the article title into the title tag.)

Implementing the Tweet and Share Links

This section assumes the Tweet and Facebook button images are located on your server at /images/Twitter.png and /images/Facebook.png, ready to use for linking. If the buttons are elsewhere, make changes in the code accordingly.

The buttons being on the server is the first implementation step.

There are two more steps, two items of JavaScript to put on your page. One is for publishing the buttons on your page and the other is for generating the links.

Here is the JavaScript for publishing the tweet and share buttons on the page.

<script type="text/javascript">document.write(MakeTwitterButton());</script>
<script type="text/javascript">document.write(MakeFacebookButton());</script>

And here is the JavaScript for generating the links, which must be on the page somewhere above the tweet/share buttons. This JavaScript may be pulled in from an external file.

<script type="text/javascript">
/* 
   Maximum Field Length Message
   Version 1.0
   November 17, 2014

   Will Bontrager Software LLC
   https://www.willmaster.com/
   Copyright 2014 Will Bontrager Software LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/

/* The variables Twitter and Facebook may be customized. */

var Twitter = "<a href='[LINKURL]'><img src='/images/Twitter.png'></a>";

var Facebook = "<a href='[LINKURL]'><img src='/images/Facebook.png'></a>";

function MakeTwitterButton()
{
   var linkURL = "https://twitter.com/intent/tweet?text=";
   var title = document.title;
   if( title.length > 117 ) { title = title.substr(0,112) + "[...]"; }
   linkURL += encodeURIComponent(title) + " " + encodeURIComponent(document.URL);
   return Twitter.replace(/\[LINKURL\]/,linkURL);
}

function MakeFacebookButton()
{
   var linkURL = "https://www.facebook.com/sharer.php?u=";
   linkURL += encodeURIComponent(document.URL);
   return Facebook.replace(/\[LINKURL\]/,linkURL);
}
</script>

To edit the button links, update the blue lines in the above source code.

The HTML code in the blue lines can be customized as you wish, including adding link text and replacing the buttons and/or their URLs — so they're published your way. (If your HTML code needs to be broken in multiple lines, see the "Assigning multi-line strings" section of the backslash uses in JavaScript blog post.)

If the code contains any quotation marks (doesn't apply to apostrophes/single quotation characters, just to double quotation characters), then the quotation mark needs to be escaped with a backslash. Example:

Share \"Site Name\"!

The reason for the backslash is because the HTML code is contained within quotation characters. The backslash tells the JavaScript parser that the following character is not the end of the HTML code.

The "[LINKURL]" placeholder is required so the JavaScript knows where to insert the custom links for the current web page.

With each of these in place, you're good to go:

1. The tweet and share buttons on the server.

2. The JavaScript for publishing the buttons on the page.

3. The JavaScript for generating the links somewhere on the page above the buttons JavaScript.

Test your implementation, of course.

Because the JavaScript determines the page URL and title automatically, it's suitable to put into templates for WordPress and other content management systems.

These articles also address the creation and publishing of share links:

Generate Tweet and Share Links for Newsletters, Forums, Et Cetera has a generator to create share links for use in emails and newsletters, forums, blog comments and so forth.

Twitter and Facebook Share Links presents the URLs and their formats for manually constructing share links.

(This article first appeared in Possibilities ezine.)

Will Bontrager