CocoonのテーマにTwitterのタイムラインを埋め込みたいんですが方法がわかりません。どうすればいいですか？
こんなお悩みにお答えします。
- Twitterのタイムラインを埋め込む方法
- Twitterの投稿をブログ記事に埋め込む方法
今回はCocoonのテーマにTwitterのタイムラインを埋め込む方法を解説します。
【Cocoon】超簡単！Twitterのタイムラインを埋め込む方法
CocoonのテーマにTwitterのタイムラインを埋め込むとこんな感じになります。
タイムラインを埋め込む手順は以下の3つです。
- TwitterプロフィールからURLをコピーする
- コードを作成する
- ウィジェットに貼り付ける
TwitterプロフィールからURLをコピーする
Twitterのプロフィールページを開いてURLをコピーします。
コードを作成する
ツイートの詳細設定をクリックします。
「ツイートを埋め込む」をクリックします。
画面が切り替わるので赤枠内に先ほどコピーしたURLを貼り付けます。
URLを入力したら矢印ボタンをクリックします。
少し下絵スクロールして「埋め込まれたタイムライン」をクリックします。
「set customization options」をクリックします。
高さと幅が指定できます。
「Update」をクリックします。
「Copy Code」をクリックします。
ウィジェットに貼り付ける
ダッシュボード > 外観 > ウィジェット をクリックします。
「テキスト」をクリックします。
Twitterのタイムラインを追加するエリアを選んで、「ウィジェットを追加」をクリックします。
1、2、3を入力します。
「save」をクリックします。
トップページを確認して表示されていればOKです。
Twitterの投稿をブログ記事に埋め込む方法
CocoonのテーマにTwitterの記事を埋め込むとこんな感じになります。
Twitterの記事を埋め込む手順は以下の3つです。
- 埋め込みたい記事のURLを準備する
- WordPressにURLを貼り付ける
- ウィジェットに貼り付ける
埋め込みたいTwitter記事のURLを準備する
Twitterから記事のURLを取得する方法には「ツイートへのリンクをコピー」と「ツイートを埋め込む」の2種類があります。
「ツイートへのリンクをコピー」を使う
赤枠をクリックします。
「ツイートへのリンクをコピー」をクリックします。
「ツイートを埋め込む」を使う
「ツイートを埋め込む」をクリックします。
「コードをコピーする」をクリックします。
WordPressに埋め込みたいTwitter記事のURLを貼り付ける
WordPressの投稿画面にURLを貼り付けてブログにTwitter記事を表示させます。
WordPressには「Gutenberg」と「Classic Editor」の新旧エディターがあるので2通り解説します。
Gutenbergの場合
「ツイートへのリンクをコピー」を使う場合はそのままコードを貼り付ければOKです。
リンクを貼り付けるとそのままビジュアルで確認できます。
「ツイートを埋め込む」を使う場合は「カスタムHTML」をクリックします。
埋め込み用のURLを貼り付けます。
貼り付けたらプレビューで確認します。
Twitter記事が確認できればOKです。
以上がGutenbergを使ったTwitter記事の埋め込み方法です。
Gutenbergの使い方がよくわからない人は【初心者向け】Gutenbergの使い方を画像付きで詳しく解説を参考にしてください。
Classic Editorの場合
「ツイートへのリンクをコピー」を使う場合はビジュアルタブにそのままコードを貼り付けると挿入イメージが表示されます。
「ツイートを埋め込む」を使う場合は「テキストタブ」にコードを貼り付けます。
プレビューで確認します。
Twitter記事が確認できればOKです。
以上がClassic Editorを使ったTwitter記事の埋め込み方法です。
Classic Editorを使っている人はClassic Editorはいつまで使える？【結論：2021年まで】の記事もチェックしてみてください
まとめ
今回はCocoonのテーマにTwitterのタイムラインを埋め込む方法を解説しました。
本記事のポイントは2つです。
- Twitterのタイムラインは新たなファンを獲得するチャンス
- サイトを訪れた読者の滞在率を上げたい人にはおすすめ
上記のようにブログとTwitterを活用することで新たなファンの獲得とブログ集客にもつなげることができるのでまだのひとはぜひTwitterのタイムラインを設置してみてください。
Cocoonのテーマを使っている人は【Cocoon】収益アップを狙うアドセンス広告の貼り方を解説の記事もおすすめなので参考にしてください。
今回は以上です。
