1 ソーシャルメディア連携の基礎知識
1.1 ソーシャルメディア時代の到来
Webサイトの今後
COLUMN ソーシャルメディアとは
1.2 SMOとは
1.3 SMOの必要性
COLUMN Webサイト制作者にとってSMOが必須な理由
1.4 企業や個人が活用できるソーシャルメディア
Facebook
Twitter
Google+
LinkedIn
はてなブックマーク
Evernote
1.5 SMOの基本的な手法
連携ボタンを設置する
コメント欄を設置する
タイムラインを表示する
ソーシャルメディアに掲載される内容を制御する
Webページの更新情報の通知を自動化する
2 ソーシャルメディア連携の実践ルール
2.1 SMOの実施例
日本コカ・コーラ
ユニバーサル・スタジオ・ジャパン
2.2 SMOの実践ルール10
ルール1 Web サイトの各ページに連携ボタンを設置する
ルール2 連携部品は目立つように配置する
ルール3 連携ボタンが読み込まれるタイミングを考慮する
ルール4 公式アカウントを紹介するページを設ける
ルール5 独自プログラムによる個性のある連携を実施する
ルール6 連携部品のコードはCMS のテンプレートで管理・共有する
ルール7 連携ツールなどを活用して連携の手間を最小限にする
ルール8 OGPは全ページに適用する
ルール9 定期的に連携の効果を測定する
ルール10 画像や動画コンテンツを多く用意する
3 Twitterとの連携
3.1 Twitterと連携する理由
リツイートと口コミの関係
Twitterを活用したPR
3.2 公式のツイートボタンを設置する
ツイートボタンの動作
ツイートボタンを作成する
ツイートボタンのコードを読む
3.3 ツイートボタンをカスタマイズする
コードカスタマイズでのみ指定できるオプション
data-countオプションでカウントを垂直に表示する
data-counturlオプションでURL を指定する
iframeでツイートボタンを表示する（JavaScriptが使えない場合）
独自のツイートボタンを作成する
3.4 公式のフォローボタンを設置する
フォローボタンの動作
フォローボタンの効果
フォローボタンを作成する
フォローボタンのコードを読む
3.5 フォローボタンをカスタマイズする
フォローボタンのデザインを変更する
iframeでフォローボタンを表示する（JavaScript が使えない場合）
独自のフォローボタンを作成する
フォローボタンの非同期読み込み
3.6 プロフィールウィジェットを設置する
プロフィールウィジェットの動作
プロフィールウィジェットを設置する
プロフィールウィジェットのコードを読む
3.7 Web Intentsで返信ボタンやリツイートボタンを設置する
Web Intentsとは
返信ボタンを作成する
リツイートボタンを作成する
お気に入りボタンを作成する
4 Facebookとの連携
4.1 FacebookとWeb連携
4.2 「いいね！」ボタンを設置する
「いいね！」ボタンの動作
「いいね！」ボタンの作成手順
ボタンのオプションの詳細
コード形式（HTML5、XFBML、iframe）の選択
COLUMN Facebookのコード仕様の改定と注意点
4.3 「いいね！」ボタンのコードを読む
XFBML形式
HTML5形式
iframe形式
4.4 コメント欄を設置する
コメント欄の動作
コメント欄の作成方法
コメント欄のオプションの詳細
コード形式の選択とコードオプション
5 その他のソーシャルメディアとの連携
5.1 Google「+1」ボタンを設置する
「+1」ボタンの効果
「+1」ボタンの作成手順
COLUMN スニペット
基本オプション
詳細オプション
「+1」ボタンのコードを読む
Google+（SNS）への反映
レンダリングAPIで「+1」ボタンの表示タイミングを指定する
複数の「+1」ボタンを同時に表示する
「+1」ボタンのコールバック関数で特定のプログラムを起動する
5.2 はてなブックマークボタンを設置する ～ソーシャルブックマークとの連携
はてなブックマークボタンを作成する
はてなブックマークボタンのコードを読む
5.3 Evernoteと連携する ～サイトメモリーボタンの設置
サイトメモリーボタンを作成する
5.4 非同期読み込み・コールバック未対応のボタンでの対応策
6 Twitter APIの利用 ～プログラムによる連携
6.1 独自プログラムによる連携
API連携
COLUMN ソーシャルメディア連携とRES
6.2 自分のツイート一覧を表示する
JavaScriptプログラムの動作
JavaScriptプログラムのコード
COLUMN Twitter APIの制限事項
6.3 CGIでTwitterと連携する
CGIプログラムの動作
CGIプログラムのコード
6.4 リツイートの一覧を表示する ～認証が必要なAPIの利用
OAuth認証
連携アプリケーションの登録
リツイートの一覧を表示するAPI
CGIプログラムのコード
COLUMN Rubyの実行環境構築（Windows環境へのRubyのインストール）
COLUMN Rubyのライブラリのインストール
7 CMSにおけるソーシャルメディア連携
7.1 CMSとソーシャルメディア連携
WordPressのプラグイン
7.2 ソーシャルメディアの連携ボタンを自動追加する
AddToAnyプラグインの機能
AddToAnyプラグインのインストール
AddToAnyプラグインを有効化する
7.3 CMSのデザインテンプレートに連携ボタンを設置する
COLUMN CMSのデザインテンプレート
WordPressに連携ボタンのコードを追加する
COLUMN WorldPressのテンプレートファイルと表示場所
7.4 更新情報を自動的にTwitterで通知する ～ WordTwitプラグイン
WordTwitプラグインのインストール
WordTwitプラグインの利用
8 Open Graph Protocolの活用
8.1 ソーシャルグラフ
8.2 Open Graph Protocol
COLUMN CMSでOGPを記述する
8.3 FacebookでOGPコードを生成する
OGP コードのデバッグ
8.4 OGPのプロパティ
基本的なメタデータ
場所・位置情報に関するプロパティ
連絡先に関するプロパティ
動画ファイル特有のプロパティ
音声ファイル特有のプロパティ
規格に関するプロパティ
Facebook特有のプロパティ
8.5 OGPのオブジェクトタイプ
現実世界のオブジェクトに関するオブジェクトタイプ
Webサイトに関するオブジェクトタイプ
9 ソーシャルメディア連携の効果測定
9.1 Google Analyticsの利用準備
Google AnalyticsへWebサイトを登録する
9.2 Google Analyticsでアクセスを解析する
Webサイトへのアクセス数を確認する
参照元からのアクセス数を確認する
9.3 短縮URLでSMOの効果測定を行なう
短縮URLサービスの仕組み
短縮URLサービスbitlyのメリット
bitlyによる分析手順
bitlyのユーザー登録を行なう
bitlyで短縮URLを作成する
bitlyとソーシャルメディアを連携させる
bitlyの分析ツールを使う
9.4 キャンペーンごとにURLを作成する
URL生成ツールとは
キャンペーン用URL作成の仕組み
キャンペーン用URLの作成例
9.5 ソーシャルプラグインの正確な利用状況を測定する
利用状況を正確に測定する理由
「いいね！」ボタンの動作をGoogle Analyticsで管理する
Google Analyticsのソーシャル管理でボタンの動作を管理する
