電子的な日常

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(ツイートボタン)

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

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

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

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

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

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

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

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

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

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

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

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

google+の「g+1」ボタン

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

google Developers +1ボタン

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

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

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

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

関連記事

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

777タウン・攻略ブログ
777Townブログランキングへ
↑応援よろしければお願いします!(1日1クリック)
TOPへ戻る
TOPへ戻る

プロフィール

名前:OIL_STAND

アニメ、パチスロ、イラスト、IT(WEB,3DCG,IoT) に強い興味を持つ社会人3年目になるオタク 一応技術屋さん

自己紹介ページ


© Shimesaba.jp 2014
一部の画像は Sammy Networks Co. に帰属します。

Page rendered in 0.0424 seconds