DiviウェブサイトにTikTokフィードを追加する方法(ステップバイステップガイド)
クリック・ソーシャル

ClickSocialを使ってWordPressから直接ソーシャルメディア投稿をスケジュールする

無料トライアル開始 アングルライト
ホーム ブログ DiviウェブサイトにTikTokフィードを追加する方法(ステップバイステップガイド)

DiviウェブサイトにTikTokフィードを追加する方法(ステップバイステップガイド)

diviにtiktokフィードを追加する

エンゲージメントを高め、TikTokのフォロワーを増やす簡単な方法をお探しですか?

DiviのウェブサイトにTikTokフィードを追加するだけです。TikTokは、一口サイズの動画コンテンツを提供する素晴らしいソースであり、訪問者を飽きさせないことができます。

しかし、手作業でTikTokのコンテンツをウェブサイトに追加するのは時間がかかり、複雑です。

より良い選択肢を提供するために、私たちはソーシャルメディアマーケティングの経験を活かして、DiviにTikTokフィードを埋め込むためのシンプルなコードフリーガイドをまとめました。

なぜDiviにTikTok動画フィードを埋め込むのか?

人気のウェブサイトビルダーであるDiviは、オンラインでビジネスを促進するための美しいウェブサイトを超簡単に作成できます。

ウェブサイトをさらに魅力的なものにしたいなら、TikTokの動画フィードを埋め込むのが簡単な解決策です。そうすれば、関連性のある一口サイズの動画を紹介することができ、ウェブサイトへの興味を持続させることができます。

[中略)TikTokユーザーは、TikTokが自分が好きだと知らなかった新しいトピックを紹介してくれることに同意する確率が1.8倍高い。

TikTok What's Next レポート 2024

これはほんの始まりに過ぎません!Divi WordPressサイトにTikTokフィードを埋め込むこともできます:

  • 自分のTikTok動画を宣伝して、より多くの再生回数、「いいね!」、TikTokフォロワーを簡単に獲得する。
  • キーワードを豊富に含むキャプションを追加することで、ウェブサイトのSEOを向上させ、より多くの人々にアピールできます。
  • Diviのeコマースサイトのチェックアウトページに動画レビューと証言を追加して、コンバージョンを高める
  • 潜在顧客に情報を提供するために、製品ページに製品のデモンストレーション、チュートリアル、開封ビデオを表示する。
  • その他にもいろいろある!

Divi WordPressサイトにTikTokフィードを追加する方法

以下のステップバイステップのチュートリアルに従うだけで、あなたのDiviウェブサイトにTikTok動画のフィードをすぐに設置することができます。

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

TikTokコンテンツを埋め込む最も簡単な方法は、市場でナンバーワンのTikTokフィードプラグインを使用することです:TikTok Feed Pro

このシンプルなツールを使えば、HTMLやカスタムCSSなどのコードは一切不要で、わずか数分で、サイトの外観にマッチした美しいTikTokフィードを自動的に追加することができます。

tiktok feed pro 価格

このプラグインは軽量で高速なので、いくつでも動画を埋め込むことができ、サイトの読み込みもこれまでと同じように速くなります。つまり、SEOを強化し、訪問者により良い体験を与えることができるのです。

一番いいところは?このプラグインには、いつでもあなたの手助けをしたり、質問に答えたりする準備ができている専門家チームが付属しています。

まず、TikTok Feed Proをあなたのウェブサイトにインストールして有効にする前に、ここでTikTok Feed Proを入手してください。

WordPressのプラグインをインストールする方法については、こちらの初心者向けガイドをご覧ください。

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

プラグインの3ステップのガイドフローを開いて、新しいTikTokフィードを素早く作成できるようになりました。

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

ライブ・フィード・エディターを開く tiktok feed

その後、TikTok Feed Proは、これまでに接続したすべてのアカウントまたはソースを表示します。新しいフィードはこれらのソースから動画を取得し、あなたのサイトに表示します。

私の場合、まだソースを接続していないので、新しいソースを追加すればいい。

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

tiktok feed pro 追加ソース

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

新しいページで、TikTokと接続する ボタンをクリックして進みます。

ウェブブラウザでhttps://www.tiktok.com/

Tiktokとつながる

あなたの動画を表示するために、TikTok Feed Proはあなたのアカウントへの読み取り専用アクセスを要求します。つまり、このプラグインはあなたのコンテンツを見ることができるだけで、変更を加えることはできません。

Authorize(認証) ボタンをクリックして、アカウントに接続することができます。

そうすると、もう一度ウェブサイトが開きます。ここで、あなたのTikTokアカウントがソースとして表示されます。

あなたのウェブサイトを離れることなく、このソースを今後のTikTokフィードに自由に再利用できます。

とりあえずソースを選択し、「Next」をクリックする。

Tiktokソースを選択

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

ユニークなTikTokフィードを簡単に作成できるように、このプラグインにはインポート可能なフィードテンプレートが用意されています:

  • デフォルト
  • カード
  • リスト
  • 最新ビデオ
  • カルーセル
  • ショーケース・カルーセル

気に入ったテンプレートを選んだら、「Next」をクリックする。

この例では、Defaultテンプレートを使うことにする。

フィードテンプレートの選択

テンプレートを選ぶと、TikTok Feed Proが自動的にフィードを作成し、ビジュアルカスタマイザーで開きます。

左側には、レイアウト、ヘッダー、ビデオ要素、ボタンなどを変更するオプションがあります。さらに、右側のライブプレビューは、リアルタイムですべての変更を追跡するのに役立ちます。

ライブフィードエディター tikto feed pro

手始めに、ウェブサイト上の動画のレイアウトを変更します。

左側のレイアウトオプションを選択し、それを開始します。

レイアウトを開く tiktok feed pro

次に、TikTok Feed Proは4つの異なるレイアウトを表示します:

  • グリッド: 一度に大量のTikTok動画を異なる行と列で表示する。
  • リスト: フィードを1列に表示する代わりに、各動画をハイライトします。
  • 石積み:元のビデオのプロポーションを維持したまま、石積みのギャラリーを表示する。
  • カルーセル: TikTokのビデオフィードをインタラクティブなスライダーとしてサイトに埋め込めます。
tiktok feed proのレイアウトオプション

続行するには、テンプレートを選択し、保存をクリックします。

また、行数、列数、表示動画数などもここのオプションから変更できます。レイアウト設定の変更が終わったら、カスタマイズ ボタンをクリックしてメインオプションに戻ります。

カスタマイズボタン ライブフィードエディタ tiktok feed pro

次に、TikTokフィードの上のヘッダーの見え方を変えてみよう。

まず、左からヘッダーオプションを選択します。

tiktokのオープンヘッダーオプション

次に、フィードヘッダーを有効 または無効に するオプションが左側に表示されます。

その下に、以下のようなヘッダー要素の表示・非表示のオプションがある:

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

表示したい要素を選択し、保存ボタンをクリックするだけです。

また、このページから各要素をクリックして詳細にカスタマイズすることもできます。例として、プロフィール写真をカスタマイズしてみましょう。

そうすれば、プロフィール写真のサイズ、スペーシングオプション、写真周辺の余白を変更することができます。

ヘッダープロファイルのカスタマイズ

TikTokビデオフィードに満足したら、「保存」をクリックして変更を確定します。

このように、残りのオプションを使って、ボタン、ビデオ要素、キャプションなどの見え方を変更できます。変更後は忘れずに保存してください。

ステップ5:TikTokフィードをDiviに追加する

このTikTokフィードをDiviに追加するには、右上の埋め込みボタンをクリックします。

tiktokフィードを埋め込む ライブフィードエディタ

すると、動画を埋め込むさまざまな方法がポップアップで表示されます。例えば、ウェブページに追加したり、フッターに表示したり、ウェブサイトのサイドバーエリアに追加したりできます。

ショートコードをここにコピーしてください。

コピーショートコード tiktok feed pro

次に、このTikTok動画フィードを埋め込むための新しいDiviページを作成します。

ダッシュボードからPages " Add New メニューを開き、Use the Divi Builderボタンをクリックするだけです。

投稿にTikTokフィードを表示するには、投稿 " 新規追加 メニューを開いてから、Divi Builderを使うオプションを選択します。

既存のDiviの投稿やページを使用することもできます。

diviに新しい投稿を追加する

Diviでは、3つの方法でページの作成を開始できます。

  • 構築を開始します:空白のテンプレートからページのデザインを開始
  • レイアウトを見る: Diviであらかじめデザインされたレイアウトをインポート
  • ページを選択します:既存のデザインをコピーして、代わりに使用する。

どちらかお好きな方をお選びください。

diviビルダーオプションを選択する

Start Buildingオプションを選択すると、Diviはすぐに新しいページや投稿のデザインを開始します。

Diviエディタで構築開始

レイアウトをブラウズするオプションを使用すると、新しいポップアップが表示されます。

ここからお好きなレイアウトをお選びください。

ライブラリdiviからレイアウトパックを読み込む

気に入ったデザインがあれば、「このレイアウトを使う」をクリックするだけで、現在のページや投稿に取り込むことができます。

Divi用インポート・レイアウト

Choose Page オプションを選択した場合、Diviを使ってすでに作成したテンプレートのリストが表示されます。

あとは使いたいテンプレートを選ぶだけ。

ライブラリからDiviテーマを読み込む

Diviエディターで、TikTokフィードを挿入できる新しい行を作成します。

そのためには、緑色のプラス・アイコン(+)をクリックし、行デザインを選択します。

divi ウェブサイトに行を挿入する

行を追加したら、ここでプラス(+)アイコンをクリックして新しいモジュールを挿入できます。

追加できるさまざまなモジュールのポップアップが開きます。とりあえず、検索バーを使って"Code " モジュールを探し、下のそれをクリックしてください。

diviテーマ用コードモジュール

モジュールを挿入すると、いくつかのオプションが追加されたポップアップが開きます。そこで、先ほどのショートコードをコードフィールドに貼り付けることができます。

その後、チェックアイコンをクリックして変更を保存します。

tiktokフィードショートコードを挿入する divi

最後に、Publishをクリックすると、TikTokビデオフィードがWordPress Diviサイトでライブ配信されます。ページや投稿を開くだけで、訪問者にどのように見えるかを確認できます。

tiktok diviフィードの例

それで終わりだ!

このように、適切なツールを使えば、DiviにTikTokフィードを追加するのはとても簡単だ。TikTokのコンテンツを使って、訪問者を惹きつけ、ソーシャルメディアのフォロワーを増やし、ビジネスを成長させることができます。

TikTok Feed Proプラグインを使えば、TikTokとあなたのウェブサイトを統合することがこれまで以上に簡単になります!

DiviにTikTokフィードを埋め込む準備はできましたか?今すぐTikTok Feed Proをあなたのサイトに

DiviサイトでYouTubeチャンネルを宣伝したいですか?DiviにYouTubeの動画を簡単に埋め込む方法をご紹介します。

あなたのビジネスを成長させるソーシャルメディアのヒントやトリックについては、ツイッターや フェイスブックでのフォローをお忘れなく。

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。