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



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

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

Twitter

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

f:id:CHOCOtan:20220210090216p:plain

ウジェット制作画面

https://publish.twitter.com/#


Facebook

f:id:CHOCOtan:20220210090302p:plain

Facebookをhtmlに埋め込む場合は「Page Plugin」というプラグインを使います。






「Page Plugin」作成ページ

ページプラグイン - ソーシャルプラグイン - ドキュメンテーション - Facebook for Developers









Facebookの方もTwitterと同じようにプラグインを使用するのですが注意が必要です。Facebookの場合、アカウントの種類によってURLが変わるので注意が必要です。
また、「Page Plugin」はローカルでは表示されないので必ずリアルタイムプレビューで確認しましょう。

正しいURL

https://www.facebook.com

 

以下のURLの場合、「ja-jp」の部分を削除します

https://ja-jp.facebook.com