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

こちらのサイトから設定。
- ボタンの種類を設定
- プレビューを見ながら、ボタンのオプションを設定
- デザインが完成したら、コードをコピーして任意の場所に設置する
1 2 3 |
<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”にすれば、画像のようなソーシャルボタンができます。
*****は自分のアカウントを入れてください。

こちらのサイトから設定。
- まずurlは適当に記載します。これは後でwordpress用に修正をします。
- 残りの項目を自由にカスタマイズしていきます。大きいボタンはstyleを「box-count」にすればOK
- コードを取得。いくつかコードの種類がありますが、HTML5版の場合は2つコードが必要で、1つはタグの直下に、2つ目は実際にボタンを設置する場所にそれぞれ貼り付けます。
2つ目のコードの例
1 2 3 4 5 6 |
</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

1 |
<a href="http://delicious.com/post?url=<?php the_permalink();?>&title=<?php the_title();?>" target="_blank">>Delicious</a> |
Deliciousには専用のボタンがないようなので、下記のリンクを使い画像を作成して設置しました。
evernoteのボタン
<
こちらから設定できます。
- buttonの種類を選択
- クリップするページのidタグ名を記入。例えば記事自体が
というidで設定されているならcontentと記入する。 - オプションは任意で設定。コードを取得して任意の場所にコピー
Tumblr共有ボタン

その他
その他、私は設置していませんがいくつかソーシャルボタンが存在します。必要とあるならリンク先から設定をしくてださい。参考書籍
色々なサイトでおすすめされていたので、私も買ってみたのですがwordpressのテーマについて事細かに書いてありとても参考になりました。
![]() | WordPress レッスンブック 3.x対応 エビスコム ソシム 売り上げランキング : 1380 Amazonで詳しく見る |
