2020/05/31

【コピペでOK】FacebookのいいねボタンやTwitterのツイートボタンをサイトに設置する方法

CSS

今回は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で調整をお願いします。

• facebook
• Tweet
• hatebu
• Share
• Read Later