1
株式会社コミュニティコム
〒116-0013
東京都荒川区西日暮里5-37-5 NSO2階
URL： http://www.communitycom.jp/
E-MAIL： [email protected]
星野 邦敏
WordPressとSNSを連携させるサイト事例と
その作り方
2
スライド資料は既に公開しています。
株式会社コミュニティコム
http://www.communitycom.jp/2012/11/03/wordcamp-osaka-2012-2/
WordCamp Osaka 2012
始めに
3
０．自己紹介
１．WordPressとSNS連携のサイト事例
２．ソーシャルアイコンで繋げる
３．WordPress
←→ SNS
４．WordPress会員制サイトログインをSNSで
５．SNSのWebAPIをWordPressに表示
WordCamp Osaka 2012
目次
4
０．自己紹介
１．WordPressとSNS連携のサイト事例
２．ソーシャルアイコンで繋げる
３．WordPress
←→ SNS
４．WordPress会員制サイトログインをSNSで
５．SNSのWebAPIをWordPressに表示
WordCamp Osaka 2012
目次
5
株式会社コミュニティコムという会社で、
自社運営サイトやアプリ、他企業様向けサイトも作っています。
オープンソースの活動をしたり、IT系の勉強会を主催したり、
地域の活動をしたり。
WordPressをCMSとしてWEBサイトを作ることが増えています。
星野 邦敏(ほしの くにとし)
Twitter ： @khoshino
Facebook : 星野邦敏（Kunitoshi Hoshino）
WordCamp Osaka 2012
自己紹介
6
WordPressのイベントである
「WordCamp」や「WordBench」に
スタッフやスピーカーとして参加。
WordCamp Osaka 2012
自己紹介
7
WordPress日本語サイトの「イベントカレンダー」を更新する係。
ココ
WordCamp Osaka 2012
自己紹介
8
公式ディレクトリにプラグインを登録したり。
Japan Tenkiプラグイン
→全国142地域の天気を自動表示
Hello Wapuuプラグイン
→ブログ更新を応援
WordCamp Osaka 2012
自己紹介
9
WordPressに関して、書籍や雑誌で執筆をしたり。
2012年1月に出版
web creators特別号
Webサイト制作
最新トレンドの傾向と対策
2012年3月に出版
速習デザインWordPress
2012年2月に出版
Web Designing 2012年3月号
WordCamp Osaka 2012
自己紹介
10
WordPressに関して、書籍や雑誌で執筆をしたり。
2012年7月に出版
web creators特別号
スマートフォン・ソーシャル
メディア・WordPress
今も執筆中です。
WordCamp Osaka 2012
自己紹介
11
埼玉県さいたま市
大宮駅東口徒歩１分
65坪、215平米。
2012年12月1日（土）
本格オープン予定。
名前が、
「7F」に決まりました！
最近の関心事は、コワーキングスペースを
作ることです。
https://www.facebook.com/office7F
http://office7f.com/
WordCamp Osaka 2012
自己紹介
12
０．自己紹介
１．WordPressとSNS連携のサイト事例
２．ソーシャルアイコンで繋げる
３．WordPress
←→ SNS
４．WordPress会員制サイトログインをSNSで
５．SNSのWebAPIをWordPressに表示
WordCamp Osaka 2012
目次
13
最近よく見るソーシャルアイコンとの連携
株式会社カカクコム
http://corporate.kakaku.com/
WordCamp Osaka 2012
WordPressとSNS連携のサイト事例
企業サイトでも
14
最近よく見るソーシャルアイコンとの連携
サイボウズLiveマガジン
http://magazine.cybozulive.com/
WordCamp Osaka 2012
WordPressとSNS連携のサイト事例
マガジンサイトでも
15
最近よく見るソーシャルアイコンとの連携
株式会社コミュニティコム
http://www.communitycom.jp/2012/09/15/wordcamp-tokyo-2012-2/
WordCamp Osaka 2012
WordPressとSNS連携のサイト事例
ブログでも
16
WordPressの記事の更新を、
Twitterに流す。
WordCamp Osaka 2012
17
WordPressの記事の更新を、
Facebookに流す。
WordCamp Osaka 2012
18
TwitterのつぶやきをWordPressに
保存する。
WordCamp Osaka 2012
19
Facebookの書き込みをWordPressに
保存する。
WordCamp Osaka 2012
20
TwitterやFacebookのアカウントで、
WordPressコメントに書き込み。
WordCamp Osaka 2012
21
TwitterやFacebookのアカウントで、
WordPressのユーザー登録。
WordCamp Osaka 2012
22
Twitterの特定のキーワードのつぶやき
最新１０件を取得して表示。
WordCamp Osaka 2012
23
何で連携する必要が
あるの？
WordCamp Osaka 2012
24
・SNSからのアクセス流入を期待。
・既にSNSのアカウントを持っている
人から登録してもらえる。
WordCamp Osaka 2012
WordPressとSNS連携のサイト事例
＜WordPress側のメリット＞
＜SNS側のメリット＞
・WPからのアクセス流入を期待。
Facebook for WordPress（FB公式プラグイン）
25
そもそも
何で連携できるの？
WordCamp Osaka 2012
26
TwitterやFacebookが、APIを公開しているから。
WordCamp Osaka 2012
WordPressとSNS連携のサイト事例
27
Application Programming Interface
API（アプリケーション・プログラミング・インタフェース、Application Programming Interface）とは、
アプリケーションから利用できる、オペレーティングシステムやプログラミング言語で用意された
ライブラリなどの機能の入り口と なるものである。主に、ファイル制御、ウインドウ制御、画像処理、
文字制御などのための関数として提供されることが多い。
つまり、簡単にいえば、アプリケーションをプログラムするにあたって、プログラムの手間を
省くため、もっと簡潔にプログラムできるように設定されたインターフェースの事である。
（Wikipediaより）
APIとは？
WordCamp Osaka 2012
WordPressとSNS連携のサイト事例
28
要は、
そのWEBサービスにあるデータを、
自由に使えると言うこと。
APIとは？
WordCamp Osaka 2012
WordPressとSNS連携のサイト事例
29
広告主
広告仲介業者や広告代理店
（例）リンクシェア
自分の運営サイト
インターネットユーザー
Web APIや
オープンソース
無料で、 Web APIや オープンソース を公開 直接広告 （純広告） として報酬 報酬 手数料 契約 提携 Web APIや オープンソースを 世の中に広める 対象となる ユーザーを 集客して、 成果に貢献する 無料で、その分野・テーマに関する情報が手に入り、 かつ、ユーザー間での交流ができる 得た広告報酬等により、 サービスをより向上させる図にすると、
こういうイメージ。
WordCamp Osaka 2012
WordPressとSNS連携のサイト事例
30
＜WEB制作者のメリット＞
他社の膨大なデータベースや機能を、無料で利用できるため、
Webサイトの開発コストを大幅に削減でき、効率的に制作できる。
＜API提供会社のメリット＞
自社のみでは考え付かないようなWEBサービス等を、
外部の誰かが作ってくれるため、結果として、自社サービスの
利用者が増えることが期待できる。
Web APIのメリット
WordCamp Osaka 2012
WordPressとSNS連携のサイト事例
31
・提供先のAPIの仕様が変わったら、対応しないと反応しなくなる。
→Twitterの仕様変更に対応していないWordPressプラグインは
使えなくなってしまう。
・提供先のAPIの利用規約が変わったら、そもそも使えなくなる。
→Twitterの利用規約が変わって、制限が増えた。
Twitterブログ: Twitter API v1.1でのAPI利用ルールの変更について
http://blog.jp.twitter.com/2012/08/twitter-api-v11aip.html
Web APIの注意点
WordCamp Osaka 2012
32
０．自己紹介
１．WordPressとSNS連携のサイト事例
２．ソーシャルアイコンで繋げる
３．WordPress
←→ SNS
４．WordPress会員制サイトログインをSNSで
５．SNSのWebAPIをWordPressに表示
WordCamp Osaka 2012
目次
33
最近よく見るソーシャルアイコンとの連携
株式会社コミュニティコム
http://www.communitycom.jp/2012/09/15/wordcamp-tokyo-2012-2/
WordCamp Osaka 2012
ソーシャルアイコンで繋げる
ブログでも
34
具体的な実装方法は？
WordCamp Osaka 2012
ソーシャルアイコンで繋げる
35
プラグイン
「WP Social Bookmarking Light」
色々なソーシャルアイコンを、
WordPressの本文の
上または下に設置する
ことができるプラグイン。
WordCamp Osaka 2012
ソーシャルアイコンで繋げる
36
ホームページ・ビルダー17でも。
ホームページ・ビルダーの
管理画面から編集。
WordCamp Osaka 2012
ソーシャルアイコンで繋げる
37
プラグインを使わず、テーマに書く方法も。
<ul> <li>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="khoshino" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript"
src="//platform.twitter.com/widgets.js"></script> </li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink();
?>&layout=box_count&show_faces=false&width=50&action=like&colorscheme=light&height =62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;"
allowTransparency="true"></iframe> </li>
<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
<li>
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button"
data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはて なブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブッ クマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="
http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </li> </ul>
WordCamp Osaka 2012
ソーシャルアイコンで繋げる
デザインの自由度が高い。
http://www.communitycom.jp/2012/09/13/twitter-facebook-google-hatena/
38
ここで注目。
WordCamp Osaka 2012
ソーシャルアイコンで繋げる
39
OGP（Open Graph protocol）
→要は、SNSにWebサイトの情報を認識してもらうもの。
Facebookに流れてきたとして、
どちらの方がクリックしてもらいやすい？
WordCamp Osaka 2012
ソーシャルアイコンで繋げる
40
OGPの実装。meta情報としてOGPを書く。
<!-- facebook ogp -->
<meta property="og:locale" content="ja_JP"> <meta property="og:type" content="article">
<meta property="fb:admins" content="（ココにFacebookのユーザーIDを書く、半角数字）">
<meta property="fb:app_id" content="（ココにFacebookのPlatformアプリケーションIDを書く、半角数字）"> <meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php if (has_post_thumbnail()) :?> <?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'medium'); ?>
<meta property="og:image" content="<?php echo $image_url[0]; ?>"> <?php else: ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/（ココに画像までのパスを書く）"> <?php endif ;?>
<?php if (is_home() || is_front_page()) :?>
<meta property="og:title" content="<?php bloginfo('name'); ?>"> <?php else: ?>
<meta property="og:title" content="<?php the_title(); ?>"> <?php endif ;?>
<?php if (is_home() || is_front_page()) :?>
<meta property="og:url" content="<?php bloginfo('url'); ?>"> <?php else: ?>
<meta property="og:url" content="<?php the_permalink(); ?>"> <?php endif ;?>
<meta property="og:description" content="<?php the_excerpt(); ?>">
