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

疑問を持ってる人

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

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

実装イメージ

【Web制作】TwitterとFacebookのボタンを埋め込む方法

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

JavaScript

<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>

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

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

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

JavaScript

<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の方のボタンが少し上に行ってしまいます。

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

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

CSS

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

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

実装イメージ

【Web制作】TwitterとFacebookのボタンを埋め込む方法

BoostNoteに保存しておくと便利

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

BootsNoteとは、使いまわしたいコードを保存できて、素早くコードを引き出せるエンジニアのメモ帳です。

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

[sc_blogcard url=”https://yuuuugablog.com/programming/boostnote”]

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