【保存版】ソーシャルメディアボタンを作成するための完全ガイド(1/2)

【保存版】ソーシャルメディアボタンを作成するための完全ガイド(1/2)

  • このエントリーをはてなブックマークに追加

こんにちは!宮崎です。
今回はソーシャルメディアボタンを作成・実装するための完全ガイドをまとめていきます。

ソーシャルメディアはコンテンツを促進・プロモーションしていくために、今やなくてはならない重要なツールとなってきましたね。
しかし、近年SNSの数は多くなってきており、それぞれのSNSが提供するボタンをどのような目的で適切に配置するかを判断することが難しくなってきました。
欲張って多くのSNSボタンを配置してもサイトが重くなってしまったり、ユーザーにとってもどのSNSにシェアするか迷ってしまうことなんかもありますよね。

今回は、4つのSNS(twitter、facebook、Google+、Pinterest)のボタン・リンクの特徴を解説し、実装方法についてもまとめてご紹介していきます。
皆様のサイトやコンテンツの促進につながるようなソーシャルメディアボタンを探してみてくださいね!

button
Dribbble-Buttons by Mihail Nikitin

参考記事:http://blog.hubspot.com/blog/tabid/6307/bid/29544/The-Ultimate-Cheat-Sheet-for-Creating-Social-Media-Buttons.aspx

フォローボタンとシェアボタンの違いって?

さまざまなソーシャルボタンの微妙な違いを理解する最初のステップはシェアボタンとフォローボタンの違いを区別することから始まります。
個々のSNSボタンを見ていく前にこちらを解説していきます。

フォローボタンとは?

フォローボタンとは、アカウントへのファンやフォロワーを作っていくことを促進し、SNS上でビジネスの存在を支援することに役に立ちます。

皆さんのウェブサイトやブログなどにこれらのボタンを配置することによって、SNSアカウントの存在をアピールすることへ役に立ち、リーチ数をひろげてくれます。
フォローボタンはウェブサイトのどこにでも配置可能ですが、ウェブサイトのメインページや会社概要やプロフィールなどの「アバウト」のページ、ブログのサイドバーなどに設置するとより効果的になります。

シェアボタンとは?

シェアボタンとは、コンテンツを見ている人がソーシャルメディアへ接続し簡単にサイトを友人へ共有することを可能にするボタンです。

シェアボタンをコンテンツに追加すると、コンテンツのリーチ数を拡大でき、新規の訪問者を生成することに役立ちます。
もし、みなさんがコンテンツを持っているなら、すぐに目的にあったシェアボタンを配置することをオススメいたします!

今回の記事では、シェアボタン・ツイートボタンなどなど各SNS別に解説していきますので、皆さんの目的にあったSNSのボタンを探してみてください!

それでは、4つのソーシャルメディアボタンそれぞれをみていきます。どうぞご覧ください!

Twitter編~Twitterフォローボタン~

サイト管理者のTwitterアカウントを簡単にフォローできるボタンです。
フォローボタンはHTMLコードの形で提供されており、そのまま貼り付ければWebサイトやブログに設置できるようになっています。
フォローボタンが設置されたWebページに訪れたユーザーは、フォローボタンをクリックすれば、サイトから離脱することなく、一回のクリックで自分のTwitterアカウントで該当アカウントをフォローできます。

以下のサイトにアクセスし、サイズと言語をアカウント用にカスタマイズし、HTMLコードをウェブサイトの起きたい場所に配置してください。
https://about.twitter.com/resources/buttons#follow

フィードフォースのフォローボタンはこんな感じです。

Twitterシェアボタン

Twitterシェアボタンとは、Webページに関する情報をTwitterに投稿し、簡単に共有できるボタンです。
ツイッターのネットワークを通して、そのフォロワーにコンテンツを広げていくことができます。
ツイートの内容には、あなたのツイッターユーザーネームを予め加える設定にすることをおすすめします。
そのコンテンツを通して、アカウントのリーチ数や新しいフォロワーを増やしていくことが可能です。

実装するには以下のサイトにアクセスし、カスタマイズします。ボタンのHTMLコードを取得し、ボタンを置きたい場所にうめこみましょう。
https://about.twitter.com/resources/buttons#tweet

フィードフォース全力ブログのシェアボタンはこのような感じになっております。

Twitterハッシュタグボタン

ハッシュタグとは、ハッシュマーク【♯】がついたキーワードで、ツイートのタグとして用いられています。
キーワードをタグとして用いることで、そのツイートが何に関するコメントかを1語で示すことができます。
特定のハッシュタグがついたツイートを一覧で見れる機能もあり、そのトピックに関する皆の投稿を効率よく閲覧できるようになっていたり、自身のツイートをそこに寄せることもできます。
このボタンはキャンペーンやマーケティングイベントのような、推進したい特定のハッシュタグについてのツイートを訪問者に勧めるためにも使われています。

実装するには、以下のサイトにアクセスし、カスタマイズします。ボタンのHTMLコードを取得し、ボタンを置きたい場所にうめこみましょう。
https://about.twitter.com/resources/buttons#hashtag

twitter
Dribbble-Twitter Button Concept by Erik Deiner

Twitterメンションボタン

特定の「@ユーザー名」を含むツイート。
これを設置することで、twitterを通してユーザーとコミュニケーションすることが可能になります。
このボタンは「お問い合わせ」「Contact us」「プロフィール」といった問い合わせページに設置することをお勧めします。
お客様サポートなどに便利です。

実装するには、以下のサイトにアクセスし、カスタマイズします。ボタンのHTMLコードを取得し、ボタンを置きたい場所にうめこみましょう。
https://about.twitter.com/resources/buttons#mention

Twitterアンカーテキストリンク

こちらは、ユーザーがコンテンツをシェアするためのメッセージを含んだアンカーテキストリンクです。
多くのブログでこちらのボタンが実装されており、弊社の全力ブログの各記事のはじめとおわりにも実装されています。

また、これらのツイートリンクはブログだけでなく、ホワイトペーパーや電子書籍などのコンテンツの中やオファーを促すランディングページなどに使われることも多いです。
オフィシャルツイートボタンに似ていますが、こちらのリンクはコンテンツをシェアするメッセージをこちらがコントロールできるのが特徴です。

こちらのアンカーテキストリンクは簡単に作れるツールがあり、以下のサイトにアクセスし、ツイートにいれたいメッセージを入力し、アンカーテキストに入れたいURLをペーストしてください。
http://clicktotweet.com/
URLは、ツイートを短縮するためのbitlyというURL短縮サービスを使うことをお勧めします。
また、@ユーザーネームをメッセージ内に含むと、リーチ数が増加しやすくなるのでオススメです。

Twitterウィジェット

「埋め込みタイムライン」は簡単にTwitterのタイムラインを自分のサイトに表示できるツールです。タイムラインはリアルタイムで更新され、タイムライン上から直接、返信、リツイート、お気に入りに登録することができます。
埋め込みタイムラインのタイプには、ユーザー、お気に入り、リスト、検索結果、ハッシュタグのタイムラインなど様々な種類があります。
また、ユーザタイムラインの上部にはフォローボタンがあり、閲覧中のサイトから離れることなく1クリックでフォローできます。
https://twitter.com/settings/widgets/new

今回はtwitterのシェアボタンのさまざまな機能についてみていきましたが、次回はfacebook、pinterest、google+についてお伝えしていきたいとおもいます!
次回もお見逃しなく!
ではでは…

この記事を書いた人

author by 宮崎 優

宮崎 優

業界の知識を広げるために日々勉強中! 最新の情報をお届けしていけるようがんばります。よろしくお願い致します。

投稿記事一覧