ソーシャルメディア用ボタン（アイコン）の設置方法
ソーシャルボタンは、ソーシャルアイコンとも言いますが、正確にその違いを説明すると、一般的な認識では、視覚的に確認できる、上記のような SNS ロゴ入りの小さな画像を、ソーシャルアイコンと言い、その画像に目的ページへのリンクを埋め込んだものが、ソーシャルボタンと言います。
ソーシャルボタンはSEO対策では絶対に欠かせないもので、その意味と使い方を良く知って置かないと、かなり空回りになる事になります。ここでは、少しソーシャルボタンの概念と設置方法を整理して行きたいと思います。
日記ブログなど個人的に思い出コンテンツを作成しているブログなら、大した問題にはなりませんが、サイトのコンテンツによって、仕事に繋げない、収益に繋げたいなら、ソーシャルボタンはそのサイトにとって、マーケティング的手法の一つとなります。
概念としてのソーシャルボタンは、SNS やソーシャルブックマーク等、ソーシャルメディアに情報を入出力する為に設置するボタン（アイコン）型のインターフェースです。
③ 共感ボタン
●フォローボタン
Facebook の フォローボタンは実質2017年頃に廃止されています。現在のフォローボタンはいわゆるプロフィールのページを開くものです。コンテンツ勝負だけでは不安だと思う場合は、フォローボタンも設置しましょう。
ここで大事な事！ソーシャルボタンを有効に機能させるには、FB側の投稿設定が「公開」になっていないと意味がないのです。
筆者はFBアカウント登録当時、セキュリティについて未知だったため、設定を「友達」までにしていたのを、完全に忘れていました。ずっとフォロワーが付かないな～と不思議だったけど、最近ソーシャルボタンについて調べているうちに、ふっと検索ページで見たから、急いで確認設定し直しました。
●「いいね」ボタン
公式の「いいね」ボタンの作る方法があるURLを貼って置きます。
https://developers.facebook.com/docs/plugins/like-button
<meta>コードと<body>内のhtmlを別々に書く必要があり、筆者が使う Blogger のコードは少々特殊なので、設定がうまくできませんでした。特に必要性も感じないですが、設置したい方はぜひトライしてみて下さい。
公式ブランドサイトでは、指定デザインのボタンをダウンロードできますので、リンクはユーザーが設定するので、わかり易くていいです。
https://www.instagram-brand.com/
●フォローボタン
Insta は外部リンクを規制しているので投稿のシェアは出来ません。プロフィールへリンクを飛ばすフォローボタンのみですが、投稿をシェアしたい人はアイキャッチ画像に題名を貼り付けてアップしたり工夫していますが、筆者はそもそも Insta の必要性は何？と思っています。
FBに既存している単純機能ですよね～FBは他の機能が多くて複雑に感じるかもですが、苦手の機能を無理して使わずに、画像だけアップして、仲間内で「萌え～」「映え～」していれば、同じじゃないですか。ユーザーとしては FB と Insta の両アカウントを管理するだけ、手間が増えます。
しかし正にそこが FB の盲点でした。FBの非アクティブユーザーはとても多い、筆者もその一人でした。懐かしい人に会えれば最高かもと登録したが、本来理想的な UI は投稿とグループチャット、ゲームがあれば充分であり、他の高度な機能はもう一段上のビジネスアカウントかエグゼクティブアカウントにして差別を作るべきでした。ユーザー拡大の欲求から機能盛沢山詰め込んで、返ってユーザーを遠ざける結果となったのです。
一般の人は操作がシンプルほど使い易いのです。そこで FB が方向修正で策略的にシンプルな Insta を打ち出したんですね～正解じゃないですか。
Insta のユーザー数もマーケットに直接影響を与えるほどになったので、ソーシャルボタンを設置しているサイトが増えています。
公式のソーシャルボタン設置方法があるページを貼って置きます。
https://publish.twitter.com/#
生成コードでは既定のボタンしかありませんが、サイトデザインに合わせたソーシャルボタンがあるなら、リンクを使いましょう。
●シェアボタン
リンク以外にもjavaを使ってのページ自動取得のシェアボタンはこちら
●フォローボタン
●メンションボタン
サイトから直接@ユーザー指定でツイートが始められます。個人指定なので、慎重に考えた上でご利用下さい。
●メッセージボタン
面識がない個人対個人の直接対話なので、慎重に考えた上でご利用下さい。
公式のソーシャルボタン設置ガイドラインを貼って置きます。
https://social-plugins.line.me/ja/how_to_install
●シェアボタン（javaを使ってページを自動取得する）
Line個人アカウントでは個人名が実質一般公開されてしまいますが、芸能人でもない限りそれは普通に抵抗があると思います。公式アカウントは有料なので、敷居が少々高いと思ってしまいますので、筆者はまだ設置した事がありません。しかしラインの国内ユーザーはどの国よりも強いので、物販ならぜひ設置すべきと思います。
https://developers.google.com/youtube/youtube_subscribe_button#Configure_a_Button
簡単そうに見えても、なんだか小難しいですよね。ちなみに筆者のチャンネルにはアップした動画がなく、そのせいかエラーになってしまいます。何度試してもエラーになってしまいます。登録チャンネルは一杯あるのにw そのうち動画でも作ってアップしてみます。
もっと簡単にテキストリンクさえ分かれば、アンカーや画像は自分でなんとかできるのに～と思います。
はい、テキストリンクはこれです。ネットで色んな人が書いてました。
●フォローボタンのリンク先URL
まぁ、ガイドラインとか規約とか、長ったらしく並べているのは読む気が起きないのは、理解できます。筆者もそうなので、あまり読みません。
使用しているテンプレート自体についているソーシャルボタンが全然公式と違って、WEBデザイナーレベルの話では？と思っていますので、テンプレート制作者が公式に了解を得ているものと考えています。筆者は全て既存テンプレに頼っております。
ただ、自分で作ったサイトやブログにソーシャルボタンを設置する場合は、ガイドラインを確認すべきだと思いますが、Insta のような使用条件を明確に箇条書きしていて、理解し易いものもあり、FBのように公式にないデザインはリクエストによる承認方法を採用していたり、他のメディアもそれなりの対応方法が見つかる可能性があります。
以上、主要ソーシャルボタンを紹介しました。次要ソーシャルボタンもまだありますので、こちらの記事「主流でなくても重要なソーシャルメディアのボタン(アイコン)を設置する方法」も、見ないと損しますよw
ソーシャルボタン（アイコン）とは？
殆どのサイトに、目立つファーストビューにある、いわゆる SNS サイト「Facebook」や「Twitter」のロゴがあるボタンの事です。当サイトが使うテンプレートにも、ソーシャルボタン群が標準装備してありました。日記ブログなど個人的に思い出コンテンツを作成しているブログなら、大した問題にはなりませんが、サイトのコンテンツによって、仕事に繋げない、収益に繋げたいなら、ソーシャルボタンはそのサイトにとって、マーケティング的手法の一つとなります。
現代はソーシャルメディアの時代であり、固有サイトやブログ（本来ブログもSNSですが、大衆的には複雑だったようです）よりも、ソーシャルアプリが毎日、桁違いに使われています。欧米発の Facebook が最も知られているではないでしょうか、日本では、LINEがうまくシェアを取り、呟き SNS の Twitter は根強い人気があります。
ソーシャルボタンは、ウェブページを多くの人に見て貰えるよう、SNS サイトにコンテンツをリンクしたり、訪問者にウェブページの運営者側 SNS アカウントをフォローして貰えたりするものです。
ソーシャルボタンがなければ、アクセスが少なく、作成した情報の価値が上がりません。なので、サイトには必ずソーシャルボタンを設置すべきとの事で、SEO対策でも重要視されている訳です。
概念としてのソーシャルボタンは、SNS やソーシャルブックマーク等、ソーシャルメディアに情報を入出力する為に設置するボタン（アイコン）型のインターフェースです。
ソーシャルボタンの種類
① シェアボタン サイトのコンテンツを SNS などで友達やフォロワーに紹介してもらう為のボタンです。作成するコンテンツの全てにシェアボタンを設置し、出来ればファーストビゅーの中で記事タイトルの付近、或いはアイキャッチ画像付近がお薦めです。
② フォローボタン
② フォローボタン
サイトのファンやフォロワーになってもらう為のボタンです。サイト運営者自身のアカウントのフォローページに繋がっている必要性があり、サイドバーに設置するのがお薦めです。
③ 共感ボタン
Facebook の「いいね」ボタンが典型的な例です。現在殆どの SNS サイトにはこの共感ボタンがあります。1クリックで投稿に対する態度を示す事ができ、ID も言葉も要りませんので、ブログのコメント欄よりもずっと気楽に使える事から、言葉の壁を超えて、世界中で使われています。
④ DMボタン
④ DMボタン
WEBメールが主流となる前は、営利団体の公式サイトで良く問合せ先としてメールを立上げる為のボタンがあります。WEBメールはガジェットに属しますが、メールボタンはソーシャルボタンに属します。最近では Twitter のメッセージボタンもこれに該当します。
●プロフィール画面（のフォロー）にリンクされたソーシャルボタン ⇒ フォローボタン
●投稿インタフェースにリンクされたソーシャルボタン ⇒ シェアボタン
●「いいね」ボタンに直結させたソーシャルボタン ⇒ 共感ボタン
●メーラーやメッセンジャーを立ち上げさせるソーシャルボタン ⇒ DMボタン
ソーシャルボタンの設置は、各メディアで検索すれば方法は見つけられますが、探すにはかなりの手間と時間がかかります。そこで、一度調べたURLを集めておきたいと思います。
また、html コーディングから作成するサイトでは、公式の設置方法を使える事ができますが、ブログでは、場合によって<script>を禁止しているので、公式の設置方法を使う事が出来ない事もあります。
主要メディア用ソーシャルボタンの設置について
ボタン型インターフェイスと言っても、メディア側が提供しているインターフェイスにリンクで繋げる形のもので、知る必要があるのはそのURLです。つまり、リンク先によって、上記数種類のソーシャルボタンに分かれると言う訳です。●プロフィール画面（のフォロー）にリンクされたソーシャルボタン ⇒ フォローボタン
●投稿インタフェースにリンクされたソーシャルボタン ⇒ シェアボタン
●「いいね」ボタンに直結させたソーシャルボタン ⇒ 共感ボタン
●メーラーやメッセンジャーを立ち上げさせるソーシャルボタン ⇒ DMボタン
ソーシャルボタンの設置は、各メディアで検索すれば方法は見つけられますが、探すにはかなりの手間と時間がかかります。そこで、一度調べたURLを集めておきたいと思います。
また、html コーディングから作成するサイトでは、公式の設置方法を使える事ができますが、ブログでは、場合によって<script>を禁止しているので、公式の設置方法を使う事が出来ない事もあります。
ソーシャルボタンのデザインも、ユーザーのサイトイメージに合わせていません。各ブログに対応できないから、ユーザー任せの部分もあって、初心者は戸惑うばかりで、前へ進めません。その場合には、別の接続方法が必要となります。
以下、各種 SNS のソーシャルボタン設置について（既にアカウントを取得している前提）、なるべく多くの接続方法を集めて見たいと思いますので、参考になれれば幸いです。
以下、各種 SNS のソーシャルボタン設置について（既にアカウントを取得している前提）、なるべく多くの接続方法を集めて見たいと思いますので、参考になれれば幸いです。
Facebook のソーシャルボタン
各ページ URL から生成する絶対値のシェアで、実際には1ページずつなんて貼っていられません。そこで、テンプレートの html に埋める開発者向けのコードがあります。
① サイトデザインに合うソーシャルボタンの画像をダウンロードしてから、
下記リンク記述で設定して下さい。
② ブログで既存ソーシャルボタン群があれば、レイアウトで確認して下さい。
ソーシャルボタン群がリンクリストになっている場合は、
下記リンク先のURL（下線部分）だけを貼り付ければOKです。
③ ブログの既存ソーシャルボタン群がhtmlに組み込まれている場合は、
テンプレート画面を右クリックしてコードを検証し、
該当部分にリンク記述を貼り付けます。
先ずは Facebook のアカウントを確認して下さい、無ければ登録して下さい。
しかし実際には各自のCSSで作られたボタン、或いは自分の好みやデザインに合わせてDLしたボタンを使うのが普通なので、生成されるコードよりも自分でリンクを貼り付ける方が管理し易いのです。下記リンクはそのままコピペして、太文字部分だけ自分のアカウントのものに変えれば、使えます。
ソーシャルボタン群がリンクリストになっていれば、下線部分のURLだけでいいです。
●シェアボタン
リンク以外にもjavaを使ってのページ自動取得のシェアボタンはこちら
❞ https://cruw.co.jp/下記リンク記述で設定して下さい。
② ブログで既存ソーシャルボタン群があれば、レイアウトで確認して下さい。
ソーシャルボタン群がリンクリストになっている場合は、
下記リンク先のURL（下線部分）だけを貼り付ければOKです。
③ ブログの既存ソーシャルボタン群がhtmlに組み込まれている場合は、
テンプレート画面を右クリックしてコードを検証し、
該当部分にリンク記述を貼り付けます。
しかし実際には各自のCSSで作られたボタン、或いは自分の好みやデザインに合わせてDLしたボタンを使うのが普通なので、生成されるコードよりも自分でリンクを貼り付ける方が管理し易いのです。下記リンクはそのままコピペして、太文字部分だけ自分のアカウントのものに変えれば、使えます。
ソーシャルボタン群がリンクリストになっていれば、下線部分のURLだけでいいです。
●シェアボタン
<a href="http://www.facebook.com/share.php?u=ユーザー名" rel="nofollow" target="_blank"><img src="ボタン画像のURL"> or リンクテキスト</a>
リンク以外にもjavaを使ってのページ自動取得のシェアボタンはこちら
<a href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">Facebook</a>
●フォローボタン
<a href="http://www.facebook.com/自分のID" rel="nofollow" target="_blank"><img src="ボタン画像のURL"> or リンクテキスト</a>
Facebook の フォローボタンは実質2017年頃に廃止されています。現在のフォローボタンはいわゆるプロフィールのページを開くものです。コンテンツ勝負だけでは不安だと思う場合は、フォローボタンも設置しましょう。
ここで大事な事！ソーシャルボタンを有効に機能させるには、FB側の投稿設定が「公開」になっていないと意味がないのです。
筆者はFBアカウント登録当時、セキュリティについて未知だったため、設定を「友達」までにしていたのを、完全に忘れていました。ずっとフォロワーが付かないな～と不思議だったけど、最近ソーシャルボタンについて調べているうちに、ふっと検索ページで見たから、急いで確認設定し直しました。
●「いいね」ボタン
公式の「いいね」ボタンの作る方法があるURLを貼って置きます。
https://developers.facebook.com/docs/plugins/like-button
<meta>コードと<body>内のhtmlを別々に書く必要があり、筆者が使う Blogger のコードは少々特殊なので、設定がうまくできませんでした。特に必要性も感じないですが、設置したい方はぜひトライしてみて下さい。
Instagram のソーシャルボタン
先ずは Instagram のアカウントを確認して下さい。無ければ登録して下さい。公式ブランドサイトでは、指定デザインのボタンをダウンロードできますので、リンクはユーザーが設定するので、わかり易くていいです。
https://www.instagram-brand.com/
●フォローボタン
<a href="https://www.instagram.com/ユーザーネーム?=badge"><img src="ボタン画像のURL"> or リンクテキスト</a>
Insta は外部リンクを規制しているので投稿のシェアは出来ません。プロフィールへリンクを飛ばすフォローボタンのみですが、投稿をシェアしたい人はアイキャッチ画像に題名を貼り付けてアップしたり工夫していますが、筆者はそもそも Insta の必要性は何？と思っています。
FBに既存している単純機能ですよね～FBは他の機能が多くて複雑に感じるかもですが、苦手の機能を無理して使わずに、画像だけアップして、仲間内で「萌え～」「映え～」していれば、同じじゃないですか。ユーザーとしては FB と Insta の両アカウントを管理するだけ、手間が増えます。
しかし正にそこが FB の盲点でした。FBの非アクティブユーザーはとても多い、筆者もその一人でした。懐かしい人に会えれば最高かもと登録したが、本来理想的な UI は投稿とグループチャット、ゲームがあれば充分であり、他の高度な機能はもう一段上のビジネスアカウントかエグゼクティブアカウントにして差別を作るべきでした。ユーザー拡大の欲求から機能盛沢山詰め込んで、返ってユーザーを遠ざける結果となったのです。
一般の人は操作がシンプルほど使い易いのです。そこで FB が方向修正で策略的にシンプルな Insta を打ち出したんですね～正解じゃないですか。
Insta のユーザー数もマーケットに直接影響を与えるほどになったので、ソーシャルボタンを設置しているサイトが増えています。
Twitter のソーシャルボタン
先ずはアカウントを確認し、無ければ登録して下さい。また、ソーシャルボタンの機能を活かせるには、アカウントの設定から「プライバシーとセキュリティ」の中の「すべてのユーザーからメッセージを受信する」を on にして下さい。特にメッセージボタンの機能が制限されます。公式のソーシャルボタン設置方法があるページを貼って置きます。
https://publish.twitter.com/#
生成コードでは既定のボタンしかありませんが、サイトデザインに合わせたソーシャルボタンがあるなら、リンクを使いましょう。
●シェアボタン
<a href="https://twitter.com/share?url=サイトのURL"><img src="ボタン画像のURL"> or リンクテキスト</a>
リンク以外にもjavaを使ってのページ自動取得のシェアボタンはこちら
<a href="javascript:window.open('http://twitter.com/share?text='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">Tweet</a>
❞ https://cruw.co.jp/●フォローボタン
<a href="https://twitter.com/自分のID"><img src="ボタン画像のURL"> or リンクテキスト</a>
●メンションボタン
<a href="https://twitter.com/intent/tweet?screen_name=ユーザー名&ref_src=twsrc%5Etfw"><img src="ボタン画像のURL"> or リンクテキスト</a>
サイトから直接@ユーザー指定でツイートが始められます。個人指定なので、慎重に考えた上でご利用下さい。
●メッセージボタン
<a href="https://twitter.com/messages/compose?recipient_id=ユーザー名&ref_src=twsrc%5Etfw"><img src="ボタン画像のURL"> or リンクテキスト</a>
面識がない個人対個人の直接対話なので、慎重に考えた上でご利用下さい。
Line のソーシャルボタン
まずLineのアカウントを持っていないとできませんので、まだの人はLineに登録して下さい。公式のソーシャルボタン設置ガイドラインを貼って置きます。
https://social-plugins.line.me/ja/how_to_install
●シェアボタン（javaを使ってページを自動取得する）
<a href="javascript:window.open('http://line.me/R/msg/text/?'+encodeURIComponent(document.title)+'%20'+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');">LINE</a>
Line個人アカウントでは個人名が実質一般公開されてしまいますが、芸能人でもない限りそれは普通に抵抗があると思います。公式アカウントは有料なので、敷居が少々高いと思ってしまいますので、筆者はまだ設置した事がありません。しかしラインの国内ユーザーはどの国よりも強いので、物販ならぜひ設置すべきと思います。
Youtube のソーシャルボタン
Youtubeには投稿をシェアできないので、動画チャンネルをフォローするボタンのみとなります。公式なボタン提供ページはこちらです。https://developers.google.com/youtube/youtube_subscribe_button#Configure_a_Button
簡単そうに見えても、なんだか小難しいですよね。ちなみに筆者のチャンネルにはアップした動画がなく、そのせいかエラーになってしまいます。何度試してもエラーになってしまいます。登録チャンネルは一杯あるのにw そのうち動画でも作ってアップしてみます。
もっと簡単にテキストリンクさえ分かれば、アンカーや画像は自分でなんとかできるのに～と思います。
はい、テキストリンクはこれです。ネットで色んな人が書いてました。
●フォローボタンのリンク先URL
http://www.youtube.com/subscription_center?add_user=チャンネル名
公式ボタン、アイコン、ロゴ、バッジ等のダウンロードについて
偶然検索で見かけたので、ちょっと触れたいと思います。各ソーシャルメディアにはガイドラインがあります。ソーシャルボタンやロゴについての取り決めがあり、サイト作成の際に注意した方が良いかも知れません。例えば公式のソーシャルボタンを加工するのはNGとか･･････まぁ、ガイドラインとか規約とか、長ったらしく並べているのは読む気が起きないのは、理解できます。筆者もそうなので、あまり読みません。
使用しているテンプレート自体についているソーシャルボタンが全然公式と違って、WEBデザイナーレベルの話では？と思っていますので、テンプレート制作者が公式に了解を得ているものと考えています。筆者は全て既存テンプレに頼っております。
ただ、自分で作ったサイトやブログにソーシャルボタンを設置する場合は、ガイドラインを確認すべきだと思いますが、Insta のような使用条件を明確に箇条書きしていて、理解し易いものもあり、FBのように公式にないデザインはリクエストによる承認方法を採用していたり、他のメディアもそれなりの対応方法が見つかる可能性があります。
以上、主要ソーシャルボタンを紹介しました。次要ソーシャルボタンもまだありますので、こちらの記事「主流でなくても重要なソーシャルメディアのボタン(アイコン)を設置する方法」も、見ないと損しますよw
コメント
0 件のコメント :
コメントを投稿