【図解でわかる！】TwitterとFacebookのボタンを埋め込む方法【Web制作】

こんにちは、ゆうが(@yuuuugablog)です。

今回は、TwitterとFacebookのボタンを埋め込む方法というテーマで話していきます。

実装イメージ

実装イメージは上記で、Web制作やLPなどにはかなり使われています。
代表的な例でいうと、iSaraのLPに使われていますね。

それでは、さっそく解説していきます。

スポンサーリンク

Twitterのボタンを埋め込む方法

まずは、Twitter公式のアプリTwitter Publishにアクセスして、下記の画像のように「Twitter Buttons」を選択してください。

そうすると５つのボタンがでてくるので、一番左の「Share Button」を選択してください。

そしたら下記の画像のようにコードがでてくるので、コピーして自分がボタンを埋め込みたい部分にコードを貼り付けてください。

これで、Twitterのボタンを埋め込むことができました。

続いては、Facebookのボタンを埋め込む方法を解説していきます。

スポンサーリンク

Facebookのボタンを埋め込む方法

まずは、こちらのFacebook公式のツールのFacebook for Developersにアクセスして、「レイアウト→ボタン」を選択してください。

そしたら、「コードを取得」をクリックして、はじめに上の方のコードを</body>の直上に貼り付けてください。

下記のコードでもOKです。

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v9.0" nonce="i6mHToXh"></script>

つぎに、下の方のコードをコピーして自分がボタンを埋め込みたい部分に貼り付けてください。

また、下記のコードでもOKです。

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="button" data-action="like" data-size="small" data-share="true"></div>

これで、Facebookのボタンを埋め込むことができました。

TwitterとFacebookのボタンを一列に並べる方法

では、実装イメージの通りに一列に並べる方法を解説します。

やり方は、先程のコードを並べればいいだけなのですが、このやり方ですと下記の画像のようにFacebookの方のボタンが少し上に行ってしまいます。

なので、下記のCSSコードを貼り付ければ一列に並びます。

.fb_iframe_widget {
    display: inline-block;
    position: relative;
    top:2px;  
}

これで実装イメージのように並べられます。

実装イメージ

BoostNoteに保存しておくと便利

最後になりますが、今回のTwitterとFacebookのボタンのコードをBootsNoteに保存しておくと、すばやく引き出せるのでおすすめです。

詳しくはこちらの記事【神アプリ】web制作で使える便利ツールは、BoostNoteで決まりで解説しているので、気になる方は読んでみてください。

それでは、今回は以上です！
それでは、最後まで見てくださり、ありがとうございました！