PowerPoint プレゼンテーション

Transcription

1 WordPress と SNS を連携させるサイト事例と その作り方 株式会社コミュニティコム星野邦敏 東京都荒川区西日暮里 NSO2 階 URL: 1

2 始めに スライド資料は既に公開しています 株式会社コミュニティコム 2

3 目次 0. 自己紹介 1.WordPressとSNS 連携のサイト事例 2. ソーシャルアイコンで繋げる 3.WordPress SNS 4.WordPress 会員制サイトログインをSNSで 5.SNSのWebAPIをWordPressに表示 3

4 目次 0. 自己紹介 1.WordPressとSNS 連携のサイト事例 2. ソーシャルアイコンで繋げる 3.WordPress SNS 4.WordPress 会員制サイトログインをSNSで 5.SNSのWebAPIをWordPressに表示 4

5 自己紹介 星野邦敏 ( ほしのくにとし ) Twitter Facebook : 星野邦敏 (Kunitoshi Hoshino) 株式会社コミュニティコムという会社で 自社運営サイトやアプリ 他企業様向けサイトも作っています オープンソースの活動をしたり IT 系の勉強会を主催したり 地域の活動をしたり WordPressをCMSとしてWEBサイトを作ることが増えています 5

6 自己紹介 WordPressのイベントである WordCamp や WordBench にスタッフやスピーカーとして参加 6

7 自己紹介 WordPress 日本語サイトの イベントカレンダー を更新する係 ココ 7

8 自己紹介 公式ディレクトリにプラグインを登録したり Japan Tenki プラグイン 全国 142 地域の天気を自動表示 Hello Wapuu プラグイン ブログ更新を応援 8

9 自己紹介 WordPress に関して 書籍や雑誌で執筆をしたり 2012 年 1 月に出版 web creators 特別号 Webサイト制作最新トレンドの傾向と対策 2012 年 2 月に出版 Web Designing 2012 年 3 月号 2012 年 3 月に出版 速習デザイン WordPress 9

10 自己紹介 WordPress に関して 書籍や雑誌で執筆をしたり 今も執筆中です 2012 年 7 月に出版 web creators 特別号スマートフォン ソーシャルメディア WordPress 10

11 自己紹介最近の関心事は コワーキングスペースを 作ることです 埼玉県さいたま市大宮駅東口徒歩 1 分 65 坪 215 平米 2012 年 12 月 1 日 ( 土 ) 本格オープン予定 名前が 7F に決まりました!

12 目次 0. 自己紹介 1.WordPressとSNS 連携のサイト事例 2. ソーシャルアイコンで繋げる 3.WordPress SNS 4.WordPress 会員制サイトログインをSNSで 5.SNSのWebAPIをWordPressに表示 12

13 WordPress と SNS 連携のサイト事例 最近よく見るソーシャルアイコンとの連携 企業サイトでも 株式会社カカクコム 13

14 WordPress と SNS 連携のサイト事例 最近よく見るソーシャルアイコンとの連携 マガジンサイトでも サイボウズ Live マガジン 14

15 WordPress と SNS 連携のサイト事例 最近よく見るソーシャルアイコンとの連携 ブログでも 株式会社コミュニティコム 15

16 WordPress と SNS 連携のサイト事例 WordPressの記事の更新を Twitterに流す 16

17 WordPress と SNS 連携のサイト事例 WordPressの記事の更新を Facebookに流す 17

18 WordPress と SNS 連携のサイト事例 TwitterのつぶやきをWordPressに保存する 18

19 WordPress と SNS 連携のサイト事例 Facebookの書き込みをWordPressに保存する 19

20 WordPress と SNS 連携のサイト事例 TwitterやFacebookのアカウントで WordPressコメントに書き込み 20

21 WordPress と SNS 連携のサイト事例 TwitterやFacebookのアカウントで WordPressのユーザー登録 21

22 WordPress と SNS 連携のサイト事例 Twitterの特定のキーワードのつぶやき最新 10 件を取得して表示 22

23 WordPress と SNS 連携のサイト事例 何で連携する必要が あるの? 23

24 WordPress と SNS 連携のサイト事例 <WordPress 側のメリット> SNSからのアクセス流入を期待 既にSNSのアカウントを持っている人から登録してもらえる <SNS 側のメリット> WPからのアクセス流入を期待 Facebook for WordPress(FB 公式プラグイン ) 24

25 WordPress と SNS 連携のサイト事例 そもそも 何で連携できるの? 25

26 WordPress と SNS 連携のサイト事例 Twitter や Facebook が API を公開しているから

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

28 WordPress と SNS 連携のサイト事例 API とは? 要は その WEB サービスにあるデータを 自由に使えると言うこと 28

29 WordPress と SNS 連携のサイト事例 図にすると こういうイメージ 広告主 契約 手数料 Web API やオープンソース 直接広告 ( 純広告 ) として報酬 無料で Web API やオープンソースを公開 対象となるユーザーを集客して 成果に貢献する 提携 広告仲介業者や広告代理店 ( 例 ) リンクシェア 報酬 Web API やオープンソースを世の中に広める 自分の運営サイト 無料で その分野 テーマに関する情報が手に入り かつ ユーザー間での交流ができる 得た広告報酬等により サービスをより向上させる インターネットユーザー 29

30 WordPress と SNS 連携のサイト事例 Web API のメリット <WEB 制作者のメリット> 他社の膨大なデータベースや機能を 無料で利用できるため Webサイトの開発コストを大幅に削減でき 効率的に制作できる <API 提供会社のメリット> 自社のみでは考え付かないようなWEBサービス等を 外部の誰かが作ってくれるため 結果として 自社サービスの利用者が増えることが期待できる 30

31 WordPress と SNS 連携のサイト事例 Web API の注意点 提供先のAPIの仕様が変わったら 対応しないと反応しなくなる Twitterの仕様変更に対応していないWordPressプラグインは使えなくなってしまう 提供先のAPIの利用規約が変わったら そもそも使えなくなる Twitterの利用規約が変わって 制限が増えた Twitterブログ : Twitter API v1.1でのapi 利用ルールの変更について 31

32 目次 0. 自己紹介 1.WordPressとSNS 連携のサイト事例 2. ソーシャルアイコンで繋げる 3.WordPress SNS 4.WordPress 会員制サイトログインをSNSで 5.SNSのWebAPIをWordPressに表示 32

33 ソーシャルアイコンで繋げる 最近よく見るソーシャルアイコンとの連携 ブログでも 株式会社コミュニティコム 33

34 ソーシャルアイコンで繋げる 具体的な実装方法は? 34

35 ソーシャルアイコンで繋げる プラグイン WP Social Bookmarking Light 色々なソーシャルアイコンを WordPressの本文の上または下に設置することができるプラグイン 35

36 ソーシャルアイコンで繋げる ホームページ ビルダー 17 でも ホームページ ビルダーの 管理画面から編集 36

37 ソーシャルアイコンで繋げる プラグインを使わず テーマに書く方法も <ul> <li> <a href=" 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=" 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=" size="tall" href="<?php the_permalink();?>"></g:plusone></li> <li> <a href=" the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmarktitle="<?php the_title();?> <?php bloginfo('name');?>" data-hatena-bookmark-layout="vertical" title=" このエントリーをはてなブックマークに追加 "><img src=" alt=" このエントリーをはてなブックマークに追加 " width="20" height="20" style="border: none;" /></a><script type="text/javascript" src=" charset="utf-8" async="async"></script> </li> </ul> デザインの自由度が高い 37

38 ソーシャルアイコンで繋げる ここで注目 38

39 ソーシャルアイコンで繋げる OGP(Open Graph protocol) 要は SNS に Web サイトの情報を認識してもらうもの Facebook に流れてきたとして どちらの方がクリックしてもらいやすい? 39

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();?>"> プラグインもある テーマに書くと自由度が高い 40

41 目次 0. 自己紹介 1.WordPressとSNS 連携のサイト事例 2. ソーシャルアイコンで繋げる 3.WordPress SNS 4.WordPress 会員制サイトログインをSNSで 5.SNSのWebAPIをWordPressに表示 41

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

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

44 WordPress SNS Social プラグインでの投稿 Broadcast Post を Yes にする プレビューが表示される 44

45 WordPress SNS Social プラグインでの投稿 45

46 WordPress SNS Social プラグインでのコメント欄 46

47 WordPress SNS Facebook 公式 WordPress プラグイン Facebookが公式に公開しているプラグインがあります 47

48 WordPress SNS Facebook 公式 WordPress プラグイン いいね! アイコン設置 コメント欄をFB 対応に FBで繋がっている人がどの記事に いいね! をしているか分かる オススメの記事を表示 など 48

49 WordPress SNS 注意点 TwitterやFacebookのAPIの仕様変更に対応しなくなったプラグインは突然動かなくなることもある 自動が良いとは限らない Social や Facebook プラグイン以外にも 例えば Facebookページに投稿する Wordbooker プラグインなど 他にもSNS 連携のプラグインはある もちろん 自分でプログラムを書くこともできます 49

50 目次 0. 自己紹介 1.WordPressとSNS 連携のサイト事例 2. ソーシャルアイコンで繋げる 3.WordPress SNS 4.WordPress 会員制サイトログインをSNSで 5.SNSのWebAPIをWordPressに表示 50

51 WordPress 会員制サイトログインを SNS で TwitterやFacebookのアカウントで WordPressのユーザー登録 51

52 WordPress 会員制サイトログインを SNS で メリット ユーザーは 新たにIDやパスワードを覚える必要がない サイト運営者はパスワード情報を持つことがない ユーザーとしてもパスワード情報をサイトに渡す必要がない 52

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

54 WordPress 会員制サイトログインを SNS で プラグインで実装 Gianism プラグイン ログイン 高橋文樹.com WordPressで会員制サイトを作って ユーザーに投稿してもらったり 登録してもらうサイトを作る際に WordPress 独自登録でなく SNSのアカウントでクリック1つでログイン登録させることで 登録率を上げる 54

55 WordPress 会員制サイトログインを SNS で 例えば こういうログインフォームに Gianism プラグインを使って SNSアカウントでのログインをさせることもできる 参加登録 55

56 目次 0. 自己紹介 1.WordPressとSNS 連携のサイト事例 2. ソーシャルアイコンで繋げる 3.WordPress SNS 4.WordPress 会員制サイトログインをSNSで 5.SNSのWebAPIをWordPressに表示 56

57 SNS の WebAPI を WordPress に表示 Twitterの特定のキーワードのつぶやき最新 10 件を取得して表示 57

58 SNS の WebAPI を WordPress に表示 メリット SNSの情報を 自分の運営サイトに表示することで より多くの情報を表示しているように見せることができる 58

59 SNS の WebAPI を WordPress に表示 WebAPI でできる具体例 (1) 各地域の天気予報を 自動で取得する 59

60 SNS の WebAPI を WordPress に表示 WebAPI でできる具体例 (2) そのスポットの周辺の 写真を自動で表示させる 60

61 SNS の WebAPI を WordPress に表示 WebAPI でできる具体例 (3) 各記事に関連する画像を 自動表示する 61

62 SNS の WebAPI を WordPress に表示 WebAPI でできる具体例 (4) そのスポットから 2 点間の直線距離の近い順番に カフェやレストランを 自動で一覧表示する この部分は 自動でアフィリエイトリンクになっていて成果の収益に繋がる 62

63 SNS の WebAPI を WordPress に表示 WebAPI でできる具体例 (5) そのスポットから 2 点間の直線距離の近い順番に ホテルを 自動で一覧表示する この部分は 自動でアフィリエイトリンクになっていて成果の収益に繋がる 63

64 SNS の WebAPI を WordPress に表示 WebAPI でできる具体例 (6) 記事に関連する商品を 自動で一覧表示する この部分は 自動でアフィリエイトリンクになっていて成果の収益に繋がる 64

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

66 まとめ 最後に WordPressとSNSを連携させると Webサイトへのアクセスが期待できることも また SNSのWebAPIと連携させると WordPressをWebサービスを作るツールとしても活用できる 66

67 最後に今後のお問い合わせなど 何かありましたら Mail: URL: などに ご連絡ください ありがとうございました! 株式会社コミュニティコム星野邦敏 67