Webサイト制作のワークショップ」のメモです。

SNSとの連携というのは、WebサイトにSNSボタンを埋め込むという技術的なものだけではなく、マーケティング的な意味合いとしてWebサイトとSNSがうまく回っていく仕組みづくりのこと。

enjoy!

SNSの基本的な考え方

Webで起こったことはWebで盛り上がってWebで完結する。Webの出来事が人のリアルな行動にまで繋がっていくことは非常にまれ。

Facebookの投稿はFacebookの中でのみシェアされ、TwitterのツイートはTwitter上でリツイートされる。プラットフォームごとのSNS運営が大切。

人は一番近くにある簡単な方法で目的を達成する。SNSボタンを設置して動線づくりをすることで、情報を共有したいという目的を達成しやすくする。

投稿のわかりやすさは大切。伝わる言葉を選んで投稿する。カタコトのクールな投稿はNG。コメントへの返信も、その対応の仕方を多くの人が見ている。あらゆる接点でSNSアカウントは評価されている。

投稿の内容は正直に。ネガティブなコメントも共感を呼んでリアルさが出ることもある。

SNSは何かしら共通点を持った人同士がつながっているが、自分のFacebookのニュースフィードと友達のニュースフィードの内容は全く雰囲気が違うことがある。

「雑誌に掲載されました」「ポータルサイトに取り上げられました」というだけのアカウントは、純粋なファンに対してもゴールを示せていないためNG。ここでも成功体験が重要。成功体験のないところに人はリピートしない。

OGP(Open Graph Protocol)

WebページがSNSでシェアされた場合に、こちらの意図した画像やテキストが表示されるようにするための設定。主にFacebookとTwitter用。

シェアデバッガー/カードバリデータ

実際にシェアされた場合にどんな表示になるかを確認できるツール。

シェアデバッガー|Facebook for Developers

Card validator|Twitter Developer

OGPの記述方法

html の headタグ内に metaタグを記述する。

// 共通項目
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの概要" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:type" content="ページのタイプ|article、website など" />
<meta property="og:sitename" content="サイト名" />

// Facebook用
<meta property="fb:appid" content="App ID" />
<meta property="article:publisher" content="FacebookページのURL" />

// Twitter用
<meta name="twitter:card" content="Twitterカードの種類|Summary Card、Photo Cardなど" />
<meta name="twitter:site" content="@Twitterアカウント名" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページの概要" />
<meta name="twitter:image" content="サムネイル画像のURL" />
<meta name="twitter:url" content="ページのURL" />

Facebook用OGPでサムネイル画像の注意点

  • 画像サイズはW:1,200×H:630px以上
  • データ容量は5MB以内
  • 画像が切れてしまわないようにアスペクト比を「1.91:1(Width:Height)」にする
  • 画像が表示される場所によっては正方形で表示されるので、画像内にテキストは追加しない

Facebook/Twitter ともに頻繁に仕様が変わるため、最新情報を入手しておく。

Open Graph – オブジェクトのプロパティ|Facebook for Developers

Cards Markup Tag Reference|Twitter Developer

Facebookプラグイン

いいね!ボタンやコメントプラグインを追加するためのコードを生成する。
ソーシャルプラグイン|Facebook for Developer

Twitterプラグイン

ツイートボタンやフォローボタンを追加するためのコードを生成する。
https://about.twitter.com/ja/resources/buttons

仕組みの連携

例として、カメラを購入しようと検討している人を対象をしたキャンペーンサイト。エントリーして「期待のコメント(このカメラに期待すること)」を書いてカメラを購入することで、もれなくキャッシュバックを受けられる。コメントの内容はSNSにも投稿される。

EOS M5 新発売キャンペーン|キヤノンEOS M5

こちらの関連記事もあわせてどうぞ!

    WS|コーディング 2

    「Webサイト制作のワークショップ」のメモです。 サンプルデータを使ってスマホ対応(レスポンシブWebデザイン)を行う。スマホの仮想ウインドウサイズの横幅を取得して、CSSで表示を振り分ける。Web…

    WS|ページの読み込みスピード

    「Webサイト制作のワークショップ」のメモです。 Webサイトの読み込みスピードは非常に重要な要素。PCのネット回線は高速化したが、スマホはまだまだ回線速度が貧弱。 ネットショップの場合、読み込みス…

    WS|セキュリティ意識とパスワード管理

    「Webサイト制作のワークショップ」のメモです。 様々なアカウントを管理するために 1Password.app を使う。パスワードは、自分で覚えることができて手入力できるようなものは使用しない。「N…

    WS|Webサイト制作

    Webサイト制作のワークショップを各所で行いたいと思います 都内某所でWebサイト制作のワークショップをやっています。他にも各所で開催していきたいと思うので、ご興味のある方はよろしくお願いします。何…

    WS|コーディング 1

    「Webサイト制作のワークショップ」のメモです。 頭で理解するよりも手で覚えることが大切。たとえば普段使っている Photoshop のショートカットを口で説明しようとすると、すぐには出てこない。手…