ソーシャルメディアの反響を一覧表示するWordPressプラグイン「Social Feedback List」

plug-in,WordPress

ソーシャルメディアの反響を一覧表示するWordPressプラグイン「Social Feedback List」を作りました。

ブログの反響を可視化するiPhoneアプリ「Feedback」に激しくインスパイアされています。

表示例

SNSの反響を一覧表示するページ | Hinemosu

配布ファイル

social_feedback_list_001.zip

インストール

  1. 上記ファイルをプラグインディレクトリに展開
  2. WordPress管理ページの「プラグイン」から、「Social Feedback List」を有効化する
  3. 適当な固定ページを準備する(既存ページでも可)
  4. ショートコードでプラグインを呼び出す
  5. 推奨CSSを適用する

推奨CSSは以下の通り。使用しているデザインテンプレートのstyle.cssなどに記述してください。

.sfl_list { margin:0; height:36px; }
.sfl_list div { float:left; width:128px!important; height: 24px!important; padding-right:4px!important; }

プラグインの呼び出し方

ショートコード feedback_list を呼び出すと、最新から20記事分(初期値)の反響が一覧表示されます。

ショートコードの書き方例:
[feedback_list]

ショートコードにオプション num を付けると、表示する記事数を指定できます。
[feedback_list num=25]

あまり大きい数を指定すると、ブラウザの表示が極端に重くなるので注意してください。

ショートコードの書き方例
ショートコードの書き方例

質問、要望など

質問や要望がありましたら、ツイッター @hideto か、ブログのコメント欄にてお知らせください。

ソースコード

<?php

/*
Plugin Name: Social Feedback List
Plugin URI: https://www.hide10.com/social_feedback
Description: This plug-in to view the response of the blog. Twitter, Facebook, Hatena bookmark.
Version: 0.1
Author: KOBAYASHI Hideto
Author URI: https://www.hide10.com/
Text Domain: social_feedback_list
License: GPLv2 or later

Copyright 2014 KOBAYASHI Hideto (email: hide10@hide10.com)

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/

function social_feedback_list_func( $atts ) {

	extract(shortcode_atts(array(
		'num' => 20,
	), $atts));

	$fi_list .= "<div id='fb-root'></div>
				<script>(function(d, s, id) {
				  var js, fjs = d.getElementsByTagName(s)[0];
				  if (d.getElementById(id)) return;
				  js = d.createElement(s); js.id = id;
				  js.src = '//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=174116205945919&version=v2.0';
				  fjs.parentNode.insertBefore(js, fjs);
				}(document, 'script', 'facebook-jssdk'));</script>" ;

	$query = array(
		'showposts'=> $num,
		'caller_get_posts'=>1,
		'post_status' => 'publish'
	);
	query_posts($query) ;

	if( have_posts() ) : while ( have_posts() ) : the_post();
		$permalink = get_permalink();
		$title = the_title(NULL,NULL,false);
		$fi_list .= "<div class='sfl_box'>" ;
		$fi_list .= "<a href='{$permalink}' class='fb_list_title'>{$title}</a>" ;
		$fi_list .= "<div class='sfl_list'>" ;
		$fi_list .= "<div class='sfl_twitterbtn'><a href='https://twitter.com/share' class='twitter-share-button' data-url='{$permalink}'>Tweet</a></div>" ;
		$fi_list .= "<div class='sfl_facebookbtn'><div class='fb-like' data-href='{$permalink}' data-layout='button_count' data-action='like' data-show-faces='true' data-share='false'></div></div>" ;
		$fi_list .= "<div class='sfl_gplusbtn'><div class='g-plusone' data-href='{$permalink}'></div></div>" ;
		$fi_list .= "<div class='sfl_hatebubtn'><a href='http://b.hatena.ne.jp/entry/{$permalink}' class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' data-hatena-bookmark-lang='ja' title='このエントリーをはてなブックマークに追加'><img src='http://b.st-hatena.com/images/entry-button/button-only@2x.png' alt='このエントリーをはてなブックマークに追加' width='20' height='20' style='border: none;' /></a></div>";
		$fi_list .= "</div>" ;
		$fi_list .= "</div>" ;
		$fi_list .= "<hr>" ;
	endwhile; endif;

	wp_reset_query();

	$fi_list .= "<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>";
	$fi_list .= "<script type='text/javascript'>
				  (function() {
					var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
					po.src = 'https://apis.google.com/js/plusone.js';
					var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
				  })();
				</script>" ;
	$fi_list .= "<script type='text/javascript' src='http://b.st-hatena.com/js/bookmark_button.js' charset='utf-8' async='async'></script>" ;

	return $fi_list;

}

add_shortcode( 'feedback_list', 'social_feedback_list_func' ) ;