10/4金 外部ツールの実装／SNSや配布パーツをサイトに表示させる。

1.まずは  2学期WEB提出物  の「サイト」のテンプレートを完成させて、
2.完成したテンプレートをコピーして本文(コンテンツ)に各ページ内容を作成して行く


3.その１つにSNSのページを作成する。

[参照]　http://ateitexe.com/web/twitter-widgets-customize/

1.自分のtwitterにログインし、右上の歯車のマークから「設定」を選ぶ。

2.左の欄の一番下の項目の「ウィジェット」を選択

3.右上の「新規作成」のボタンをクリック

4.検索クエリの窓に自分のサイトに合うワードを入れる。

5.右下に出てくるコードをコピーしてサイト内の表示したい場所にペーストする。
(index.htmlが完成している人は、index.htmlをコピーしてsns.htmlまたはtwitter.htmlという名前で保存し、sns.htmlの本文の部分にペーストする。)
--------------------------------------------------------------------------------------------------------------
(例) 自分のtwitterを持っている場合は自分のtwitterを表示してみましょう。

1.自分のtwitterにログインし、右上の歯車のマークから「設定」を選ぶ。

2.左の欄の一番下の項目の「ウィジェット」を選択

3.右上の「新規作成」のボタンをクリック

4.ユーザー名を入れて「ウィジェットを作成」のボタンをクリック

5.右下に出てくるコードをコピーしてHTMLの表示したい場所にペーストする。

--------------------------------------------------------------------------------------------------------------

Facebook の組み込み
(2種類埋め込むコードが出てくる事が多いので若干複雑)

個人ページのバッジの埋め込み
https://www.facebook.com/badges/
http://ameblo.jp/7natsu5/entry-11344350567.html

Social plugin
http://developers.facebook.com/docs/plugins/

--------------------------------------------------------------------------------------------------------------

youtubeの組み込み
サイトに埋め込みたいyoutubeのページを表示している時に
右下の「共有」をクリック→下に出てくる「埋め込みコード」をクリック

--------------------------------------------------------------------------------------------------------------

配布されているブログパーツを埋め込む(JavaScriptでの実装)

ブログパーツ.com -

ブログパーツ助っ人

ブログパーツファーム

例) 東京オリンピック開会日までをカウントダウンするブログパーツ。
http://www.kurepelin.com/blog-parts/?id=Tokyo2020Countdown