WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

TwitterやFacebookなどのSNSをサイトに埋め込む

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterFacebookなど既存のSNSプラグインを使うのが非常に便利です。

SNSプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報が更新されます。クライアントにHTMLの知識が無い場合でも、前回の授業で紹介したGoogleカレンダーSNSプラグインを上手く使って、更新頻度の高いサイト作りを目指しましょう。

Twitter

Twitterのタイムラインを埋め込みます。タイムラインにも数種類ありますが、今回は一番シンプルな物を埋め込んでみましょう。Twitterの場合、公開されているものであれば、どのユーザーのタイムラインでも埋め込むことができます。非常に簡単に出来るので、積極的に使っていきましょう。


f:id:yachin29:20150318191943p:plain


ウジェット制作画面
https://publish.twitter.com/#

ウジェット制作画面で生成されるコードはそのままではローカル環境で確認する事が出来ません。
ローカルでウジェットを確認する場合はエンベットされているjavascriptのアドレスの頭に「https:」を付け加えましょう。

最初にコピーしてきたコード

<a class="twitter-timeline" href="https://twitter.com/seiburailway">Tweets by seiburailway</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

                  ↓

https:」を付け加える

<a class="twitter-timeline" href="https://twitter.com/seiburailway">Tweets by seiburailway</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

httpやhttpsを省略する

CSSJavascriptを読み込むときhttpやhttpsを省略する事が出来ます。この形であれば、リンク先が「http」のページから「https」のページに変更してもリンク先へのアドレスをわざわざ書き換える必要が無くなります。最近は大規模サイトのみならず小規模サイトでも「https」になっている場合が良くあるので、省略しておくと便利です。
ただ、この場合ローカルでは表示されない為、注意が必要です


Facebook

2015年6月にFacebookプラグイン機能が大幅に仕様変更してしまい、これまでの「Like Box」も2015年6月以降使う事が出来なくなってしまいました。今後は「Page Plugin」というプラグインを「Like Box」の代わりに使っていく事になります。


yachin29.hatenablog.com



Facebookの方もTwitterと同じようにプラグインを使用するのですが注意が必要です。Facebookの場合、個人のページでは出来ず、Facebookページ(旧ファンページ)のみがWebサイトに埋め込む事が出来ます。
なのでFacebookの場合、クライアントがFacebookのアカウントを持っていない場合、Facebookページを作成する所から始まります。


https://www.facebook.com/pages/create/

f:id:yachin29:20150318193353p:plain



Facebookページを作成したら、開発者ツールから埋め込みたいウジェットを選択し、コードをコピーしHTMLに貼り付ければOKです。

ページプラグイン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook


ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

blog.cloud9works.net