小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

ツイッターのツイートボタンとフォローボタン、フォロー数を表示する方法

最終更新日: 2016-07-25
Twitterのツイートボタン

「すぐ使えるCGI」で更新している記事ページにツイッター(Twitter)のツイートボタンとフォローボタンを表示する方法をご紹介します。

カウント数表示機能の廃止への対応(2016-7-25 の更新)

2015年11月に、ツイッターの機能としてはツイートボタンのカウント数の表示が廃止されました。このため、このページでご紹介するコードもカウント数なしの形式に更新してご案内します。なお、フォローボタンのフォロー数表示機能は残っています。

ツイートボタンのカウント数を引き続き表示したい場合

ツイートのカウント数表示の手段を提供している第三者サービスサイトがあります。カウント数表示を引き続き行いたい方は、下記サイトをご覧になり設定してみて下さい(サイトにユーザ登録する必要があります)。「すぐ使えるCGI」のサポート対象外です。

widgetoon.js & count.jsoon

ツイッター(Twitter)とは

ツイッター(Twitter)とは、米国サンフランシスコに本社がある Twitter, Inc. が無償で提供している「マイクロブログ」と呼ばれるサービスの名称です。日本語でも利用できます。

ツイッターサービスURL: http://twitter.com/

短いメッセージをブログの様に簡単に投稿できるというのが基本的な機能です。他の人の投稿をリアルタイムに閲覧したり検索したりができるので知人同士のちょっとした情報共有や世間のトレンドの検索、著名人や企業によるファンや支持者への情報提供に使われています。

ツイートボタンとは

Twitterのツイートボタン

ツイートボタンとは、ホームページに付ける Twitter の投稿ページへのリンクです。

ホームページに「ツイートボタン」を付けると、それをクリックした時にツイッターのメッセージ投稿画面が開きます。投稿内容に予めページのURLが含まれた状態で画面が開くので、サイト閲覧者の方に簡単にそのページに関するツイッター上での情報共有をしていただく事ができます。

フォローボタンとは

Twitterのフォローボタン

フォローボタンは、ツイッター上で自分を「フォロー」してもらうために使う機能です。

ツイートボタンが(自分はツイッターのアカウントを持っていなくても)自分のサイトのURLをツイッター上で話題にしてもらうために使うものであるのに対し、フォローボタンはツイッターアカウントを持っている方が、自分のツイッター上での発言を目に留まりやすくする目的で使うものです。具体的には、フォローボタンを押した(=フォローした)方のタイムライン(ツイッターにログインした際の初期ページ)に、自分のツイッター上での投稿が表示されるようになります。

ツイートボタン・フォローボタンを付けるページ

ツイートボタンは通常、1ページごとに異なる話題を扱え、かつURLと内容の対応が公開後は変化しない「詳細ページ」(webdir/1.html、2.html、...)に付けます。

一方、フォローボタンは自分をフォローしてもらうためのボタンでページ内容と直接関係はありません。このためどこにあってもいいのですが、検索エンジンから内容を求めてサイトを訪問してくれた方がボタンを押してくれることを願って、これも「詳細ページ」に付ける想定で下記の説明を行います。適宜応用して下さい。

ツイッターボタンの付け方

準備:製品の設置

これから製品をお試しされる方は先に製品をダウンロードの上設置を行って下さい。「詳細ページ」のある製品が必要です。「ブログ」と分類されている製品は全て「詳細ページ」が付いています。

よく分からなければ「添付ファイル付 ウェブページ更新ツール 大容量版」をダウンロードして下さい。

ダウンロード後のページに「ステップ by ステップガイド」というインストール方法のご説明へのリンクが表示されますので、それをご覧になりながら設置して下さい。

設置が終わったら、テストで記事を1件登録して、ページが書き出されることを確認して下さい。

ボタン設置方法概要

いずれのボタンを付ける場合でも、編集の手順は以下の通りです。

  1. templates/article/article.html の編集
  2. 上書きアップロード
  3. 再構築(テンプレート変更反映)
  4. ブラウザのキャッシュをクリア
  5. 再読み込みしてボタン動作確認

ツイッターボタン用 JavaScript

いずれのボタンを付ける場合でも、まず templates/article/article.html を開いて </body> (終了タグ)の直前に以下の JavaScript コードを追加して下さい。

<script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>


ツイートボタンのコード

ツイートボタンには大小2つのデザインがあります。いずれか希望の方を templates/article/article.html の表示したい位置に追加して下さい。

小さいツイートボタン

<a href="https://twitter.com/share" class="twitter-share-button" data-text="%_subject_% - サイト名" data-via="USERNAME" data-dnt="true">Tweet</a>

大きいツイートボタン

<a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-text="%_subject_% - サイト名" data-via="USERNAME" data-dnt="true">Tweet</a>

タイトルの調整

青字で示した「 - サイト名」の部分には導入先のWebサイト名を入れて下さい。ただし、タイトルが全般に長くてツイートの文字数を圧迫しそうな場合はこの部分を削除するなど、適宜調整して下さい。

ユーザ名の調整

ツイッターのアカウントがある場合は、赤字で示した「USERNAME」の部分を置き換えると、ツイート内に「@USERNAME さんから」という表記が含まれるようになります。アカウントが無い場合やこの機能が不要な場合は「data-via="USERNAME"」全体を削除して下さい。

フォローボタンのコード

フォローボタンには大小2つのデザインの他、フォロー数を表示するかのオプション、フォロー対象とするユーザ名を明示するかのオプションがあります。希望のものを templates/article/article.html の表示したい位置に追加して下さい。

サンプルコード中の赤字の「USERNAME」はご自身のツイッターアカウント名に変更して下さい。

小さいフォローボタン

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @USERNAME</a>

小さいフォローボタン 名前なし

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @USERNAME</a>

小さいフォローボタン カウント付

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-dnt="true">Follow @USERNAME</a>

大きいフォローボタン

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="false" data-size="large" data-dnt="true">Follow @USERNAME</a>

大きいフォローボタン 名前なし

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-size="large" data-dnt="true">Follow @USERNAME</a>

大きいフォローボタン カウント付

<a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-size="large" data-dnt="true">Follow @USERNAME</a>

編集の反映

アップロード

編集が終わったら、保存した以下のテンプレートファイルをサーバの同じ位置に上書きアップロードして下さい。

templates/article/article.html

再構築

管理画面一覧の「再構築(テンプレート反映)」ボタンを押すと最新のテンプレートを反映してページが自動更新されます。

表示確認

ブラウザで詳細ページを再読み込みしてボタンが機能するか確認して下さい。ボタンの動作確認の際は、動作確認するブラウザで予めツイッターにログインしておくと、動作が分かりやすくなります。

関連リンク

さらに詳しく