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();

?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;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(); ?>">

WordCamp Osaka 2012

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

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

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

41

０．自己紹介

１．

WordPress

と

SNS

連携のサイト事例 ２．ソーシャルアイコンで繋げる

３．

WordPress ←→ SNS

４．

WordPress

会員制サイトログインを

SNS

で ５．

SNS

の

WebAPI

を

WordPress

に表示

WordCamp Osaka 2012

目次

42

WordPress

の記事の更新を、

Twitter

や

Facebook

に流す。

または、

Twitter

や

Facebook

の情報を、

WordPress

に保存する。

WordCamp Osaka 2012 WordPress ←→SNS

43

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

WordPress

から、

Twitter

と

Facebook

の タイムラインに更新を 流せる。

また、コメント欄で、

SNS

アカウントとして コメント投稿できる。

WordCamp Osaka 2012 WordPress ←→SNS

44

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

Broadcast Post

を

「

Yes

」にする。 プレビューが表示される。

WordCamp Osaka 2012 WordPress ←→SNS

45

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

WordCamp Osaka 2012 WordPress ←→SNS

46

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

WordCamp Osaka 2012 WordPress ←→SNS

47

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

Facebook

が公式に

公開しているプラグインが あります。

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

WordCamp Osaka 2012 WordPress ←→SNS

48

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

・「いいね！」アイコン設置。

・コメント欄を

FB

対応に。

・

FB

で繋がっている人が どの記事に「いいね！」

をしているか分かる。

・オススメの記事を表示。

など。

WordCamp Osaka 2012 WordPress ←→SNS

49

注意点

・

Twitter

や

Facebook

の

API

の仕様変更に

対応しなくなったプラグインは突然動かなくなる こともある。

・自動が良いとは限らない。

「

Social

」や「

Facebook

」プラグイン以外にも、例えば、

Facebook

ページに投稿する「

Wordbooker

」プラグイン など、他にも

SNS

連携のプラグインはある。

もちろん、自分でプログラムを書くこともできます。

WordCamp Osaka 2012 WordPress ←→SNS

50

０．自己紹介

１．

WordPress

と

SNS

連携のサイト事例 ２．ソーシャルアイコンで繋げる

３．

WordPress ←→ SNS

４．

WordPress

会員制サイトログインを

SNS

で ５．

SNS

の

WebAPI

を

WordPress

に表示

WordCamp Osaka 2012

目次

51

Twitter や Facebook のアカウントで、

WordPress のユーザー登録。

WordCamp Osaka 2012

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

52

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

・サイト運営者はパスワード情報を持つことがない。

・ユーザーとしてもパスワード情報をサイトに渡す必要がない。

メリット

WordCamp Osaka 2012

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

53

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

このプラグインを使うと、Facebook,

twitter, Googleのアカウントで新規登録 およびログインできるようになります。

登録制のWordPressサイトを作って いる場合、ユーザーにアカウントを作って もらうのが一苦労。 このプラグインを 使えば、Webサービスの情報を使って ログインできるようになります。ユーザー は新しいユーザー名とパスワードを

覚える必要がありません。

WordCamp Osaka 2012

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

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

54

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

WordCamp Osaka 2012

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

ログイン | 高橋文樹.com

https://takahashifumiki.com/login/

WordPressで会員制サイトを 作って、ユーザーに投稿して もらったり、登録してもらう サイトを作る際に、

WordPress独自登録でなく、

SNSのアカウントで

クリック１つでログイン登録

させることで、登録率を上げる。

55

WordCamp Osaka 2012

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

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

例えば、

こういうログインフォームに

「Gianism」プラグインを使って SNSアカウントでのログインを させることもできる。

56

０．自己紹介

１．

WordPress

と

SNS

連携のサイト事例 ２．ソーシャルアイコンで繋げる

３．

WordPress ←→ SNS

４．

WordPress

会員制サイトログインを

SNS

で ５．

SNS

の

WebAPI

を

WordPress

に表示

WordCamp Osaka 2012

目次

57

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

WordCamp Osaka 2012

SNS

の

WebAPI

を

WordPress

に表示

58

・SNSの情報を、自分の運営サイトに表示することで、

より多くの情報を表示しているように見せることができる。

メリット

WordCamp Osaka 2012

SNS

の

WebAPI

を

WordPress

に表示

59

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

WebAPI

でできる具体例（１）

WordCamp Osaka 2012

SNS

の

WebAPI

を

WordPress

に表示

60

そのスポットの周辺の

写真を自動で表示させる。

WebAPI

でできる具体例（２）

WordCamp Osaka 2012

SNS

の

WebAPI

を

WordPress

に表示

61

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

WebAPI

でできる具体例（３）

WordCamp Osaka 2012

SNS

の

WebAPI

を

WordPress

に表示

62

そのスポットから

２点間の直線距離の 近い順番に、

カフェやレストランを、

自動で一覧表示する。

この部分は、自動で アフィリエイトリンクに なっていて

成果の収益に繋がる。

WordCamp Osaka 2012

SNS

の

WebAPI

を

WordPress

に表示

WebAPI

でできる具体例（４）

63

そのスポットから

２点間の直線距離の 近い順番に、

ホテルを、

自動で一覧表示する。

この部分は、自動で アフィリエイトリンクに なっていて

成果の収益に繋がる。

WebAPI

でできる具体例（５）

WordCamp Osaka 2012

SNS

の

WebAPI

を

WordPress

に表示

64

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

この部分は、自動で アフィリエイトリンクに なっていて

成果の収益に繋がる。

WebAPI

でできる具体例（６）

WordCamp Osaka 2012

SNS

の

WebAPI

を

WordPress

に表示

65

最近の検索エンジン動向。

重複コンテンツに厳しい！

→

サイトの被リンク数や、

ドメインエイジや、

オリジナルコンテンツ比率 にもよって変わる？

→

あえて、

JavaScript

で

API

を表示するサイトも？

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

WordCamp Osaka 2012

SNS

の

WebAPI

を

WordPress

に表示

66

WordPress

と

SNS

を連携させると、

Web

サイトへのアクセスが期待できることも。

また、

SNS

の

WebAPI

と連携させると、

WordPress

を

Web

サービスを作る ツールとしても活用できる。

まとめ

WordCamp Osaka 2012

最後に

ドキュメント内 PowerPoint プレゼンテーション (ページ 32-67)