SWELLでのTwitter埋め込み方法とは？２つのパターンで解説します。
本記事の内容
- SWELLでのTwitter埋め込み方法
- Twitter埋め込み速度低下を防ぐ方法
この記事を読めば、Twitter埋め込み方法が分かるだけでなく、Twitter埋め込みによる速度低下問題を緩和することができます。
速度問題の改善方法は、知っているのと知らないのでは速度面で大きく変わってきます。
それでは、どうぞ。
見たいところに飛べる目次
SWELLでのTwitter埋め込み方法２つ
SWELLでのTwitter埋め込み方法を解説します。
埋め込みには、以下の２つの方法があります。
SWELLでのTwitter埋め込み方法２つ
- Twitterのリンクを貼り付ける
- コードをコピーしてカスタムHTMLに貼り付ける
それぞれ解説します。
①Twitterのリンクを貼り付ける
まず、「Twitterのリンクを貼り付ける」という方法から解説します。
この方法は、とっても簡単です。
手順は以下の通り。
STEP
埋め込みたいツイートの「･･･」をクリック
STEP
共有マークをクリック
STEP
「ツイートのリンクをコピー」をクリック
STEP
記事投稿画面で「貼り付け」をクリック（コピペする）
STEP
ツイートの貼り付けが完了
②コードをコピーしてカスタムHTMLに貼り付ける
STEP
埋め込みたいツイートの「･･･」をクリック
STEP
「ツイートを埋め込む」をクリック
STEP
「Copy Code」をクリック
STEP
「カスタムHTML」ブロックをクリック
STEP
ツイートのコードを貼り付けて完了
Twitter埋め込みでの速度低下を防ぐSWELLの設定
Twitter埋め込みでの速度低下を防ぐSWELLの設定を解説します。
といっても、やることは簡単なので、以下の通りサクッと設定しておきましょう。
STEP
SWELL設定をクリック
STEP
遅延させるコードを入力
STEP
「変更を保存」をクリック
ヒナキラ設定はこれだけです。
複数のツイートを埋め込む場合の速度低下を防ぐ方法
続いて、複数のツイートを埋め込む場合の速度低下を防ぐ方法を解説します。
具体的には、Twitterのリンクを貼り付ける方法ではなく、コードをコピーしてカスタムHTMLに貼り付ける方法を使って、さらに一部のコードを消去します。
論より証拠ということで、消去する部分を見ていきましょう。
カスタムHTMLにコードを貼り付けた場合、通常は以下のコードになります。
ツイートのコードをカスタムHTMLに貼り付けたら、以下の部分を消します。
すると、以下のようなコードになります。
ただし、これは２つ目以降のツイートに適用してください。
でないと、すべてのツイートの埋め込みが上手くできなくなってしまいますので。
まとめ｜SWELLでのTwitter埋め込みはこれで解決！
今回は、SWELLでのTwitter埋め込み方法２つと、速度低下を防ぐ方法も２つ紹介しました。
ブログにTwitter埋め込みは必須となるので、ぜひ上手に使っていって下さいね。
では、今回は以上です。
コメント