SNSの共有ボタンをWebサイトに設置する方法

SNSの共有ボタンをWebサイトに設置する方法について、誰でもきれいに貼れるように図解と簡単なHTML・CSSの記述例を説明します。

共有ボタン設置例

  • このエントリーをはてなブックマークに追加

上記のような、SNS共有ボタンをWebサイトに設置する方法を説明します。

パソコン上では4つの共有ボタンを表示してますが、スマートフォンでは「LINE(ライン)」も加わり5つの共有ボタンが表示されてます。

手順は、①各SNSのサイトでコードを作成して、②HTML内に貼って、③CSSで並びを一直線にする、の順で解説します。

facebook(フェイスブック)

先ず、以下のリンク先にてコードを作成します。

コードの作成⇨フェイスブック

フェイスブックのコードを作成

フェイスブックのコードを作成

①設置するページのURLを「http://」から入れる
②ボタンの「レイアウト」を選択
③「②」で選択したボタンが表示される
④「GetCode」をクリックすると以下のコードが表示される

フェイスブックのコードをコピー

フェイスブックのコードをコピー

①「コード」をコピーして法事する位置に貼る
②「Javaスクリプト」もコピーして設置するページ(どこでも可)に貼る

ご注意:フェイスブックのコードは、設置するページ毎に作成する必要があります。

HTMLの記述は後で説明しますが、「ul・liタグ」で囲む方法にします。
とりあえず各SNSのコードをどんどん貼って下さい。

広告

Google+(グーグルプラス)

以下のリンク先にてコードを作成します。

コードの作成⇨Google+

Google+のコードを作成

Google+のコードを作成

①ボタンの「レイアウト」を選択
②ボタンの「サイズ」を選択
③「言語」を選択
④ここは「デフォルト」のまま
⑤設置するページのURLを「http://」から入れる
⑥選択したボタンが表示される
⑦「コード」をコピーして表示する位置に貼る
⑧「Javaスクリプト」もコピーして設置するページ(どこでも可)に貼る

ご注意:Google+のコードも、設置するページ毎に作成する必要があります。

はてなブックマーク

以下のリンク先にてコードを作成します。

コードの作成⇨はてなブックマーク

はてなブックマークのコードを作成

はてなブックマークのコードを作成

①ボタンの「レイアウト」を選択
②設置するページのURLを「http://」から入れる
③ページの「タイトル」を入れる
④「ブックマーク数」表示を選択
⑤「言語」を選択
⑥選択したボタンが表示される
⑦「コード」をコピーして表示する位置に貼る
⑧「Javaスクリプト」もコピーして設置するページ(どこでも可)に貼る

ご注意:はてなブックマークのコードも、設置するページ毎に作成する必要があります。

Twitter(ツイッター)

以下のリンク先にてコードを作成します。

コードの作成⇨Twitter

Twitterのコードを作成

Twitterのコードを作成

①ボタンの「レイアウト」を選択
②「ページのURLを使う」を選択
③「ページのタイトルを使う」を選択
④以下の項目はデフォルトのまま
⑤選択したボタンが表示される
⑥「コード」をコピーして表示する位置に貼る

Twitterは、②と③の設定を行う事で、同じコードを他のページにも使用できます。

広告

LINE(ライン)

以下のリンク先にてコードを作成します。

コードの作成⇨LINE

LINEのコードを作成

①LINEのコードを作成 ②LINEのコードを作成

①ボタンの「レイアウト」を選択
②「ページタイトルとURLを使う」を選択
③「コード」をコピーして表示する位置に貼る

LINEは、②の設定を行う事で、同じコードを他のページにも使用できます。

広告

HTML記述方法「SNS共有ボタン設置」

いろいろ試しましたところ、「ul・liタグ」が簡単で、きれいに表示されました。

HTML記述例

<ul class="sns">
<li>facebookのコード</li>
<li>Google+のコード</li>
<li>はてなブックマークのコード</li>
<li>Twitterのコード</li>
<li>LINEのコード</li>
</ul>

CSS記述方法「SNS共有ボタン設置」

以下のCSSの記述で、横一直線に並びました。

CSS記述例

ul.sns{
padding: 0;
margin: 0;
}

ul.sns li{
display: inline-block;
margin: 10px 0px 10px 10px;
}

.fb_iframe_widget > span {
vertical-align: baseline !important;
}

「display: inline-block」で、通常は縦に並ぶli要素を、横方向に並べます。

「.fb_iframe_widget > span {vertical-align: baseline !important;}」は、「facebook」の共有ボタンだけ、下にずれ込む現象を解消させます。

以上、お試しください。

SEO に戻る

ホームページ作成方法 TOPに戻る

  • このエントリーをはてなブックマークに追加