title

今回のブログリニューアルに際して、各サイトにシェアできる「ソーシャルボタン」を設置した際のまとめ。
プラグインを使って一気に設定できる方法もあるみたいですが、一つ一つ個別に設置することも可能です。Wordpressのテーマを自作するのなら、ぜひ色々カスタマイズをして個性のあるサイトを作って欲しいです。

ソーシャルボタン一覧

Twitterボタン

こちらのサイトから設定。

ボタンの種類を設定
プレビューを見ながら、ボタンのオプションを設定
デザインが完成したら、コードをコピーして任意の場所に設置する

通常はこれで大丈夫なんですが、画像にあるような大きなボタンがないのにお気づきでしょうか。このように少し大きいボタンはさらに設定が必要で、詳しくはその下の英語のページに書いてあります。

<a class="&amp;quot;twitter-share-button&amp;quot;" href="&amp;quot;https://twitter.com/share&amp;quot;" data-via="&amp;quot;******&amp;quot;" data-lang="&amp;quot;ja&amp;quot;" data-related="&amp;quot;******&amp;quot;" data-count="&amp;quot;vertical&amp;quot;>ツイート</a><br"><script type="text/javascript">// <![CDATA[
!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>

<a class="&quot;twitter-share-button&quot;" href="&quot;https://twitter.com/share&quot;" data-via="&quot;******&quot;" data-lang="&quot;ja&quot;" data-related="&quot;******&quot;" data-count="&quot;vertical&quot;>ツイート</a><br"><script type="text/javascript">// <![CDATA[

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

data-count=”vertical”にすれば、画像のようなソーシャルボタンができます。
*****は自分のアカウントを入れてください。

FaceBook

こちらのサイトから設定。

まずurlは適当に記載します。これは後でwordpress用に修正をします。
残りの項目を自由にカスタマイズしていきます。大きいボタンはstyleを「box-count」にすればOK
コードを取得。いくつかコードの種類がありますが、HTML5版の場合は２つコードが必要で、１つはタグの直下に、２つ目は実際にボタンを設置する場所にそれぞれ貼り付けます。

２つ目のコードの例

</pre>
<ul>
	<li>
<div class="fb-like" data-href="<?php the_permalink();?>" data-send="false" data-layout="box_count" data-width="50" data-show-faces="true" data-font="arial"></div></li>
</ul>
<pre>

</pre>

<ul>

<li>

<div class="fb-like" data-href="<?php the_permalink();?>" data-send="false" data-layout="box_count" data-width="50" data-show-faces="true" data-font="arial"></div></li>

</ul>

<pre>

urlをに変更すれば、記事に応じてのリンクを吐き出してくれます。

Google+1

最近デザインが変わったみたいで、オレンジ色になった「Google+1」のソーシャルボタンはこちらから設定ができます。

サイズ、Annotationなどを自由にカスタマイズしていきます。Annotationを「バルーン」にすれば大きなボタンになります。
コードを取得。

はてなブックマーク

最近、色々騒がしているはてなブックマークのボタン。こちらから作成設置ができます。

これも、作成時にリンク先URLが必要なんですが、wordpress用にするためには後でに変更する必要があります。

Delicious

<a href="http://delicious.com/post?url=<?php the_permalink();?>&amp;title=<?php the_title();?>" target="_blank">>Delicious</a>

1	<a href="http://delicious.com/post?url=<?php the_permalink();?>&title=<?php the_title();?>" target="_blank">>Delicious</a>

Deliciousには専用のボタンがないようなので、下記のリンクを使い画像を作成して設置しました。

evernoteのボタン

正式名称は「Site Memory button」
こちらから設定できます。

buttonの種類を選択
クリップするページのidタグ名を記入。例えば記事自体が

というidで設定されているならcontentと記入する。
オプションは任意で設定。コードを取得して任意の場所にコピー

Tumblr共有ボタン

こちらから設定可能。facebooktと同じように２種類のコードを設置する必要があります。

その他

その他、私は設置していませんがいくつかソーシャルボタンが存在します。必要とあるならリンク先から設定をしくてださい。

参考書籍

色々なサイトでおすすめされていたので、私も買ってみたのですがwordpressのテーマについて事細かに書いてありとても参考になりました。

WordPress レッスンブック 3.x対応
エビスコム

ソシム
売り上げランキング : 1380

Amazonで詳しく見る

WordPressで使えるソーシャルボタン一覧