サイトにSNSボタンを設置する方法(ツイッターとフェイスブック)。

f:id:gharuto:20200612164511j:image

今回は、ツイッターとフェイスブックのSNSボタンを設置する方法を書いていきます。

ISARAの模写コーディングを例にやっていきます。

ツイッターの「ツイート」ボタンを設置する方法。

まずTwitter Publishにアクセス。

ここをクリック↓

f:id:gharuto:20200612155035p:plain

一番左をクリック↓

f:id:gharuto:20200612155056p:plain

ここのコードをコピー↓

f:id:gharuto:20200612155442p:plain

これを自分のソースコードの、ツイートボタンを設置したい場所に貼り付けると…

f:id:gharuto:20200612155424p:plain
isara.life模写制作LP

できました!

ちなみに、コード上のテキストは「Tweet」と英語になっているのですが、実際貼り付けると「ツイート」と日本語になっていました。

フェイスブックの「いいね」ボタンと「シェア」ボタンを設置する方法。

次はフェイスブックのボタンです。

いいね!ボタン – ソーシャルプラグイン – ドキュメンテーション – Facebook for Developersにアクセス。

f:id:gharuto:20200612160906p:plain

「レイアウト」をbuttonにします。

「シェアボタンを追加」にチェックを入れておくと「シェア」ボタンも付いてきます。

(見本が表示されるので確認)

最後に「コードを取得」をクリック。

するとコードが表示されるので(少し時間がかかるかも)、「iFrame」にして、下のコードをコピーします↓

f:id:gharuto:20200612161237p:plain

これを自分のソースコードの、ボタンを設置したい場所に貼り付けると…

f:id:gharuto:20200612161431p:plain
isara.life模写制作LP

できました、が、位置がおかしいです。

これは高さ(height)がおかしいからです。

先ほど貼り付けたコードの、ここを直します↓今回は20にします。

f:id:gharuto:20200612162147p:plain

これで見てみると…

f:id:gharuto:20200612161748p:plain
isara.life模写制作LP

できました!

以上です。

コメント

タイトルとURLをコピーしました