デザインスタジオフェニックススタッフブログ制作ブログソーシャルボタンのコードの取得及び設置方法についてツイートこんにちは!LINEで相手のメッセージをとりあえず既読にして放置しておく、制作部の錦織です。今回は、ツイートボタン、いいねボタン、Google+1ボタン、はてなブックマークボタンの設置方法についてです。サンプルコードも一応記載しておきましたが、うまくカスタマイズしながら使うのが一番かと思います。仕様変更などでコード自体が変わることもありますので、しっかりソーシャルボタン設置の仕組みについて理解しておくことが大切です!Twitterツイートボタン開発者用ページから、ボタン設置の設定を行った後、発行コードをサイトに貼り付けて使います。コード取得先https://twitter.com/about/resources/buttonsこの記事の上部にも付いているような形で表示させたい場合は、下記コードを挿入すればOKです。タグの属性をいじることでカスタマイズも可能です。'twitter-wjs');</script>Facebookいいねボタンいいねボタンは、他のソーシャルボタンと比べると、少々扱いが厄介です。挿入用のコード+空div要素とscriptの記述をページ内に1つ埋め込む必要があります。コード取得先https://developers.facebook.com/docs/reference/plugins/like/<body>の開始タグ直後に下記、空div要素とscriptの記述のコードを挿入します。'facebook-jssdk'));</script>合わせて、ボタンを設置したい場所にボタン用のコードを挿入します。この記事の上部にも付いているような形で表示させたい場合は、下記コードを挿入すればOKです。タグの属性をいじることでカスタマイズも可能です。data-show-faces="false"></div>Google+1ボタンGoogle+ボタンもfacebook同様、div要素とscript両方の挿入が必要です。s);})();</script>はてなブックマークボタン上記のボタンよりも設定項目も少なく、シンプルな構造になってます。async="async"></script>Webサービスが増えると共にボタンの数も...日々、新しいWebサービスが増え、それに伴い、設置したくなるソーシャルボタンの数も増える今日この頃。あれもこれもと闇雲に設置しすぎると、ページの景観を損ねますし、ユーザーからすればボタンありすぎると混乱しますし、ページ自体もどんどん重くなってしまいます。7のasync/awaitDiagflowで、BOTを作成IEで画像・テキストにlabelタグを使いたい!WEB戦国時代の天下統一を目指す、静岡市のホームページ制作会社デザインスタジオフェニックスのスタッフブログです。