ソーシャルブックマークボタンをブログに設置－Twitter編－

概要：ソーシャルブックマークボタンをブログに設置－Twitter編－

今回から４回に渡って、ソーシャルブックマークボタンをブログ（Blogger）に設置する方法と手順について紹介していきます。ご紹介するソーシャルブックマークボタンは下記の４つです。

Twitter
Facebook
はてなブックマーク
Google＋

各ボタンは次のようなイメージになります。

ツイート

本来はこれらをまとめて一つの記事にしたかったのですが、詳細に説明しようとした場合、記事が長くなりすぎるので分割しました。

今回はTwitterボタンの設置と手順をご紹介します。

手順：Twitterのフォローボタンとリンク共有ボタンを設置

今回はBloggerを使って設置手順をご紹介します。設置はそれほど難しくありませんのでご安心下さい。

１．ボタンの作成

下記のページにてボタンの作成を行います。

⇒　ツイートボタン

①フォローボタンの作成

リンク先に飛ぶと下記の画面になります。必要な項目を入力します。



【必要項目】
ボタン選択：フォローを選択
ユーザー：ご自身のTwitterのID
言語設定：日本語

必要項目を入力後ソースをコピーします（エディタにでも貼っておきましょう）。


最終的なイメージですが、私の場合下記のようなボタンが完成します。

@hayato_k0315さんをフォロー

②リンクを共有するボタンの作成

続いてリンクを共有するボタンを作成します。画面上の「リンクを共有する」を選択すると下記の画面になります。先ほどと同様、必要項目を入力していきます。




【必要項目】
ボタン選択：「リンクを共有する」を選択
ユーザー：ご自身のTwitterのID
言語設定：日本語

色々項目がありますがデフォルト（標準）のままで問題ありません。

必要項目を入力後ソースをコピーします（エディタにでも貼っておきましょう）。

２．Bloggerにボタンを設置

Bloggerにログイン後、[レイアウト]　→　[HTML/JavaScript]でソース入力画面に進みます。

①フォローボタンの設置

そのままソースをコピーして保存します。

②リンクを共有するボタンの設置

そのままソースをコピーして保存します。
ただ、下記のような上にツイート数が表示されるようにボタンを作成したい場合ちょっと工夫が必要です。

ツイート

コピーしたソースのaタグにdata-count="vertical"を付け加えて下さい。
最終的なソースは下記のようになります。

［対象ソース］

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="hayato_k0315" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

埋め込みが終了したら、保存して終了です。
そこまで難しくないので是非試して下さいね(^-^)

スポンサードリンク