を追加する方法を学ぶ Twitter あなたにフィード Shopify ウェブサイトを使用すると、ホームページ、ブログ、さらには製品ページなどのページでブランドの社会的存在感を示すことができます。
埋め込みの重要な部分 Twitter あなたのウェブサイトのフィードは、自動的に更新されることです Twitter つまり、あなたのウェブサイトから投稿をコピーする必要はありません。 Twitter ページで見やすくするために変数を解析したりすることができます。
また、 Twitter フィードは、Web サイトに大量の画像を挿入する優れた方法です。 多くのブランドが使用 Twitter ホームページの画像ギャラリーとして機能するギャラリーまたはフィード。
を追加する方法は XNUMX つあります。 Twitter あなたにフィード Shopify ウェブサイト：
- アプリで
- のコードを埋め込むことによって Twitter ウィジェット
このガイドでは、両方の方法について説明し、どちらが最適かを判断できるようにします。 サイトのレイアウトやワークフローによっては、見た目や機能が他よりも優れている場合があるため、各オプションを試すことをお勧めします。
を追加する方法のすべてを学ぶために読み続けてください Twitter にフィード Shopify ウェブサイト！
追加する方法 Twitter にフィード Shopify ウェブサイト
まず、追加する方法を探ります Twitter フィード Shopify アプリで。 いくつかあります Twitter アプリは Shopify App Store のすべてが独自の機能を提供します。 ソーシャルメディアボタンを提供する人もいます Twitter フォロワー数、または自動投稿。 ただし、私たちが探しているのは、現在のデータを同期するアプリです Twitter フィード、あなたのアカウント (または別の公開アカウント) からの最新の投稿を一定数表示します。
方法 1: 追加 Twitter にフィード Shopify アプリで
無料のものと有料のものがありますが、 Twitter からダウンロードできるフィード アプリ Shopify アプリストア。 このチュートリアルでは、ゼスタードを使用します Twitter フィード アプリは、必要な機能を提供し、無料であるためです。 別のアプリを選択する場合は、最初にすべての無料アプリを試すことをお勧めします。これは、料金を支払う必要がある機能ではないためです。
開始するには、 ゼスタード Twitter フィード アプリ あなたの上 Shopify 店。 まだ始めたばかりの場合 Shopify、学ぶ ここでストアを作成する方法. にログインすると、アプリを見つけることができます。 Shopify アカウント、そして アプリを追加または App Store に直接移動する.
クリック アプリを追加 会場は Shopify 次に、App Store アプリをインストールする すると、権限とプライバシーに関する情報を含むダッシュボード画面に戻ります。
インストールすると、新しいタブが表示されます Twitter フィード 下 アプリ タブの Shopify. セクションもあります 使い方 アプリに従って、適切にセットアップできます。
表示する前にいくつかの設定が必要です Twitter フロントエンドでフィードします。 に行く タイムラインの設定 始めること。
このページには、フィードの全体的な外観とコンテンツをカスタマイズするためのいくつかのフィールドがあります。
入力する最も重要なフィールドは、 フィード名; に入力するか貼り付けます Twitter 引きたいハンドル。 任意のパブリックからのフィードを表示することが可能です Twitter プロフィール。
その他の設定は次のとおりです。
- フィード ボックスの幅
- フィード ボックスの高さ
- フィードのテーマ (ライトまたはダーク)
- フィード制限 (特定の数の最近のツイートのみを表示)
- データリンクの色
- フィードの背景色
カスタマイズが完了したら、必ず 変更を保存 ボタンをクリックしてプレビューをレンダリングします。
クリックした後 変更を保存、アプリはのプレビューを生成します Twitter 餌。 フィードを自由にスクロールして戻って、達成したいことに基づいて設定を調整してください。
プレビューのすぐ上に、アプリがフィード用のショートコードも生成したことが表示されます。 これは、ウェブサイトのどこにでも貼り付けられる独自のコードです。 Shopify Webサイト。 クリックして コピー コードをクリップボードに。
この Twitter フィード アプリでは、コードを簡単にコピーできるポップアップが表示されます。 キーボード ショートコード CTRL + C (Mac の場合は Command + C) を使用して、ショートコードをコンピューターのクリップボードにコピーするだけです。
あなたは配置したいかもしれません Twitter を食べます Shopify About Us、Contact、または Support ページなどの Web ページ。 これを行うには、次の場所に移動します。 オンラインストア > ページ in Shopify. フィードを追加する新しいページを開きます。 クリック <> (HTML を表示) ボタンをクリックして、ビジュアル エディターから HTML コード エディターに切り替えます。
先ほどコピーしたショートコードを HTML エディターに貼り付けます。 ページに他のコンテンツがある場合は、フィードを配置する場所を選択し、そこにコードを挿入します。 必ずページを保存してください。
プレビューするか、その Web アドレスに移動して、そのページのフロントエンドに移動します。 が表示されます。 Twitter フィードは、ショートコードを挿入した場所に正確に表示されます。
多くのオンライン ストアの所有者は、追加の方法を学びたいと考えています。 Twitter にフィード Shopify ホームページ。 その場合、 Shopify ホームページの視覚的なカスタマイザを提供し、挿入をさらに簡単にします Twitter ショートコードをフィードします。
そのためには、 オンラインストア > テーマ > カスタマイズ.
次に、配置したいエリアを見つけます。 Twitter 餌。 クリック Add Section ボタンをクリックします。 を検索 カスタムリキッド テーマセクションに挿入します Shopify.
この カスタムリキッド テーマ セクションでは、左側にいくつかの設定が表示されます。 その中で最も重要なのは、 カスタムリキッド 分野。 先ほどコピーしたショートコードを貼り付けます Twitter フィード アプリ。
クリックした後 Save、が表示されます Twitter でレンダリングされたフィード Shopify 右側にホームページのプレビュー。
次のオプションを使用して、セクションを少しカスタマイズすることもできます。
- カラースキーム
- セクションパディング
- カスタムCSS
からショートコードを挿入する最後の方法 Twitter フィード アプリは、実際のテーマ ソース コードに追加することによってです。 これは一般的に、 Twitter 特定のセクションまたはページにグローバルに表示されるフィード。
そうするには、に行く オンラインストア>テーマ in Shopify。 クリックします。 省略記号（…） ボタンをクリックすると、さらにオプションが表示されます。 クリック コードの編集 プルダウンメニューから
選ぶ テーマ。リキッド ファイルを作成し、テーマ コーディング内の任意の場所にコードを貼り付けます。 別の方法として、変更することもできます テンプレ or セクション より詳細に制御するために Twitter フィードが表示されます。
あなたが見つけることができる他の設定 Twitter フィード アプリには次のものが含まれます。
- 単一のツイート (またはリツイート) を埋め込むオプション
- を生成するツール Twitter 共有ボタン
- ハッシュタグ フィードを表示するオプション
方法 2: 追加 Twitter にフィード Shopify 埋め込まれた Twitter ウィジェット
Twitter 公開タイムラインを Web サイトに公開する方法を提供します。 これは、ブランドのフィードや別のアカウントからの投稿を表示できることを意味します。
開始するには、に行きます 公開。Twitter.COM.
の URL を貼り付けるか入力します。 Twitter フィードとして表示したいプロフィール Shopify 店。 矢印ボタンをクリックして進みます。
ここでは、XNUMXつのオプションがあります。
- 埋め込まれたタイムライン
- Twitter ボタン
この Twitter ボタン ウェブサイトのどこかにフォローまたはメンション ボタンを追加するのに便利です。 しかし、この記事では、 Twitter フィードが表示されます。 したがって、 埋め込まれたタイムライン オプションを選択します。
Twitter を自動的に生成します。 Twitter フィード ウィジェット コード。 ただし、 カスタマイズ オプションの設定 ウェブサイトに公開する前にフィードを完全にフォーマットするためのリンク。
これにより、フィード ウィジェットの外観を変更するためのいくつかの設定が明らかになります。
- 高さ
- 幅（Width）
- ルック（ダークまたはライト）
- 言語 (通常は自動で使用できます)
クリック 更新ボタン 下のプレビューで変更を確認します。 ご覧のとおり、 光 〜へ 暗いです 既にプレビューでレンダリングされています。
自分のやり方に満足したら Twitter フィードの外観、 コードをコピーする ボタンをクリックして、ウィジェット コードをコンピューターのクリップボードにコピーします。
今度は、追加する方法を学びましょう。 Twitter あなたにフィード Shopify Webサイト。 最も簡単なオプションは、フィードを Shopify ホームページ経由 Shopify のセクションから無料でダウンロードできます。
に行く オンラインストア > テーマ > カスタマイズ を開く Shopify ビジュアルカスタマイザー。 挿入したいホームページの領域を見つけます Twitter 餌。 のいずれかをクリックします。 Add Section 表示するボタン Shopifyのセクションのコレクション。 リストをスクロールするか、 カスタムリキッド セクション。 クリックしてページに追加します。
カスタムリキッド 以前にコピーしたコードを貼り付けるフィールド ( Twitter Webサイト）。 次のような他のセクション設定を自由に調整してください カラースキーム, セクションパディングまたは カスタムCSS.
最初に表示されるのは、あなたのツイートへのリンクだけです。 Twitter アカウント。
をクリックするだけです。 Save ボタン用 Shopify をレンダリングする Twitter カスタマイザーのプレビューにフィードします。
を追加する追加の方法 Twitter 埋め込みコードを介したフィードは、特定のページに配置することです Shopify。 に行く オンラインストア > ページ これを達成するために。 編集するページを開きます。
ページエディターに入ったら、 HTML を表示 (<>) ボタン。 これにより、Visual Editor から、コードを追加するために必要なカスタム HTML エディターに切り替わります。
最初にコピーしたコードを貼り付けます Twitter。 クリックします。 Save or パブリッシュ ボタンをクリックして変更を有効にします。
ページをプレビューするか、フロントエンド ビューに移動します。 ここでは、 Twitter そのページにあった可能性のある他のコンテンツと一緒に表示されるフィード。
を埋め込む最後の方法 Twitter コード付きのウィジェットは、 Shopify テーマファイル。 に行く オンラインストア>テーマ 始める。 を選択 省略記号（…） ボタンをクリックして選択 コードの編集.
この テーマ。リキッド ファイルを使用すると、現在インストールされているテーマを完全に制御できます Shopify。 貼り付けます Twitter テーマ内でフィードを表示したい場所にフィードコードを挿入します。それ以外の場合は、 テンプレート と セクション 必要に応じてファイル Twitter フィードは、サイドバーなど、Web サイトの特定の部分にのみ表示されます。
それは追加する方法です Twitter フィード Shopify ウェブサイト！
お気づきかもしれませんが、 Shopify アプリ Web サイトのどこにでも配置できるショートコードを作成します。 「アプリを使う意味は何ですか？」と尋ねるかもしれません。 次の XNUMX つの理由があります。
- アプリを使用すると、すべての作業が XNUMX つのダッシュボードに含まれます。 Shopify.
- で利用できるはるかに多くのカスタマイズ設定があります。 Twitter を通じて提供されるものと比較した場合のフィード アプリ Twitter 埋め込み可能なウィジェット。
- ショートコードは、によって提供されるコードよりも威圧的ではありません Twitter.
それだけです。 追加方法に関する完全なガイドを願っています Twitter フィード Shopify かどうかを判断するのに役立ちました plugin またはコード ウィジェットは、e コマース ストアに適しています。 Instagram フィードなどの代替ソーシャル メディア フィードを埋め込んだり、ソーシャル プルーフや TikTok ビデオなどを表示したりするために、他のアプリを検討することをお勧めします。 ご不明な点がございましたら、コメントでお知らせください。
コメント 0応答