ＳＮＳの共有ボタンをＷｅｂサイトに設置する方法
ＳＮＳの共有ボタンをＷｅｂサイトに設置する方法について、誰でもきれいに貼れるように図解と簡単なHTML・CSSの記述例を説明します。
共有ボタン設置例
上記のような、ＳＮＳ共有ボタンをＷｅｂサイトに設置する方法を説明します。
パソコン上では４つの共有ボタンを表示してますが、スマートフォンでは「LINE（ライン）」も加わり５つの共有ボタンが表示されてます。
手順は、①各ＳＮＳのサイトでコードを作成して、②ＨＴＭＬ内に貼って、③ＣＳＳで並びを一直線にする、の順で解説します。
facebook（フェイスブック）
先ず、以下のリンク先にてコードを作成します。
コードの作成⇨フェイスブック
フェイスブックのコードを作成
①設置するページのＵＲＬを「http://」から入れる
②ボタンの「レイアウト」を選択
③「②」で選択したボタンが表示される
④「GetCode」をクリックすると以下のコードが表示される
フェイスブックのコードをコピー
①「コード」をコピーして法事する位置に貼る
②「Javaスクリプト」もコピーして設置するページ（どこでも可）に貼る
ご注意：フェイスブックのコードは、設置するページ毎に作成する必要があります。
HTMLの記述は後で説明しますが、「ul・liタグ」で囲む方法にします。
とりあえず各SNSのコードをどんどん貼って下さい。
広告
Google+（グーグルプラス）
以下のリンク先にてコードを作成します。
コードの作成⇨Google+
Google+のコードを作成
①ボタンの「レイアウト」を選択
②ボタンの「サイズ」を選択
③「言語」を選択
④ここは「デフォルト」のまま
⑤設置するページのＵＲＬを「http://」から入れる
⑥選択したボタンが表示される
⑦「コード」をコピーして表示する位置に貼る
⑧「Javaスクリプト」もコピーして設置するページ（どこでも可）に貼る
ご注意：Google+のコードも、設置するページ毎に作成する必要があります。
はてなブックマーク
以下のリンク先にてコードを作成します。
コードの作成⇨はてなブックマーク
はてなブックマークのコードを作成
①ボタンの「レイアウト」を選択
②設置するページのＵＲＬを「http://」から入れる
③ページの「タイトル」を入れる
④「ブックマーク数」表示を選択
⑤「言語」を選択
⑥選択したボタンが表示される
⑦「コード」をコピーして表示する位置に貼る
⑧「Javaスクリプト」もコピーして設置するページ（どこでも可）に貼る
ご注意：はてなブックマークのコードも、設置するページ毎に作成する必要があります。
Twitter（ツイッター）
以下のリンク先にてコードを作成します。
コードの作成⇨Twitter
Twitterのコードを作成
①ボタンの「レイアウト」を選択
②「ページのURLを使う」を選択
③「ページのタイトルを使う」を選択
④以下の項目はデフォルトのまま
⑤選択したボタンが表示される
⑥「コード」をコピーして表示する位置に貼る
Twitterは、②と③の設定を行う事で、同じコードを他のページにも使用できます。
広告
LINE（ライン）
以下のリンク先にてコードを作成します。
コードの作成⇨LINE
LINEのコードを作成
①ボタンの「レイアウト」を選択
②「ページタイトルとURLを使う」を選択
③「コード」をコピーして表示する位置に貼る
LINEは、②の設定を行う事で、同じコードを他のページにも使用できます。
広告
HTML記述方法「SNS共有ボタン設置」
いろいろ試しましたところ、「ul・liタグ」が簡単で、きれいに表示されました。
ＨＴＭＬ記述例
<ul class="sns">
<li>facebookのコード</li>
<li>Google+のコード</li>
<li>はてなブックマークのコード</li>
<li>Twitterのコード</li>
<li>LINEのコード</li>
</ul>
CSS記述方法「SNS共有ボタン設置」
以下の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」の共有ボタンだけ、下にずれ込む現象を解消させます。
以上、お試しください。
ＳＥＯ に戻る
ホームページ作成方法 TOPに戻る