wordpress:wordpressにSNSボタン設置方法

このサイト(raining)にSNSボタンを設置した際の方法を記載します。
今回はTwitter、facebook、google+、はてなブックマーク、mixiのSNSボタンを設置しました。
それぞれの設置方法をメモしておきます。
wordpressで直接ファイルにコードを埋め込む方法で設定しました。
ファイルは/wp-content/themes/使用テンプレート/content-single.phpの<?php the_content(); ?>の下に下記の方法でコードを埋め込んでます。

■ wordpress テンプレートタグ

<?php the_permalink(); ?>

現在の投稿のパーマリンクURIを取得し表示する

<?php the_title(); ?>

現在の投稿のタイトルを取得し表示する
※上記は今回利用したwordpressのテンプレートタグを記載しています。他にも色々なテンプレートタグがあります。

■ SNSボタン設置方法


Twitterのツイートボタン

Twitterのツイートボタンを作成するページでURLなどの情報を入力し、コードを取得する。
https://twitter.com/about/resources/buttons
コード取得後、data-urlを「 data-url=”<?php the_permalink(); ?>”」と書き換える。
数字をツイートボタンの上に表示する場合は「 data-count=”vertical”」を追加する。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-lang="ja" data-count="vertical">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

facebookのいいねボタン

Facebook Like ButtonページでURLなどの情報を入力しコードを取得する。
http://developers.facebook.com/docs/reference/plugins/like/
今回はHTML5でコードを取得。
コード取得後、data-hrefを「 data-href=”<?php the_permalink(); ?>”」と書き換える。
画像の表示などがうまくいかない場合は、metaタグでOGP(Open Graph Protocol)を設定する。
「JavaScript SDK」は<body>のすぐ後に配置するのが理想的。

<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>

グーグルプラスのgoogle+1ボタン

google+1ページで情報を入力しコードを取得する。
http://www.google.com/intl/ja/webmasters/+1/button/
コード取得後、指定の場所にソースを埋め込むだけで設定が完了する。

<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<g:plusone size="tall"></g:plusone>

<!-- この render 呼び出しを適切な位置に挿入してください -->
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};

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

はてなブックマークのBookmarkボタン

はてなブックマークボタンページでURLなどの情報を入力しコードを取得する。
http://b.hatena.ne.jp/guide/bbutton
hrefのhttp://b.hatena.ne.jp/entry/の後に<?php the_permalink(); ?>を記載する。
また、data-hatena-bookmark-titleに<?php the_title(); ?>を記載する。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical-balloon" 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>

mixiのイイネ!ボタン

mixiで「イイネ!ボタン」を設置する際は、デベロッパー登録が必要になる。
http://developer.mixi.co.jp/
登録したら、「mixi Plugin」の新規サービス追加でURLなどの情報を入力しコードを取得する。
取得したコードのdata-service-keyに識別キーを記載し、data-hrefを「 data-href=”<?php the_permalink(); ?>”」と書き換える。

<div data-plugins-type="mixi-favorite" data-service-key="識別キー" data-size="large" data-href="<?php the_permalink(); ?>" data-show-faces="false" data-show-count="true" data-show-comment="false" data-width=""></div>
<script type="text/javascript">
(function(d) {
var s = d.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//static.mixi.jp/js/plugins.js#lang=ja';
d.getElementsByTagName('head')[0].appendChild(s);
})(document);
</script>

Fireworks:Fireworksで画像の拡大縮小(リサイズ)

Fireworksを使用し、画像をリサイズする方法は色々ありますが、ショートカットキーを使用すると楽に拡大縮小をすることができます。
また、数値を入力してリサイズするので正確なサイズで拡大縮小ができ作業効率も上がります。

■ 画像を選択してリサイズする
画像を選択する青いラインで画像が選択される。
fireworks1
角の青い丸になっている箇所をマウスで選択し、サイズを変更する。
fireworks2
■ メニューから拡大縮小を選択しリサイズする
Fireworksのメニューから「変更」→「変形」→「拡大・縮小」を選択する。
fireworks3
画像が黒いラインで選択されるので、黒く丸になっている箇所をマウスで選択し、サイズを変更する。
fireworks4
■ ショートカットキーを使用し、数値でリサイズする
画像選択後、「Ctrl」+「Shift」+「T」を押下すると、編集ボックスが表示される。
fireworks5
数値を変更し、OKを押すと指定したサイズでリサイズされる。
「拡大・縮小」以外にも「サイズ変更」や「回転」なども編集できる。
fireworks6