ホームページ制作やブログ制作に役に立つ!facebookとtwitterのボタンの設置方法!ーfacebook編ー

 

ホームページ制作やブログ制作に役に立つfacebooktwitterのボタンの設置方法!ーfacebook編ー

 

こんにちは

パクちゃんです。

 

今日は最近サイトやブログによくあるfacebooktwitterのボタン設置方法について書きたいと思います。

 

スマホが普及し、SNSの利用者も増えてきました。

そしてSNSの宣伝効果はすごいと思います。

 

私はあるサイトを運営している会社でアルバイトをしていますが、
そこでイベントページを企画し、そこにSNSボタンを設置することになりました。

いいねやツイートのボタンを押したことはありますが、
設置の仕方がよく分からなくてネットから検索し、とても苦労しました。

facebooktwitterのボータンを一緒に入れるとずれてしまい、
とても大変だったので失敗がないような設置方法を共有したいと思います!

 

今回はfacebook編です。

 

facebook

 

>Like Button – Facebook開発者
↑上記のリンクをクリックすると開発者向けのサイトに飛び、
「いいね」ボタンを作ることができます。

 

f:id:fteam:20130109221528p:plain

 

①URL to Like:自分のサイトのURLを入れます。(詳しくは⑨番で)

 

②Layout Style:送信ボタンをつけるかどうかを選択します。

 

③ボタンのスタイル

f:id:fteam:20130109221708p:plain

 

1.standard:下のように「いいね」ボタンと「送信」ボタン、何人が「いいね」をクリックしているのかが分かります。そして「いいね」をクリックして、友達に知らせましょうという文言が出ます。

f:id:fteam:20130109221848p:plain

2.button_count:何人の人が「いいね」ボタンを押しているのか簡易的に表示します。

f:id:fteam:20130109221907p:plain

3.box_count:ボタンが縦並びで表示されます。button_countと同じように、何人の人が「いいね」ボタンを押しているのか簡易的に表示されます。

f:id:fteam:20130109221934p:plain

 

⑥ボタンのフォント

f:id:fteam:20130109222036p:plain

→いろんなフォントがありますが、日本語は何を選んでも変わりません。

 

⑦ボタンの色

f:id:fteam:20130109222125p:plain

1.light             2.dark   

f:id:fteam:20130109222213p:plain

→上記のようにボタンの背景色を変えることができます。

 

⑧ボタンの文言

f:id:fteam:20130109222254p:plain

 1.like           2.recommend

f:id:fteam:20130109222415p:plainf:id:fteam:20130109222426p:plain

→ボタンの中の文言を「いいね」にするか「おすすめ」にするか決めることができます。

 

⑨コードを作成してサイトに設置する

f:id:fteam:20130109222607p:plain

→設定が終わったら⑨のGet Codeをクリックして上記のコード「1」と「2」をサイトやブログに全部入れてください。

もし、①番で自分のサイトのを入れると「⑨-2」のコードに下記線部分が変わります。

f:id:fteam:20130109223033p:plain