Twitterのシェアボタンをカスタマイズする

Twitterのシェアボタンをカスタマイズする際に設定できるオプションをいくつか試してみます。

サンプルコード

まずは最低限の設定で実装してみます。
シェアボタンを設置する要素を用意します。

<div id="share-area"></div>

JavaScriptでシェアボタンを生成します。
その際、リンクのパラメータにツイートする内容とシェアするURLを設定します。

// シェアボタンのリンク先
var shareUrl  = 'https://twitter.com/intent/tweet';
    shareUrl += '?text='+encodeURIComponent('ツイート内容テキスト');
    shareUrl += '&url='+encodeURIComponent('https://cly7796.net/blog/');

// シェアボタン追加
var shareArea = document.getElementById('share-area');
var shareLink = '<a href="' + shareUrl + '">twitter</a>';
shareArea.innerHTML = shareLink;

textでツイートする内容の初期値、urlでシェアするURLを設定できます。
これでシェアボタンの作成ができました。
シェアボタンのデモページ

リンクをクリックすると、以下のような状態のツイート画面が開きます。

実際にツイートすると、以下のように表示されます。

ツイート内で改行したい場合は\nを追加します。

// シェアボタンのリンク先
var shareUrl  = 'https://twitter.com/intent/tweet';
    shareUrl += '?text='+encodeURIComponent('ツイート内容テキスト\n改行テスト\n');
    shareUrl += '&url='+encodeURIComponent('https://cly7796.net/blog/');

// シェアボタン追加
var shareArea = document.getElementById('share-area');
var shareLink = '<a href="' + shareUrl + '">twitter</a>';
shareArea.innerHTML = shareLink;

ツイート内容の改行のデモページ

ツイート画面で改行されていることが確認できました。

実際にツイートした際の表示は以下になります。

次にハッシュタグの設定を試してみます。

// シェアボタンのリンク先
var shareUrl  = 'https://twitter.com/intent/tweet';
    shareUrl += '?text='+encodeURIComponent('ツイート内容テキスト');
    shareUrl += '&url='+encodeURIComponent('https://cly7796.net/blog/');
    shareUrl += '&hashtags='+encodeURIComponent('twitter');

// シェアボタン追加
var shareArea = document.getElementById('share-area');
var shareLink = '<a href="' + shareUrl + '">twitter</a>';
shareArea.innerHTML = shareLink;

ハッシュタグはhashtagsで設定します。
ハッシュタグのデモページ

ツイート画面で#twitterが追加されました。

実際にツイートした際の表示は以下になります。

複数のハッシュタグを設置する場合、カンマで区切ります。

// シェアボタンのリンク先
var shareUrl  = 'https://twitter.com/intent/tweet';
    shareUrl += '?text='+encodeURIComponent('ツイート内容テキスト');
    shareUrl += '&url='+encodeURIComponent('https://cly7796.net/blog/');
    shareUrl += '&hashtags='+encodeURIComponent('twitter,JavaScript,フロントエンド');

// シェアボタン追加
var shareArea = document.getElementById('share-area');
var shareLink = '<a href="' + shareUrl + '">twitter</a>';
shareArea.innerHTML = shareLink;

複数のハッシュタグのデモページ

ツイート画面で複数のハッシュタグが追加されました。

実際にツイートした際の表示は以下になります。

hashtagsのパラメータで設定すると末尾に追加されますが、ツイート内容の途中にハッシュタグを入れたい場合はtextパラメータに含めることができます。

// シェアボタンのリンク先
var shareUrl  = 'https://twitter.com/intent/tweet';
    shareUrl += '?text='+encodeURIComponent('ツイート内容テキスト\n#twitter #JavaScript\n#フロントエンド');
    shareUrl += '&url='+encodeURIComponent('https://cly7796.net/blog/');

// シェアボタン追加
var shareArea = document.getElementById('share-area');
var shareLink = '<a href="' + shareUrl + '">twitter</a>';
shareArea.innerHTML = shareLink;

ハッシュタグの区切りにはスペースが必要になるので注意ください。
ツイート内容の途中にハッシュタグを含めるデモページ

これでツイート内容の途中でハッシュタグを追加することができました。

実際にツイートした際の表示は以下になります。