電子的な日常

どうも
OIL_STANDです。

このブログを作った際にSNSのシェアボタンを設置したので、
そのメモ書きとしてこの記事を書きます。

今回設置したのは、facebookのシェアボタン、いいね！ボタン、
google+のg+1ボタン、twitterのツイートボタンです。

調べる際に参考にさせていただいたサイトさんは、
各種SNSへのシェアボタン設置方法まとめ from Qiita さん
これいいね！Facebookいいね(Like)ボタンを設置する方法 from blogger-customize.comさん
です。

twitter（ツイートボタン）

まずは、twitterのツイートボタンの設置方法から。
ツイッター公式のボタン生成ページにアクセスすれば発行する事が出来ます。

ツイッター公式ボタン生成ページ

今回はリンク共有のボタンを設置したいので、リンクを共有するを選びます。
「URLを共有」の項目は固定のURLの場合は文字入力で設定。動的に（ボタンのあるページのリンクを共有させる）ならば、「ページのURLを使う」を選択します。
また、ツイートの本文も指定可能です。

「ユーザ」にはツイートに表示したいユーザIDを。
推奨には、ツイート後お勧めするユーザを設定します。
また、ハッシュタグの設定や、ボタンに対してツイート数を表示する事もできます。

生成したコードをボタンの設置したい場所に張れば利用可能です。

facebookの「いいね!」又は、「シェア」ボタン

facebookのボタンを利用するにはfacebookでのログインが必要です。
発行はfacebookのデベロッパーサイトで行う事ができます。

facebookデベロッパーボタン生成

初回発行時には、シェア/いいね！のURLを指定しないといけませんが、
発行したコードをいじれば流用可能なので深く考える必要はありません。

「Layout」でデザインの選択を、「ActionType」で「いいね！」と「おすすめ」を選択できます。
「show friends faces」にチェックを入れるとクリックした人の顔（サムネ）が表示されるようになります。
「include share button」にチェックを入れると「シェア」ボタンも同時に表示されます。

あとは「GetCode」ボタンをクリックし、コードを生成してください。

使用方法は、生成したコードが２つ表示されますが上の方はbodyのすぐ後にコピペ。
下のコードはボタンを設置した居場所に貼り付けます。
「シェア/いいね」の対象ページはしたのコードの「data-href」のURLを書き換える事によって変更する事ができます。

google+の「g+1」ボタン

前の２つのSNSと同じようにボタンの生成サイトを参照します。

google Developers +1ボタン

アクセスして真っ先に表示されるジェネレーターを使うのも良いのですが、
自分はその下の「はじめに」の項目にある「シンプルなボタン」を使用しています。

使い方は同じく「シンプルjなボタン」のコードをボタンの設置した居場所に張るだけです。

今回３SNSの共有ボタンの設置方法を書きましたが、他SNSのボタンも設置したいですね
もし設置する際にはまた記事にしようかと思います。

google+の共有ボタンの設置にはすこし苦労しましたが(別の記事参照)、他は結構簡単に出来た気がします。
サイトを管理している方は設置してみてはどうでしょうか。

関連記事

google+ のg+1ボタンを設置したがエラーが発生する
google+ のg+1ボタンを設置したがエラーが発生する【解決編】