2018年1月21日
  • 自社保有メディアのサイト運営によるインターネット広告事業・WordPressによるサイト制作事業・コワーキングスペース・シェアオフィス・貸会議室の運営事業を行っています。

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンなどを、プラグインを使わずに、四角のボックス形式で設置する方法。

こんにちは。株式会社コミュニティコムの星野邦敏です。

今日は、Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンなどを、プラグインを使わずに、WordPressの各記事に設置する方法を、以下で説明します。

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンなどをWordPressの各記事に設置しようとしたら、「WP Social Bookmarking Light」というプラグインが有名です。
WordPress › WP Social Bookmarking Light « WordPress Plugins

とても良く出来ていて、気軽に設置できるというメリットがあると思いますが、
(1)横型の小さめの長方形ボタンしかない
(2)コンテンツ本文の上または下と決め打ちの場所にしか表示できない
などのデメリットもあると思います。

そこで、どこにでも自由にボタンを設置したい場合や、複数の箇所に設置したい場合、あとは、ボタンの形も自由に決めたい場合などもあると思います。

横型の小さめの長方形ボタン。
Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。
「WP Social Bookmarking Light」プラグインや、Twitter公式のツイートボタン(Twitter / Twitterボタン)などを使うと、こちらのボタンになります。

四角のボックス形式のボタン。
Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。
Webサイトやブログによっては、こちらのボタンを使いたい場合もあるでしょう。今回は、この場合のWordPressでのソースコードの書き方を以下で説明します。

例えば、Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式のボタンとして、かつ、複数箇所に設置したい場合は、以下のようなソースコードを、WordPressテーマに書きましょう。

<ul>
<li>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="<自分のTwitterのID>" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</li>
<li>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
</li>
<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
<li>
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo('name'); ?>" 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><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
</ul>

Twitterのアイコン部分「data-via=”<自分のTwitterのID>”」は、例えば「data-via=”khoshino”」と書けば、それが「@khoshino」という形でツイートに付くので、自分のアカウント名に変えてください。

また、一応、ulとliで書いて、CSSで横並びをする方法を取っていますが、重要なのは、liタグ内の各ソースコードです。

このWebサイトでも、この方法で、記事コンテンツの上と下の2箇所に、各ソーシャルアイコンを出しています。この方法をCSSで応用させれば各アイコンを縦置きにしたり、テーマに書けばどこにでも設置できるのでサイドバーに設置したりも、もちろん可能です。

以上となります。ご参考まで。

(追加)
はむちぃさんに指摘を受けて、Google+部分のボタン実装について、

<li><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>

と書いていたのを、

<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>

に変更しました。
ご指摘ありがとうございます!

コメント一覧

khoshino2012年9月13日 6:31 PM /

ソーシャルアイコンをWordPressに直接設置する場合。RT Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 http://t.co/rFyJ9tMN @khoshino

madloverxxx2012年9月13日 6:40 PM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 http://t.co/6w5uePPM @khoshinoさんから

primarytext2012年9月14日 12:06 PM /

[wordpress] / “Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム” http://t.co/oPUrUaFN

peter09062012年9月14日 12:21 PM /

“Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム” http://t.co/kJVgdhsj

webdesignstatio2012年9月14日 12:45 PM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム こんにちは。株式会社コミュニティコムの星野... http://t.co/vR7p136N

wordpress_news2012年9月14日 1:03 PM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム http://t.co/223iFnta #wordpress

thikasa2012年9月14日 9:33 PM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム - http://www.communitycom.jp/2012...

wordpress_bot2012年9月14日 9:38 PM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム http://t.co/fDDMI0IS

c_tpl2012年9月14日 9:38 PM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム http://t.co/vHwsoTGO

tateyokotakasa2012年9月14日 11:30 PM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム http://t.co/fDDMI0IS

sho124462012年9月15日 12:25 AM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム http://t.co/fDDMI0IS

ikpbot2012年9月15日 8:44 AM /

【ソーシャル】Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム http://t.co/xNsjGWus

webdesignsokuho2012年9月15日 10:09 AM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム http://t.co/uy7Wf14j

memoca_2012年9月16日 6:21 PM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンなどを、プラグインを使わずに、四角のボックス形式で設置する方法:  http://t.co/FpGP8oTs

roolues2012年10月1日 6:51 AM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンなどを、プラグインを使わずに、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム http://t.co/dbUZfPzq メモ

orejasu2012年10月24日 7:33 PM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンなどを、プラグインを使わずに、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム http://t.co/TAiDCEb2

khoshino2012年12月19日 9:55 AM /

あっ、なるほど。ここでkhoshinoのアカウントのまま、ソースコードを公開しているから、よく知らないサイトから、@が付いて僕にメンションが来るのかー。なんでだろ?と思ってしまっていました。 http://t.co/rFyJ9tMN

test_top_sm2012年12月25日 4:43 PM /

http://t.co/0WKpS42z

kudarihiryu2012年12月27日 5:56 AM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンなどを、プラグインを使わずに、四角のボックス形式で設置する方法。 http://t.co/3YOIUzi5 @khoshinoさんから

crossbreed2013年1月18日 6:13 PM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式で設置する方法。 | 株式会社コミュニティコム - http://www.communitycom.jp/2012...

FacebookのいいねぼたんやGoogle+のボタンをプラグインを使用せず設置する方法 | めるちる's Room2013年2月9日 4:09 PM /

[...] 株式会社コミュニティコムさんのサイトです。ありがとうございました。 [...]

めげんとす2013年5月21日 2:43 PM /

Twitterのツイートボタン、Facebookのいいね!ボタン、Google のボタン、はてなブックマークのボタンなどを、プラグインを使わずに、四角のボックス形式で設置する方法。 http://t.co/lC9yRYX3VJ @khoshinoさんから

好きなところにSNSボタンを表示したい | SEO対策とアフィリエイトに強いWordPressテーマ「Stinger」2013年6月4日 8:02 PM /

[...] ちなみに、本コードは以下のサイトにて公開されていたものになります。 株式会社コミュニティコム [...]

稼ぐ仕組み!僕のWordPressのお勧めプラグインと設定方法を公開します。 | ENJILOG2013年7月3日 6:54 PM /

[...] 参考:Twitterのツイートボタン、Facebookのいいね!ボタン、Google+のボタン、はてなブックマークのボタンなどを、プラグインを使わずに、四角のボックス形式で設置する方法。 [...]

matsuiphone2013年10月10日 2:53 AM /

“<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&layout=box_count&show_faces=false&width=50&action=like&colorscheme=light&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTrans

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA