OILSTANDのパチスロ、プログラミング、電子工作等を記録するブログです。
|
各種SNSシェアボタンを設置してみた更新日:2014-08-30 17:00:17 |
どうも
OIL_STANDです。
このブログを作った際にSNSのシェアボタンを設置したので、
そのメモ書きとしてこの記事を書きます。
今回設置したのは、facebookのシェアボタン、いいね!ボタン、
google+のg+1ボタン、twitterのツイートボタンです。
調べる際に参考にさせていただいたサイトさんは、
各種SNSへのシェアボタン設置方法まとめ from Qiita さん
これいいね!Facebookいいね(Like)ボタンを設置する方法 from blogger-customize.comさん
です。
まずは、twitterのツイートボタンの設置方法から。
ツイッター公式のボタン生成ページにアクセスすれば発行する事が出来ます。
今回はリンク共有のボタンを設置したいので、リンクを共有するを選びます。
「URLを共有」の項目は固定のURLの場合は文字入力で設定。動的に(ボタンのあるページのリンクを共有させる)ならば、「ページのURLを使う」を選択します。
また、ツイートの本文も指定可能です。
「ユーザ」にはツイートに表示したいユーザIDを。
推奨には、ツイート後お勧めするユーザを設定します。
また、ハッシュタグの設定や、ボタンに対してツイート数を表示する事もできます。
生成したコードをボタンの設置したい場所に張れば利用可能です。
facebookのボタンを利用するにはfacebookでのログインが必要です。
発行はfacebookのデベロッパーサイトで行う事ができます。
初回発行時には、シェア/いいね!のURLを指定しないといけませんが、
発行したコードをいじれば流用可能なので深く考える必要はありません。
「Layout」でデザインの選択を、「ActionType」で「いいね!」と「おすすめ」を選択できます。
「show friends faces」にチェックを入れるとクリックした人の顔(サムネ)が表示されるようになります。
「include share button」にチェックを入れると「シェア」ボタンも同時に表示されます。
あとは「GetCode」ボタンをクリックし、コードを生成してください。
使用方法は、生成したコードが2つ表示されますが上の方はbodyのすぐ後にコピペ。
下のコードはボタンを設置した居場所に貼り付けます。
「シェア/いいね」の対象ページはしたのコードの「data-href」のURLを書き換える事によって変更する事ができます。
前の2つのSNSと同じようにボタンの生成サイトを参照します。
アクセスして真っ先に表示されるジェネレーターを使うのも良いのですが、
自分はその下の「はじめに」の項目にある「シンプルなボタン」を使用しています。
使い方は同じく「シンプルjなボタン」のコードをボタンの設置した居場所に張るだけです。
今回3SNSの共有ボタンの設置方法を書きましたが、他SNSのボタンも設置したいですね
もし設置する際にはまた記事にしようかと思います。
google+の共有ボタンの設置にはすこし苦労しましたが(別の記事参照)、他は結構簡単に出来た気がします。
サイトを管理している方は設置してみてはどうでしょうか。
google+ のg+1ボタンを設置したがエラーが発生する
google+ のg+1ボタンを設置したがエラーが発生する【解決編】