【誰でも簡単】WixサイトにTwitterタイムラインを埋め込む

Twitterタイムライン 埋め込む

Wixで作ったホームページにTwitterを表示させたいんだけど、どうやるの?
ころにぃ
ころにぃ

 

そんな疑問におこたえします。

 

ろにぃ
ろにぃ

こんにちは、ロニー(@ronnie_2020)です。

 

副業、ブログのことをTwitterでつぶやいています。

 

今回はWixサイトにTwitterのタイムラインを挿入する方法を解説します。

 

ホームページに導入するコンテンツとして、定番のTwitterタイムライン
キーワード検索による集客と同様に重要なSNS集客

 

ホームページにきてくれた訪問者も、それをキッカケにSNSで拡散してくれると、より多くの方に見てもらえるようになりますね。

 

本記事を読んでほしい人
  • Wixサイトをもっと充実させたい人
  • SNSを使って集客をしたい人
この記事を読んでほしい方

     

    本記事の内容
    • Twitterタイムラインコードの作成
    • WixサイトにTwitterタイムラインコードを入力
    • ツイートを埋め込みたい
    本記事の内容

     

    Twitterヘルプセンターでも、タイムラインの埋め込み方は解説されていますがあまり初心者に優しくない。
    ホームページ作りたての頃は、一つ一つの言葉を調べながらの作業に苦戦すると思います。

     

    今回は実際の画像を使って分かりやすく解説していきます。

    目次

    Twitterタイムラインコードの作成

    Twitterタイムラインコードの作成

     

    始めにTwitterタイムラインのコードを作る必要があります。


    https://publish.twitter.com/にアクセス

    https://publish.twitter.com/にアクセス


    https://publish.twitter.com/にアクセスします。

    英語サイトとなりますので、翻訳して使います。


    埋め込むTwitterのURLを入力

    Twitter タイムライン 1


    『何を埋め込みますか?』と聞かれますので『TwitterのプロフィールページのURL』を入れます。

     

    Twitter タイムライン 2


    埋め込み表示を選択

    Twitter タイムライン 3

     

    TwitterのプロフィールページのURL』を入れると、表示オプションの選択となりますので、『 埋め込みタイムライン 』を選択します


    カスタマイズオプションの設定

    Twitter タイムライン 4

     

    『タイムライン』が表示されますが、埋め込むにはサイズが大きい為『カスタマイズオプションの設定』を行います

    Twitter タイムライン 5

     

     チェック
    タイムラインを表示するサイズの高さ、幅を入力
    ライトモードかグレーモードかの選択
    表示言語の選択

     

    以上を設定して更新をクリックします


    コードをコピー

    Twitter タイムライン 6

     


    カスタマイズオプションの設定
    が終わるとコードが表示されますので、コピーしてWixサイトに入力します。

    WixサイトにTwitterタイムラインコードを入力

    WIXサイトにTwitterタイムラインコードを入力

     

    作成したTwitterタイムラインコードをWixサイトで入力します。


    WixサイトのHTML iframeにコードを入力


    Wixの『編集エディタ』を開き、

    コンテンツの追加⇒その他⇒HTML iframeを選択

    Twitter タイムライン 7


    コードの入力を選ぶとHTML設定画面が出るのでコードを選択

     

    入力欄にTwitterタイムラインのコードを貼り付けます

    Twitter タイムライン 8

    適用をクリックすると埋め込みの完了

     

    Twitter タイムライン 9


    ※サイズの変更をしたい場合、わざわざ https://publish.twitter.com/ に戻る必要はありません。入力したTwitterタイムラインのコードから『data-width=”〇〇〇” data-height=”〇〇〇”』という表示を見つけて、〇の部分の数字を変更すれば表示サイズを変えることが出来ます。

     

    お好みの位置に設置してバランスをみてサイズを変更してください 。

    ツイートを埋め込みたい場合

    ツイートを埋め込みたい

     

    タイムラインではなく、1つのツイートを埋め込みたい場合、 https://publish.twitter.com/ のURL入力時にTwitterプロフィールではなく、ツイートのURLを入力することで、そのツイートだけを埋め込むことができます。

     

    タイムラインでなく、特定のツイートだけを表示させたい場合に使えます。

    WixでTwitterタイムラインを埋め込む まとめ

    まとめ


    サイトにTwitterタイムラインを埋め込むと、手軽にコンテンツの更新ができるようになります。

     

    ホームページでよくある『NEWS』や『新着情報』などの一覧にTwitterのタイムラインを利用して、

    スマホで簡単に更新できるようにしておくという使い方もできるのでぜひチャレンジしてみてください!

     

    本記事を読んだけど、

     

    • 自分で出来そうな気がしない
    • 自分でやるなんて面倒

       

      という方向けにココナラにて作業代行を承っております。

      検索順位NO.1の実績 Wixサイトを修正します 自身で作ったサイトが高品質に生まれ変わる

      お知らせ欄設置に限らず、他の機能追加、デザイン修正、サイトのお悩み相談なども承っております。
      あなたのWixサイトがより便利で魅力的に変わりますので、ぜひご検討ください!
      あわせて読みたい
      【2023年最新】wixサイトにお知らせ欄を設置する方法を徹底解説! 企業サイトでよくある「NEWS]とか「お知らせ」をWixサイトに導入したいんだけどできないの? こういった疑問にこたえます。 こんにちはろにぃです。Wix歴10年、現在は、...
      あわせて読みたい
      【スマホでも美しく】Wixサイトのテキストを綺麗に整える方法   こういった疑問にこたえます。   本記事の内容 Wixサイトのスマホ表示は超重要 スマホ表示でWixサイトのレイアウトが崩れる原因 Wixサイトでスマホ表示を簡...
      よかったらシェアしてね!
      • URLをコピーしました!
      • URLをコピーしました!

      コメント

      コメント一覧 (4件)

      • はじめまして。
        wixでTwitter表示が出来るようになりました!ありがとうございます。
        それで、問題が出てしまいました。
        表示されたタイムラインをクリックすると、普通のサイトだとそのアカウントのページに飛べます。
        しかしwixにて表示されたタイムラインをクリックするとブロック画面が出てしまい、アカウントに飛べないんです。
        なにか良い対応策ご存知でしょうか。

        • お返事遅くなってしまい申し訳ありません。
          問題は解決できましたでしょうか?
          まだのようでしたらサイトURLをTwitterDMにてご連絡ください。
          確認してみます。

      コメントする

      CAPTCHA


      日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

      このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

      目次