メニュー 閉じる

webサイト制作・運営Tips2「SNSボタンの設置」 


筆者自身がいちいち他のwebサイトからリンクを探してくるのが面倒なので自分の記事にまとめるシリーズ、その2。

無料サービスでwebサイトやブログを作成している方も、HTMLを打ち込むことで埋め込みが可能です。サービスによってうまく表示されないこともあるかもしれませんがご了承ください。また、当サイトでは各ページのシェアボタンはプラグインを用いて設置していて、多くのWordPressによるwebサイトがそうしていると考えられます。それとは分けて個別で設置したい場合や、プロフィールページにフォロー・いいねボタンを設置する場合には公式のツールを使用することをおすすめします。

Twitter

前回載せた通り、「Twitter Publish」の下部からシェアボタン、フォローボタンなど様々なボタンが設置できます。詳しくは前回の記事をご覧ください。
(関連記事:webサイト制作・運営Tips1 Twitterカード・埋め込み・ボタンの設置)

Facebook

Facebook for Developers(開発者向けツール)の「ソーシャルプラグイン」にリンクがまとまっています。主要なボタンを載せます。

いいね!ボタン
例えば当サイトのFacebookページ(シーズコンド合同会社)に対するいいねボタンを設置する場合は、上のリンクのいいね!ボタン設定ツールにURLを入力し、レイアウトをbutton_countとして「シェアボタンを追加」のチェックを外すと次のように設定するとプレビューが表示されます。box_countなどにするとまた別のレイアウトになるので色々試してみてください。

使用したいレイアウトのボタンができたら「コードを取得」をクリックします。デフォルトではJavaScriptを含めるものが表示されますが、1ヶ所にコードを配置すれば表示できるiframeがおすすめです。

ボタンが表示できました。

シェアボタン

基本的な操作はいいね!ボタンと同様です。これもbox_countなどにカスタマイズできます。同じように「コードを取得」でiframeを選択すると、設置したい位置に設置するだけですみます。

Instagram

2021年1月現在、公式のボタン設置ツールがないため今回ご紹介するのは控えます。過去に使用されていたInstagramのボタンを設置する方法や非公式のボタンを設置する方法はあるようです。

LINE

Line Social Buttonにリンクがまとまっていて、シェア・LINE@などの友だち追加・いいね(LINEタイムライン投稿)などが可能です。

「LINEで送る」ボタン
わりと直感的に設定しやすく、専門知識があれば公式アイコンでない独自のカスタムアイコンも使用できます。

はてなブックマーク

このへんからだんだんSNSではなくなってきますが、日本では現在も絶大な支持を得ているはてなブックマークのボタン設置リンクも載せておきます。

はてなブックマークボタン
国産のツールであることもあり、非常に設定しやすいです。

YouTube

サービス開始当初とは全く異なり、SNS感覚で使っている人も増えてきたYouTube。企業のアンケートでも「使用しているSNS」の選択肢に含まれていることがあります。これもチャンネル登録ボタンが設置できます。

ボタンを設定する
チャンネル名ではエラーが出る場合、チャンネルID(チャンネルを作成したときにランダムに与えられる文字列)をコピーして貼り付けてください。レイアウトを「フル」にすると、チャンネル名とチャンネルアイコンも表示できます。筆者の個人チャンネルの場合は次のようになります。

Posted in webサイト制作・運営