ツイッターとかFacebookとかのボタンを付ける

付けてみました。

たまにはマークしていただけるようなことも書くだろうという期待を込めて。
以下はメモ。

WordPressには便利なプラグインもたくさんあるけど、テーマのファイルに追記して表示させる方法です。

編集すべきテンプレートはindex, page, とsingleでしょう。たぶん

<div class="socialbar"><!– socialbar –>
  <div class="tweet">
    <a href="http://twitter.com/share"
      class="twitter-share-button"
      data-url="<?php the_permalink(); ?>"
      data-text="<?php the_title(); ?>"
      data-count="horizontal"
      data-via="nisefuruta"
      data-lang="ja">
        Tweet
    </a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  </div>
  <div class="facebook">
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show-faces=true&amp;width=240&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:25px" allowTransparency="true"></iframe>
  </div>
  <div class="hatebu">
    <a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>"
    class="hatena-bookmark-button"
    data-hatena-bookmark-layout="standard"
    title="<?php the_title();?>">
      <img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
      alt="このエントリーをはてなブックマークに追加"
      width="20"
      height="25"
      style="border: none;" />
    </a>
    <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
  </div>
  <div class="evernote">
    <script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
      <a href="#"
      onclick="Evernote.doClip({contentId:'evernote',title:'<?php the_title(); ?>',url:'<?php the_permalink(); ?>',code:'content'}); return false;">
        <img src="http://static.evernote.com/article-clipper.png"
        alt="Clip to Evernote" />
      </a>
  </div>
</div><!– socialbar –>

もちろん自分のサイトに応じて編集のこと

これを1行で表示させるのにCSSも追加します。

div.socialbar {
  margin-top: 5px;
}

div.tweet {
  float: left;
  display: inline;
  width: 120px;
}

div.facebook {
  display: inline;
}

div.hatebu {
  display: inline;
}

div.evernote {
  display: inline;
}

div.postcontent {
  clear: both;
}

ツイッターとFacebookとevernoteの必要な情報は
Twitter / ツイートボタン http://twitter.com/goodies/tweetbuttonLike Button – Facebook開発者 http://developers.facebook.com/docs/reference/plugins/like
Evernote http://www.evernote.com/about/developer/sitememory/#a_builder
などで作成のこと

twitterボタン、はてブ、facebookの「いいね!」などをWordpressに1列で表示 | ハイファイブ ウェブ雑記 http://highfivecreate.com/twitterbutton-hatebu-facebooklike-for-wordpress/
ヒントにさせていただきました。
有り難うございます。

コメントを残す

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