iine

こんにちは!LINEで相手のメッセージをとりあえず既読にして放置しておく、制作部の錦織です。今回は、ツイートボタン、いいねボタン、Google+1ボタン、はてなブックマークボタンの設置方法についてです。

サンプルコードも一応記載しておきましたが、うまくカスタマイズしながら使うのが一番かと思います。また、仕様変更などでコード自体が変わることもありますので、しっかりソーシャルボタン設置の仕組みについて理解しておくことが大切です!

Twitterツイートボタン

開発者用ページから、ボタン設置の設定を行った後、発行コードをサイトに貼り付けて使います。

コード取得先
https://twitter.com/about/resources/buttons

この記事の上部にも付いているような形で表示させたい場合は、下記コードを挿入すればOKです。タグの属性をいじることでカスタマイズも可能です。

Facebookいいねボタン

いいねボタンは、他のソーシャルボタンと比べると、少々扱いが厄介です。
挿入用のコード+空div要素とscriptの記述をページ内に1つ埋め込む必要があります。

コード取得先
https://developers.facebook.com/docs/reference/plugins/like/

<body>の開始タグ直後に下記、空div要素とscriptの記述のコードを挿入します。

合わせて、ボタンを設置したい場所にボタン用のコードを挿入します。
この記事の上部にも付いているような形で表示させたい場合は、下記コードを挿入すればOKです。タグの属性をいじることでカスタマイズも可能です。

Google+1ボタン

Google+ボタンもfacebook同様、div要素とscript両方の挿入が必要です。

コード取得先
https://developers.google.com/+/web/+1button/

はてなブックマークボタン

上記のボタンよりも設定項目も少なく、シンプルな構造になってます。

コード取得先
http://b.hatena.ne.jp/guide/bbutton

Webサービスが増えると共にボタンの数も…

日々、新しいWebサービスが増え、それに伴い、設置したくなるソーシャルボタンの数も増える今日この頃。

しかし、あれもこれもと闇雲に設置しすぎると、ページの景観を損ねますし、ユーザーからすればボタンありすぎると混乱しますし、ページ自体もどんどん重くなってしまいます。

サイトにあったソーシャルボタンは何かを考えた上で、必要なものを設置し、スマートなサイト作りを心掛けましょう!

2013.08.12|Nishikiori

関連記事

コメント