wordpressとsnsを連携させるサイト事例と...

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 始めに

http://www.communitycom.jp/2012/11/03/wordcamp-osaka-2012-2/

3

０．自己紹介

１．WordPressとSNS連携のサイト事例

２．ソーシャルアイコンで繋げる

３．WordPress ←→ SNS

４．WordPress会員制サイトログインをSNSで

５．SNSのWebAPIをWordPressに表示

WordCamp Osaka 2012 目次

4

０．自己紹介







5

株式会社コミュニティコムという会社で、自社運営サイトやアプリ、他企業様向けサイトも作っています。オープンソースの活動をしたり、IT系の勉強会を主催したり、地域の活動をしたり。 WordPressをCMSとしてWEBサイトを作ることが増えています。

星野邦敏(ほしのくにとし) Twitter ： @khoshino Facebook : 星野邦敏（Kunitoshi Hoshino）

WordCamp Osaka 2012 自己紹介

6

WordPressのイベントである「WordCamp」や「WordBench」にスタッフやスピーカーとして参加。


7

WordPress日本語サイトの「イベントカレンダー」を更新する係。

ココ


8

公式ディレクトリにプラグインを登録したり。

Japan Tenkiプラグイン →全国142地域の天気を自動表示

Hello Wapuuプラグイン →ブログ更新を応援


9

WordPressに関して、書籍や雑誌で執筆をしたり。

2012年1月に出版 web creators特別号 Webサイト制作最新トレンドの傾向と対策

2012年3月に出版速習デザインWordPress

2012年2月に出版 Web Designing 2012年3月号


10

WordPressに関して、書籍や雑誌で執筆をしたり。

2012年7月に出版 web creators特別号スマートフォン・ソーシャルメディア・WordPress

今も執筆中です。


11

埼玉県さいたま市大宮駅東口徒歩１分 65坪、215平米。

2012年12月1日（土）本格オープン予定。

名前が、「7F」に決まりました！

最近の関心事は、コワーキングスペースを作ることです。

https://www.facebook.com/office7F http://office7f.com/


https://www.facebook.com/office7F

http://office7f.com/

12

０．自己紹介







13

最近よく見るソーシャルアイコンとの連携

株式会社カカクコム http://corporate.kakaku.com/

WordCamp Osaka 2012 WordPressとSNS連携のサイト事例

企業サイトでも

http://corporate.kakaku.com/

14


サイボウズLiveマガジン http://magazine.cybozulive.com/


マガジンサイトでも

http://magazine.cybozulive.com/

15


株式会社コミュニティコム http://www.communitycom.jp/2012/09/15/wordcamp-tokyo-2012-2/


ブログでも

http://www.communitycom.jp/2012/09/15/wordcamp-tokyo-2012-2/

16

WordPressの記事の更新を、 Twitterに流す。


17

WordPressの記事の更新を、 Facebookに流す。


18

TwitterのつぶやきをWordPressに保存する。


19

Facebookの書き込みをWordPressに保存する。


20

TwitterやFacebookのアカウントで、 WordPressコメントに書き込み。


21

TwitterやFacebookのアカウントで、 WordPressのユーザー登録。


22

Twitterの特定のキーワードのつぶやき最新１０件を取得して表示。


23

何で連携する必要があるの？


24

・SNSからのアクセス流入を期待。・既にSNSのアカウントを持っている人から登録してもらえる。


＜WordPress側のメリット＞

＜SNS側のメリット＞・WPからのアクセス流入を期待。 Facebook for WordPress（FB公式プラグイン） https://developers.facebook.com/wordpress/

https://developers.facebook.com/wordpress/

25

そもそも何で連携できるの？


26

TwitterやFacebookが、APIを公開しているから。


https://dev.twitter.com/ http://developers.facebook.com/

https://dev.twitter.com/

http://developers.facebook.com/

27

Application Programming Interface API（アプリケーション・プログラミング・インタフェース、Application Programming Interface）とは、アプリケーションから利用できる、オペレーティングシステムやプログラミング言語で用意されたライブラリなどの機能の入り口となるものである。主に、ファイル制御、ウインドウ制御、画像処理、文字制御などのための関数として提供されることが多い。つまり、簡単にいえば、アプリケーションをプログラムするにあたって、プログラムの手間を省くため、もっと簡潔にプログラムできるように設定されたインターフェースの事である。

（Wikipediaより）

APIとは？


28

要は、

そのWEBサービスにあるデータを、自由に使えると言うこと。

APIとは？


29

広告主

広告仲介業者や広告代理店（例）リンクシェア

自分の運営サイト

インターネットユーザー

Web APIやオープンソース

無料で、 Web APIやオープンソースを公開

直接広告（純広告）として報酬

報酬

手数料

契約

提携

Web APIやオープンソースを世の中に広める

対象となるユーザーを集客して、成果に貢献する

無料で、その分野・テーマに関する情報が手に入り、かつ、ユーザー間での交流ができる

得た広告報酬等により、サービスをより向上させる

図にすると、こういうイメージ。


30

＜WEB制作者のメリット＞他社の膨大なデータベースや機能を、無料で利用できるため、 Webサイトの開発コストを大幅に削減でき、効率的に制作できる。

＜API提供会社のメリット＞自社のみでは考え付かないようなWEBサービス等を、外部の誰かが作ってくれるため、結果として、自社サービスの利用者が増えることが期待できる。

Web APIのメリット


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の注意点


http://blog.jp.twitter.com/2012/08/twitter-api-v11aip.html

32

０．自己紹介







33


株式会社コミュニティコム http://www.communitycom.jp/2012/09/15/wordcamp-tokyo-2012-2/

WordCamp Osaka 2012 ソーシャルアイコンで繋げる

ブログでも

http://www.communitycom.jp/2012/09/15/wordcamp-tokyo-2012-2/

34

具体的な実装方法は？


35

プラグイン「WP Social Bookmarking Light」

色々なソーシャルアイコンを、 WordPressの本文の上または下に設置することができるプラグイン。


36

ホームページ・ビルダー17でも。

ホームページ・ビルダーの管理画面から編集。


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>


デザインの自由度が高い。 http://www.communitycom.jp/2012/09/13/twitter-facebook-google-hatena/

https://twitter.com/share

http://www.facebook.com/plugins/like.php?href=

https://apis.google.com/js/plusone.js

http://b.hatena.ne.jp/entry/

http://b.st-hatena.com/images/entry-button/button-only.gif

http://b.st-hatena.com/js/bookmark_button.js

http://b.st-hatena.com/js/bookmark_button.js

http://www.communitycom.jp/2012/09/13/twitter-facebook-google-hatena/

38

ここで注目。


39

OGP（Open Graph protocol） →要は、SNSにWebサイトの情報を認識してもらうもの。

Facebookに流れてきたとして、どちらの方がクリックしてもらいやすい？


40

OGPの実装。meta情報として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(); ?>">


http://www.communitycom.jp/2012/05/26/wordpress-facebook-ogp/

プラグインもある。テーマに書くと自由度が高い。

http://www.communitycom.jp/2012/05/26/wordpress-facebook-ogp/

41

０．自己紹介







42

WordPressの記事の更新を、 TwitterやFacebookに流す。または、TwitterやFacebookの情報を、 WordPressに保存する。

WordCamp Osaka 2012 WordPress ←→SNS

43

プラグインで実装。「Social」プラグイン。

WordPressから、 TwitterとFacebookのタイムラインに更新を流せる。また、コメント欄で、 SNSアカウントとしてコメント投稿できる。


44

「Social」プラグインでの投稿。

Broadcast Postを「Yes」にする。プレビューが表示される。


45

「Social」プラグインでの投稿。


46

「Social」プラグインでのコメント欄。


47

「Facebook」公式WordPressプラグイン。

Facebookが公式に公開しているプラグインがあります。 http://wordpress.org/extend/plugins/facebook/


http://wordpress.org/extend/plugins/facebook/

48

「Facebook」公式WordPressプラグイン。

・「いいね！」アイコン設置。・コメント欄をFB対応に。・FBで繋がっている人がどの記事に「いいね！」をしているか分かる。・オススメの記事を表示。など。


49

注意点・TwitterやFacebookのAPIの仕様変更に対応しなくなったプラグインは突然動かなくなることもある。・自動が良いとは限らない。

「Social」や「Facebook」プラグイン以外にも、例えば、 Facebookページに投稿する「Wordbooker」プラグインなど、他にもSNS連携のプラグインはある。もちろん、自分でプログラムを書くこともできます。


50

０．自己紹介







51

TwitterやFacebookのアカウントで、 WordPressのユーザー登録。

WordCamp Osaka 2012 WordPress会員制サイトログインをSNSで

52

・ユーザーは、新たにIDやパスワードを覚える必要がない。

・サイト運営者はパスワード情報を持つことがない。・ユーザーとしてもパスワード情報をサイトに渡す必要がない。

メリット


53

プラグインで実装。「Gianism」プラグイン。このプラグインを使うと、Facebook, twitter, Googleのアカウントで新規登録およびログインできるようになります。登録制のWordPressサイトを作っている場合、ユーザーにアカウントを作ってもらうのが一苦労。このプラグインを使えば、Webサービスの情報を使ってログインできるようになります。ユーザーは新しいユーザー名とパスワードを覚える必要がありません。


http://wordpress.org/extend/plugins/gianism/

http://wordpress.org/extend/plugins/gianism/

54

プラグインで実装。「Gianism」プラグイン。


ログイン | 高橋文樹.com https://takahashifumiki.com/login/

WordPressで会員制サイトを作って、ユーザーに投稿してもらったり、登録してもらうサイトを作る際に、 WordPress独自登録でなく、 SNSのアカウントでクリック１つでログイン登録させることで、登録率を上げる。

https://takahashifumiki.com/login/

55


WordCamp Osaka 2012 参加登録 http://wcosaka.com/login/

例えば、こういうログインフォームに「Gianism」プラグインを使って SNSアカウントでのログインをさせることもできる。

http://wcosaka.com/login/

56

０．自己紹介







57

Twitterの特定のキーワードのつぶやき最新１０件を取得して表示。

WordCamp Osaka 2012 SNSのWebAPIをWordPressに表示

58

・SNSの情報を、自分の運営サイトに表示することで、より多くの情報を表示しているように見せることができる。

メリット


59

各地域の天気予報を自動で取得する。

WebAPIでできる具体例（１）


60

そのスポットの周辺の写真を自動で表示させる。

WebAPIでできる具体例（２）


61

各記事に関連する画像を自動表示する。

WebAPIでできる具体例（３）


62

そのスポットから２点間の直線距離の近い順番に、カフェやレストランを、自動で一覧表示する。

この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。


WebAPIでできる具体例（４）

63

そのスポットから２点間の直線距離の近い順番に、ホテルを、自動で一覧表示する。


WebAPIでできる具体例（５）


64

記事に関連する商品を自動で一覧表示する。


WebAPIでできる具体例（６）


65

最近の検索エンジン動向。重複コンテンツに厳しい！ →サイトの被リンク数や、ドメインエイジや、オリジナルコンテンツ比率にもよって変わる？ →あえて、JavaScriptで APIを表示するサイトも？

http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=66359


http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=66359

66

WordPressとSNSを連携させると、 Webサイトへのアクセスが期待できることも。

また、SNSのWebAPIと連携させると、 WordPressをWebサービスを作るツールとしても活用できる。

まとめ

WordCamp Osaka 2012 最後に

67

今後のお問い合わせなど何かありましたら、 Twitter： @khoshino Mail： [email protected] URL： http://www.communitycom.jp/ http://wp3.jp/ などに、ご連絡ください。

ありがとうございました！

株式会社コミュニティコム星野邦敏

WordCamp Osaka 2012 最後に

wordpressとsnsを連携させるサイト事例と...

Documents