time 2017/10/17
せっかくブログを書いているので、気になったことは色々試したいと思います。
というわけで、『Google +1 』ボタンをつけてみます。
ついでに、『いいね！』ボタン(facebook)・『ツイートする』ボタン(twitter)・『B!』ボタン(はてなブックマーク)もつけちゃいます。
では、WordPressを例に説明していきます。
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・『ツイートする』ボタン
次は、有名な『ツイートする』ボタンです。
これも以下のリンクから簡単にソースコードを取得できます。
指示にしたがって、色々選択するとソースコードが変更されますのでコピペするだけです。
▼『ツイートする』ボタンを記事一覧に設置
記事ごとに『ツイートする』ボタンを設置したい時は、『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・『いいね！』ボタン
最後は、『いいね！』ボタンです。
『いいね！』ボタンのソースコードは、以下のリンクから取得できます。
英語ですが、指示にしたがって色々選択していき、『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!』ボタンのソースコードと同じ場所に追加します。
『いいね！』ボタンはこれで終了です。
ほとんどコピペで、簡単に実装できるのがいいですよね＞＜
私は、はてブの数やツイート数は表示しないアイコンを選択しましたが(数が増えなかったら寂しいから・・・)、色々なアイコンが用意されているので、ご自分にあったアイコンを選択して実装してください^^
