Yasigani-ni Blog

日常やプログラム、コーディングなどのことを色々と・・・

『Google +1 ボタン』とか『いいね!』ボタンとかをつけてみた

time 2011/09/29

スポンサーリンク

せっかくブログを書いているので、気になったことは色々試したいと思います。

というわけで、『Google +1 』ボタンをつけてみます。
ついでに、『いいね!』ボタン(facebook)・『ツイートする』ボタン(twitter)・『B!』ボタン(はてなブックマーク)もつけちゃいます。

では、WordPressを例に説明していきます。


1・『Google +1』ボタン

まずは、『Google +1』ボタンから。

以下のリンクから簡単にソースコードを取得できます。

「Google +1 をウェブサイトに表示」

基本的には、ボタンのサイズや使用する言語を選択するとソースコードが変更されていきますので、指示にしたがって張り付けるだけです。
詳細オプションをクリックすると、コールバック関数や『+1』をつけるサイトのURLを指定したりすることができます。

▼『Google +1 』ボタンを記事一覧に設置

記事ごとに『Google +1』ボタンを設置したい時は、『+1』をつけるURLを変更します。
私の場合、記事一覧で記事ごとに『+1』をつけれるようにしたかったので、『content.php』に以下のコードを追加しました。

<!--▼Google+1 ここから-->
<g:plusone href="<?php the_permalink(); ?>" size="medium"></g:plusone>
<!--▲Google+1 ここまで-->

『the_permalink』テンプレートタグで記事のURLを取得しているだけです。
私は、『content-single.php(記事詳細)』にも同じコードを追加しました。

あとは、『header.php』に以下のコードを追加するだけです。
『head』要素の最後に貼り付ければオッケーです。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'ja'}</script>

これで、『Google +1』ボタンの設置は終了です。


2・『ツイートする』ボタン

次は、有名な『ツイートする』ボタンです。

これも以下のリンクから簡単にソースコードを取得できます。

「Twitter/ツイートボタン」

指示にしたがって、色々選択するとソースコードが変更されますのでコピペするだけです。

▼『ツイートする』ボタンを記事一覧に設置

記事ごとに『ツイートする』ボタンを設置したい時は、『a』要素の『data-url』の値を変更します。
ツイート内テキストを変更したい場合は、『a』要素の『data-text』の値を変更します。
私は、以下のようにしました。

<!--▼twitter ここから-->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="『あなたのブログ名に変更』 <?php the_title(); ?>" data-count="none" data-lang="ja">Tweet</a>
<!--▲twitter ここまで-->

上記のコードを、『Google +1』ボタンのソースコードと同じ場所に追加します。

あとは、以下のコードを『header.php』に追加します。
これまた『head』要素の最後に貼り付ければオッケーです。

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

これで、『ツイートする』ボタンの設置は終了です。


3・『B!』ボタン

次は、『B!』ボタンです。

『B!』ボタンのソースコードは、以下のリンクから取得できます。

「はてなブックマークボタンの作成・設置について」

しつこいようですが、指示にしたがって色々選択するとソースコードが変更されますのでコピペするだけです。

▼『B!』ボタンを記事一覧に設置

記事ごとに『B!』ボタンを設置したい時は、『a』要素の『href』の値の『http://b.hatena.ne.jp/entry/』の後を変更します。
タイトルを変更したい場合は、『a』要素の『data-hatena-bookmark-title』の値を変更します。
私は、以下のようにしました。

<!--▼はてブ ここから-->
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="『あなたのブログ名に変更』 <?php the_title(); ?>" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<!--▲はてブ ここまで-->

上記のコードを、『Google +1』ボタン、『ツイートする』ボタンのソースコードと同じ場所に追加します。

あとは、以下のコードを『header.php』に追加します。
これも『head』要素の最後に貼り付ければオッケーです。

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

これで、『B!』ボタンの設置は終了です。


4・『いいね!』ボタン

最後は、『いいね!』ボタンです。

『いいね!』ボタンのソースコードは、以下のリンクから取得できます。

「Like Buttom」

英語ですが、指示にしたがって色々選択していき、『Get Code』ボタンをクリックするとソースコードが表示されます。
ソースコードが表示されているウインドウの『実装』を変更すると、選択した実装方法のソースに変更されます。
私は、『iFrame』を選択しました。

▼『いいね!』ボタンを記事一覧に設置

私は、『iframe』を選択したので『iframe』にあわせて説明します。
記事ごとに『いいね!』ボタンを設置したい時は、『iframe』要素の『src』の『?href=』の値を変更します。
私は、以下のようにしました。

<!--▼facebook ここから-->
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>" scrolling="no" frameborder="0" style="border:none; overflow: hidden; width: 80px; height: 25px;" allowTransparency="true"></iframe>
<!--▲facebook ここまで-->

上記のコードを、『Google +1』ボタン、『ツイートする』ボタン、『B!』ボタンのソースコードと同じ場所に追加します。

『いいね!』ボタンはこれで終了です。


ほとんどコピペで、簡単に実装できるのがいいですよね><

私は、はてブの数やツイート数は表示しないアイコンを選択しましたが(数が増えなかったら寂しいから・・・)、色々なアイコンが用意されているので、ご自分にあったアイコンを選択して実装してください^^

スポンサーリンク

低料金でテストサーバーを作るなら

ドメインを取得するなら



スポンサーリンク

Category