読者です 読者をやめる 読者になる 読者になる

Hope is a Dream. Dream is a Hope.

非公開ふぃふぃ工房ブログ

↓LINE登録はこちら↓

定期的につぶやいてます. 記事に興味を持って頂いたかたや、Line Botを使ってみたいかたは試しに登録どうぞ

友だち追加

今更聞けない! HPにTwitter、Facebook、LINEのシェアボタンの配置方法!!

こんにちわ。 ふぃふぃです。

今日は自分のHPにSNSシェアボタンを配置する方法を書きます。

先日、弟が結婚式のフォトムービー用のHPを作ったとの報告があったのですが、SNSボタンがついてなく、シェアできなかったので、やりかたを調べてみたいと思います。

f:id:hope_is_dream:20150715214147p:plain

大好きな人へ贈る!!!!結婚式・余興フォトムービーDVD

(そうです。宣伝もかねています。。)

(立ち上げ時期なので、リンクに飛んであーだこーだご指摘頂けるととても助かります!!)

Twitterのツイートボタンの作り方

TwitterのボタンといえばHPでよく見るこれですね。

f:id:hope_is_dream:20150715214651p:plain

作り方は簡単です。適当に選んでコピペです。

まずはツイッター本家のボタン作成ページに飛びます.

Twitterボタン | About

f:id:hope_is_dream:20150715214757p:plain

こちらの画面で、自分のHPのアドレスをいれて、適当に設定をかえます。

f:id:hope_is_dream:20150715214910p:plain

そして、右側に生成されるコードをHPにコピペするだけ。ありがとうTwitter

リンクをたたくとこんなページが開かれます。

f:id:hope_is_dream:20150715214951p:plain

おなじみの画面です。

Facebookのシェアボタン

developers.facebook.com

f:id:hope_is_dream:20150715224754p:plain

簡単です。URLを入れるだけ!!

f:id:hope_is_dream:20150715224842p:plain

GET CODEでコードがもらえます。

LINEボタン

最近は忘れられなくなってきたLINE。 LINEは一番簡単です。

media.line.me

f:id:hope_is_dream:20150715224947p:plain

URLを指定してコードいただく!

以上!

サンプルページ

SNSボタンを設置する!!! v3

まとめコード

SNSボタンを設置する!!! v3