‘ホームページ作成’

WordPressにソーシャルボタンを設置する

2012-07-04

WordPressでのソーシャルボタンの設置方法

WP Social Bookmarking Light等のプラグインを使って設置してもいいのですが余計なプラグインは使いたくないのでプラグインを使わない方法。

下記コードをヘッダー(header.php)またはフッター(footer.php)に貼り付ける。

※ (ppId=***************の*にはFacebookのAppIDを入れる。

<!-- Facebook -->
<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/all.js#xfbml=1&appId=***************";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<!-- Google+ -->
<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>
 
<!-- はてなブックマーク -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
 
<!-- Twitter -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 
<!-- Evernote -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

functions.php に下記のコードを貼る

// ソーシャルボタン
function socialbutton()
{ ?>
    <ul >
        <li class="hatebuButton"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" 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></li>
        <li class="tweetButton"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="" data-lang="ja" >ツイート</a></li>
        <li class="likeButton"><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="72" data-show-faces="false"></div></li>
        <li class="gplusButton"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
        <li class="EvernoteButton"><a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a></li>
    </ul>
<?php }

ソーシャルボタンを貼り付けたい位置に下記コードを貼る。(single.phpなど)
<!-- ソーシャルボタン -->
<div class="socialbutton">
<?php socialbutton(); ?>
</div>

ソーシャルボタン用のCSSをstyle.cssなどに追加
/* ソーシャルボタン */
div.socialbutton ul{
margin: 0;
padding: 0;
}
div.socialbutton li{
list-style-type: none;
float: left;
margin-right: 10px;
}

以上です。

WordPressを使ってできることorできそうなこと

2012-07-02

今日は私が検証してきた事とこれから検証していこうと思っていることについて書きます。

題名の通りWordPressを使ってできることorできそうなことです。

 

できること

 

  1. 1.もちろんブログ機能ですね。(画像ギャラリー等のフォトブログ機能も可能)
  2. 2.当サイトでも構築している店舗などの紹介[口コミサイト](各種プラグインやAPI使用)
  3. 3.ネットショップ(プラグイン使用:WP e-commerceWP Simple CartWelcartGetShoppedYAK for WordPress
  4. 4.不動産サイト(不動産プラグイン使用
  5. 5.SNSサイト(SNSプラグインBuddy Press使用)
  6. 6.マルチサイト機能を使った、多ユーザー参加型ブログサイト

 

できそうなこと

 

  1. 1.マルチサイト機能を使った楽天市場のような大型ショッピングモール

 

こんなところですかね。

上から順番に説明していきます。

 

1.ブログ機能

こちらは標準で装備されている機能ですね。

さらにWordPress 3.1以降から搭載されたギャラリー機能を使えば画像ギャラリーも簡単に作れるので画像ギャラリーに特化したサイトも簡単に構築できます。

 

2.お店紹介[口コミサイト]

こちらは少し知識が必要ですが構築は可能です。

詳しい説明は後程ブログで書きますね。

 

3.ネットショップ

こちらもプラグインを導入すれば簡単に構築可能です。

私はWelcartしか使ったことないので他のプラグインについては説明できませんがWelcartではかなり自由度の高いショップを構築できます。

こちらも後程ブログにて詳しく書こうと思います。

 

4.不動産サイト

こちらも提供元:nendebで配布しているプラグインを導入すればかなり高機能な不動産サイトが構築できるようです。

私はまだ使ったことがないので、いずれ使ってみたいと思います。

 

5.SNSサイト

こちらもBuddy Pressで配布しているプラグイン導入で構築できます。

こちらもまだ未検証なので近いうちに検証してみます。

 

6.マルチサイト機能を使った多ユーザー参加型ブログサイト

こちらはWordpressに装備されているマルチサイト機能を使ってアメブロや楽天ブログのような色々なユーザーが使えるブログサイトを構築できます。

ただ、こちらはまだ実装されて間もないので、色々と不安要素もあるようです。

 

私が考える不安要素

  • プラグインの取り扱い
  • テーマの取り扱い
  • データベース肥大化によるサーバー負荷の問題
  • セキュリティーの問題

これらはできそうなことのマルチサイト機能を使った楽天市場のような大型ショッピングモールにも当てはまります。

 

これらの詳しいことはまた別ブログで書きます。

それでもまだまだWordpressには可能性があるので、今後いろいろ検証していきたいと思います。

Facebook