【サイト制作】SNSプラグインを埋め込む方法

プログラミング

シュテル(@sterchannel2020)です!

WebサイトにはSNSのタイムラインが埋め込んであったりするけどどうやるんだろう?

今やSNSの運用はマストですからね。埋め込み方を覚えていきましょう👍

SNSプラグインを埋め込む流れ

レイアウト組みさえできれば意外と簡単です。

「Facebook プラグイン生成」と検索すればすぐページが見つかります。

そこでサイズなどを指定してコードを生成すればよいのですが、IFrameコードの場合はデバイス画面幅に合わせて伸縮はしてくれないので注意です。

TwitterとYouTubeもそれぞれのプラグイン生成ページに行ってコードを作り、HTMLファイルに貼り付けるだけです。

SNSプラグインのレスポンシブ対応

CSSのメディアクエリー

@media (max-width:600px){ }

の中に書き込んで、縦並びになるようにしておきます。

flex-directionをcolumnにして、各要素の幅を100%にしておけばOKです。

SNSプラグイン埋め込み完成!

PC表示だときれいに横並びになってます
画面幅を狭めるとFacebookはIFrameコードなので伸縮せず
TwitterとYoutubeはきれいに伸縮してくれてます

コメント

  1. small seeds より:

    Wow, awesome blog structure! How long have you ever been running a blog for?
    you make running a blog glance easy. The entire look of your website is fantastic, as smartly as the content
    material!

    Visit my page :: small seeds

  2. flaxseed oil より:

    I think that everything published made a lot of sense.

    However, what about this? suppose you composed a
    catchier post title? I mean, I don’t wish to tell you how to run your website,
    however suppose you added something to maybe get people’s attention? I mean 【サイト制作】SNSプラグインを埋め込む方法 | STER CHANNEL
    is a little boring. You might peek at Yahoo’s front page and
    watch how they write article titles to grab
    viewers to click. You might try adding a video or a picture or
    two to grab people excited about everything’ve written. In my opinion, it would bring your posts
    a little bit more interesting.

    Also visit my web-site … flaxseed oil

  3. healthy eating より:

    I loved as much as you’ll receive carried out right here.
    The sketch is tasteful, your authored subject matter
    stylish. nonetheless, you command get got an shakiness over that you wish be
    delivering the following. unwell unquestionably come more
    formerly again as exactly the same nearly very often inside
    case you shield this hike.

    my webpage healthy eating

  4. illegal drugs より:

    Woh I enjoy your content, saved to fav!

    Here is my web site :: illegal drugs

  5. This post is priceless. Where can I find out more?

    my site; portable power packs

タイトルとURLをコピーしました