ElementorにTikTokフィードを追加する方法（5つの簡単な手順）

ElementorのサイトにTikTokのフィードを追加したいけど、動画を1つずつ埋め込みコードを貼り付けるのは面倒だと思いませんか？

TikTokの動画は、あなたが制作するコンテンツの中でも特に視聴者の関心を引くものです。それらをウェブサイトに掲載することで、訪問者の滞在時間を延ばすことができ、また、訪問者が簡単にあなたをフォローできるようになります。

私はいつもElementorでページを作成していますが、このガイドでは、TikTokのライブフィードを追加する具体的な手順を、各ステップごとにスクリーンショットを交えながら、最初から最後まで詳しくご紹介します。

私は「Smash Balloon TikTok Feeds Pro」の開発チームに所属しています。そこで、Elementorのページ上でTikTokフィードを美しく表示させるための設定方法と、手動で行う方法ではなぜそれほど時間がかかるのかについてご紹介します。

ElementorにTikTokフィードを追加するにはどうすればよいですか？

ElementorにTikTokフィードを追加するには、「Smash Balloon TikTok Feeds Pro」をインストールし、TikTokアカウントを連携させます。その後、Elementor内で「TikTok Feed」ウィジェットを検索し、ページ上にドラッグ＆ドロップします。ドロップダウンメニューからフィードを選択すると、すぐに表示されます。ショートコードやコードの入力は不要です。

セットアップ全体で約5分かかります。具体的な手順は以下の通りです。

あるいは、チュートリアルに直接進むこともできます。

Elementor TikTokフィードを埋め込む最も簡単な方法

ElementorにTikTokフィードを手動で追加するのは複雑で時間がかかります。結局のところ、すべてのTikTok埋め込みコードを生成し、ウェブサイトに挿入する必要があります。

さらに、動画はTikTokの公式ルックを保持したままです。つまり、TikTokの動画フィードは、Elementorサイトに選んだデザインと衝突する可能性さえあるということです。

もっと簡単な方法としては、「TikTok Feeds Pro」のようなソーシャルメディア・アグリゲーターを利用することもできます。

「TikTok Feeds Pro」を使えば、WordPress上でTikTokフィードの作成、カスタマイズ、埋め込みがこれまで以上に簡単になります。しかも、コーディングは一切不要です！

実際、このプラグインにはTikTokフィードを簡単に埋め込むための素晴らしい機能が満載されている：

• 3ステップのガイドフローに従うだけで、数分で美しいTikTokフィードが完成します。そして、節約した時間をウェブサイトの成長に投資することができます。
• 作成したすべてのTikTokフィードは、WordPressのテーマを自動的に継承します。そのため、あなたの動画は入念にデザインされたElementorのウェブサイトに完璧にマッチします。
• 人々の注目を集めるTikTokフィードを簡単に作成するには、デザイン済みのテンプレートをインポートするだけです。
• このプラグインはとても軽量なので、Elementorのウェブサイトに大量の動画を埋め込むことができ、読み込みもこれまでと同じように高速です。つまり、より良いSEOを獲得し、より多くの人々にリーチできるということです。
• ビジュアルカスタマイザーを使えば、コーディングやデザインの経験がゼロでも、ユニークなTikTokビデオフィードを作成することができます。

TikTok Feeds Proには、専用のカスタマーサポートも付いています。ご質問やサポートが必要な際は、いつでもサポートチームにご連絡ください。

エキスパートからのアドバイス：サイトにTikTokフィードを追加する準備はできましたか？今すぐ「TikTok Feeds Pro」を入手しましょう！

なぜElementor TikTokフィードを表示するのか？

Elementor WordPressサイトにTikTokの動画を埋め込むことで、以下のことが可能になります：

• あなたのウェブサイトのトラフィックを新しいTikTokフォロワーに変換することによって、あなたのオンラインフォローを高める。
• TikTokの動画体験談を商品ページに埋め込んで、より多くの売上を獲得しましょう。
• 関連性の高い動画で人々の注目を集め、ウェブサイトに長く留まらせましょう。
• 面白いTikTok動画をウェブサイトで紹介して、エンゲージメントを高めましょう。
• 新鮮なソーシャルメディアコンテンツに関連キーワードを埋め込んで、サイトのSEOを向上させましょう。

ElementorのTikTokフィードをWordPressに埋め込む方法

ElementorサイトにTikTokフィードを埋め込むには、以下のステップバイステップのガイドに従ってください。

始めよう！

ステップ 1: TikTok Feeds Pro プラグインをダウンロードする

まず、こちらから「TikTok Feeds Pro」プラグインを入手し、ウェブサイトにインストールして有効化してください。

方法がわからない？WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。

ステップ2：新しいTikTokフィードを作成する

プラグインのガイドフローに従えば、簡単に新しいTikTokフィードを作成できます。

まず、ダッシュボードから「TikTokフィード」»「すべてのフィード」メニュー を開き、「新規追加」ボタンをクリックしてください。

ステップ3：TikTokアカウントに接続する

TikTokアカウントに接続すると、フィードがTikTok動画を取得し、あなたのサイトに表示することができます。

まず、ソースの追加 ボタンをクリックして開始する。

次に、「TikTokと接続 」ボタンをクリックします。

そうすると、ウェブブラウザでhttps://www.tiktok.com/。

ここから、プラグインにTikTokアカウントへの読み取り専用アクセス権を 付与できます。TikTok Feeds Proはこのアクセス権を使用して、あなたの情報を閲覧することのみが可能であり、いかなる変更も行うことはできません。

Authorize ボタンをクリックするだけで、アクセスが許可されます。

プラグインがあなたのウェブサイトに戻るので、このアカウントをフィードのソースとして確認することができます。

そのためには、アカウントを選択し、「次へ」をクリックするだけです。

ステップ4：TikTokビデオフィードをカスタマイズする

TikTok Feeds Proでは、あらかじめ用意されたさまざまなテンプレートから選択するよう求められます。各テンプレートは独自のデザインになっており、サイトに即座にインポートすることができます。

続行するには、ここでフィードテンプレートを選択し、[次へ]をクリックします。

次に、プラグインはビジュアルカスタマイザーでフィードを開きます。ここから、左側のオプションを使ってヘッダー、レイアウトボタン、動画要素などを編集できます。

右側には、TikTokフィードのリアルタイムプレビューがあり、簡単かつ正確にカスタマイズできます。

それでは、ビジュアルカスタマイザーからTikTokフィードをカスタマイズする方法を見てみましょう。

手始めに、私は通常動画のレイアウトを変更します。そのためには、左側のレイアウトオプションをクリックします。

このプラグインを使うと、フィードのレイアウトを4種類から選ぶことができます。それぞれのレイアウトについて説明しましょう：

• グリッド： 行と列を使用して、一度に大量のTikTok動画を表示します。
• リスト： TikTokのコンテンツを1列に表示することで、各動画をわかりやすくします。
• 石組み：動画の元の比率を維持し、複数の列で表示します。
• カルーセル： 動画のカルーセルスライダーでウェブサイトをよりインタラクティブに

レイアウトを選択したら、Saveをクリックして変更を保持します。

次に、カスタマイズをクリックして、再びメインのカスタマイズ・オプションに戻ることができます。

ここから、TikTokフィードの上に表示されるヘッダーを設定できます。

左側のヘッダーオプションを 選択し、開始します。

左上には、ヘッダーを有効 または無効に するオプションがあります。

次に、チェックボックスを使ってヘッダーのさまざまな部分を表示または非表示に することができます：

• プロフィール写真
• 名称
• ユーザー名
• 説明
• 統計
• ボタン

ヘッダーに満足したら、Saveをクリックして次に進みます。

ここから、それぞれのヘッダー要素を詳細にカスタマイズすることもできます。このチュートリアルでは、Profile Picture 要素をカスタマイズします。

そこから、上部のオプションを使ってプロフィール写真のサイズを 設定できます。

余白や パディングを 設定して、写真の配置を変えることもできる。

最後に、プロフィール写真の見栄えに満足したら、「保存」をクリックします。

ご覧のとおり、「TikTok Feeds Pro」を使えば、動画フィードの表示方法をとても簡単にカスタマイズできます。残りのオプションを使って、ボタンのデザインや動画の要素、フィルターなどを設定できます。

その後、忘れずに「Save 」をクリックして変更を確定してください。

ステップ5：ElementorにTikTokフィードウィジェットを追加する

いよいよ、Elementorのページにフィードを配置する段階です。TikTok Feeds ProはElementorに独自のウィジェットを追加するため、ショートコードをコピーする必要はありません。

まず、使用したいページまたは投稿を開き、「Elementorで編集」をクリックします。

左側のElementorパネルで、検索バーに「tiktok」と入力してください。「TikTok Feed」ウィジェットが表示されます。

「TikTokフィード」ウィジェットをページ上にドラッグします。次に、左側のウィジェット設定で、「フィードを選択」ドロップダウンからフィードを選択します。

TikTokのフィードがElementorのプレビューにすぐに表示されるため、公開する前にページ全体の他の部分と組み合わされた際の見た目を正確に確認できます。この機能は、フィードの周囲の余白を当て推量せずに調整できる点が気に入っています。

フィードのデザインを微調整したいですか？ドロップダウンメニューの下にある「このフィードを編集」をクリックすると、TikTok Feeds Proのカスタマイズ画面に戻ることができます。

あとは「公開」をクリックするだけで、あなたのTikTokフィードがオンラインになり、誰でも閲覧できるようになります。

ご覧の通り、このプラグインを使えばElementorのTikTokフィードを手間なく埋め込むことができます。このElementorのページや投稿を開くだけで、TikTokの動画がどのように見えるかを確認できます。

下の写真は、私がElementorのランディングページ用に作成したTikTokのビデオフィードです。

これで完成だ！

これだけで、WordPressのElementorサイトへTikTokの動画フィードを埋め込むことができます。「TikTok Feeds Pro」を使えば、とても簡単に設定でき、コーディングは一切必要ありません。

数回クリックするだけで、訪問者を惹きつけ、TikTokのフォロワーを増やし、ビジネスを成長させることができます。

TikTokフィードを埋め込む準備はできましたか？今すぐ「TikTok Feeds Pro」をサイトに導入しましょう！

あなたのElementorサイトにもっとソーシャルメディアコンテンツが欲しいですか？ソーシャルフィードウィジェットをウェブサイトに埋め込む方法のガイドをご覧ください。

よくある質問

TikTok Feeds ProはElementorに対応していますか？

はい。「Smash Balloon TikTok Feeds Pro」は、Elementorに独自のTikTokフィードウィジェットを追加します。そのため、ウィジェットを検索してページ上にドラッグし、ドロップダウンメニューからフィードを選択するだけで利用できます。Elementorの無料版でも動作し、Elementor Proは必要ありません。

ElementorにTikTokフィードを追加するには、ショートコードが必要ですか？

もうそんな必要はありません。専用の「TikTokフィード」ウィジェットが、従来のコピー＆ペーストによるショートコード方式に取って代わりました。Elementorの「ショートコード」ウィジェットを使いたい場合は、ショートコードも引き続き使用できますが、「TikTokフィード」ウィジェットの方が手っ取り早いです。

訪問者は、私のサイトから離れることなく、私のTikTok動画を視聴できますか？

はい。TikTok Feeds Proのすべてのプランでは、TikTokの埋め込みプレーヤーではなく、ページ上で直接、シンプルなMP4プレーヤーで動画を再生します。また、「スワイプビュー」を有効にすることもできます。これはフルスクリーンの縦型プレーヤーで、訪問者はTikTokと同じように動画をスワイプして閲覧できます。

新しいTikTokの動画は、Elementorのフィードに自動的に表示されるのでしょうか？

はい。フィードの連携が完了すれば、TikTokに投稿した新しい動画は自動的にフィードに表示されるため、Elementorのページを再度編集する必要は一切ありません。

ElementorにTikTokフィードを追加するには、いくらかかりますか？

Smash Balloon TikTok Feeds Proの「Basic」プランは1つのウェブサイトを対象としており、どのプランにも14日間の返金保証が付いています。ページビルダーに関しては、Elementorの無料版だけで十分です。

ソーシャルメディア・マーケティングのヒントとチュートリアル

• TikTok Embedがあなたのサイトで動作しないのを修正する方法
• 魅力的なソーシャルメディアコンテストのアイデアと例
• YouTube Shorts vs TikTok：あなたに最適なのはどちら？
• YouTubeチャンネルを0から1000まで増やす方法

お役に立ちましたか？ソーシャルメディア・マーケティングのヒントやコツをもっと知りたい方は、ツイッターや フェイスブックをフォローしてください。