Webページとソーシャルメディアを連携するテクニック SMOでWebサイトに人を呼び込む実践マニュアル

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のソーシャル管理でボタンの動作を管理する

付属データはこちら

お問い合わせ

内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。

正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。

利用許諾に関するお問い合わせ

本書の書影（表紙画像）をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影（表紙画像）以外のご利用については、こちらからお問い合わせください。