アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

google+ ソーシャル

google+ウィジットをwordpressにインストールする方法

投稿日:2011年7月20日 更新日:

google+

google+

google+始まりました。
もう使ってます?

私もすっかりハマっているのだが、残念ながらまだスタートしたばかりということもあり、色々と不満な点も多々ある。

そんな不満な点の一つが、google+のwordpressウィジットがないこと。

いや、無いわけではなくリンクだけを表示するタイプはいくつかあるにはあるが、twitterやFacebookのように幾つかの記事をリスト表示してくれるウィジットは現状ない。

まだgoogle+がAPIを公開していないせいもあるので将来的には色々と出てくるのだろうが、既にバリバリと利用している私としては、いかにも残念だった。

そんな訳で、いっそのこと自分で作ってしまえ!
と一念発起したわけなのだ。

RSSを取得する

これを実現するためには、まずgoogle+の記事を何らかの方法で取得する必要がある。

今回はRSSで取得することにした。

こちらのblog記事を参考に、自分の投稿記事をRSSで取得した。

Google+のRSSフィードを生成してくれるサービス「plusfeed」

ナビ部分に出力する

RSSを取得できたので、あとはこれを表示するだけ。

こちらのblog記事を参考に、RSSを表示した。

WordPressで外部RSS(twitter等)を表示させる

【2011/12/06追記】
上記サービスはサービス停止となっているので、下記のサービスを利用して下さい。

http://gplus.slfeed.net/RSS2/あなたのgoogle+ID

私の場合なら
http://gplus.slfeed.net/RSS2/102930499130204409224
となります。

フォロワー数を表示する

以上のことだけでも良かったのだが、Facebookウィジットのように何人にフォローされているか(google+ではサークルに入れられている、と呼んでいる)も表示させたかったので、こちらのサービスを利用した。

Google+ Statistics on SocialStatistics.com

自分のgoogle+のプロフィールを表示させたとき、URLに表示される数字がIDなので、それを右のテキストボックスに入れればOK。
こういうサービスは嬉しいね。

完成したソース

以上の作業で、ウィジットは完成。
念のため、私の環境のHTMLを貼っておく。

<div data-id=”102930499130204409224″></div>

<script>(function(d,t){var b=d.createElement(t),c=d.getElementsByTagName(t)[0];b.async=b.src=”http://socialstatistics.com/widget/widget.min.js”;c.parentNode.insertBefore(b,c);})(document,’script’);</script>

<div id=”gplus”>

<?php include_once(ABSPATH . WPINC . ‘/rss.php’); $rss_url = “http://gplus.slfeed.net/RSS2/102930499130204409224″;$limit = 8;$rss = fetch_rss($rss_url);$items = array_slice($rss->items, 0, $limit); ?>

<ul> <?php if (empty($items)): ?> <li>記事がありません</li><?phpelse : foreach ( $items as $item ) : ?> <li><a href='<?php echo $item[‘link’]; ?>’><?php echo $item[‘title’]; ?> </a></li> <?php endforeach; ?> <?php endif; ?></ul>

<p><a href=”https://plus.google.com/102930499130204409224/posts”>google+公開ページを見る</a></p>

<p><a href=”http://gplus.slfeed.net/RSS2/102930499130204409224″>RSS</a></p>

</div>

簡単に”102930499130204409224″の部分を自分のgoogle+IDに書き換えても使える。

ちょこっとCSSもいじったので、そちらも貼ってみる。

#gplus li{
border-bottom: 1px dashed;
padding: 5px 0;
}

.socialstatistics-widget{
margin-top: 1em;
}

ちょっとは見やすくなったかな?

gplus_widgit

gplus_widgit

-google+, ソーシャル
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

ツイッターvsフェイスブック

facebookにtwitterを連動させることは禁じ手なのか?

最近爆発的に普及してきたソーシャルメディア。 私もfacebook、twitter、mixi、GREE、myspaceなど、いろいろなSNSを利用している。 しかしそれぞれのSNSで個別に発言していく …

foursquare

foursquareのiPhoneアプリからfacebookにポストできなくなったよ

位置情報サービスとして多くの利用者が使っているfoursquareだが、1ヶ月前くらいからfacebookにポストできなくなった。 いろいろ試してみると、どうやら認証方式が変わったのに自動対応していな …

フェイスブック

Facebookページのiframe化にチャレンジ

Facebookでビジネスをするのに欠かせない独自タブを作るには、従来はstaticFBMLを使ってきた。 これはこれで簡便で使いやすかったのだが、3/10で使用できなくなる。 これからはstatic …

Amplifyが面白そう

google chrome storeがオープンしていろいろ見ていて目についたのが、Amplify。 どうやら簡単にwebページをクリップして、いろいろなサイトにポストできるようだ。 かちびと.net …

stinger8

wordpessテーマのSTINGER8にしてみた ⇒ 設定その1

STINGER8を導入 このサイトはwordpressで構築している。 数ヶ月間Grapheneテーマを使ってみたのだが、どうも重い気がする。 そこで試しに、国産テーマで人気が高いSTINGERを使っ …