【コピペでOK】FacebookのいいねボタンやTwitterのツイートボタンをサイトに設置する方法
今回はFacebookの「いいね」ボタンとTwitterの「ツイート」ボタンをブログやホームページに設置する方法を紹介します。
この記事をみることで、以下のようなボタンをサイトに設置することができます。
コピペで簡単にできます。
※FTPでテーマファイルを直接編集できる事が前提です。
Facebookの「いいね」ボタンをサイトに設置する
以下のコードを表示したい箇所にコピペします。
<div class="facebook-like">
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v7.0"></script>
<div class="fb-like" data-href="<?= get_permalink($post->ID) ?>" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="false"></div>
</div>
data-href
属性に、対象のリンクを記載します。
上記のコードでは、<?= get_permalink($post->ID) ?>
とする事で、記事のリンクを自動で取得するようにしています。
デザインをカスタマイズしたい際は、Facebook公式ページをご覧ください。
Twitterの「ツイート」ボタンをサイトに設置する
以下のコードを表示したい箇所にコピペします。
<div class="twwiter-tweet">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false" data-url="<?php the_permalink(); ?>" data-text="<?php echo get_the_title(); ?>">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
data-url
属性とdata-text
属性がシェアするリンクとシェアするタイトルを指定しています。
上記のようにdata-url="<?php the_permalink();?>"
、data-text="<?php echo get_the_title(); ?>"
とする事で、記事毎のシェアリンクを作成する事ができます。
デザインをカスタマイズしたい際は、Twitter公式ページをご覧ください。
おわりに
以上です!
レイアウトに関しては、cssで調整をお願いします。