SWELLへの移行方法はこちら!CLICK!

[Cocoon] ツイートをサイドバーに表示する方法 -Twitter連携-

[Cocoon] ツイートをサイドバーに表示する方法 -Twitter連携-

こんにちは!まったりです。

いろいろな方のブログを見ていると、サイドバーに

「○○さんのツイート」

が表示されているのを見た経験はありませんか?

Twitterタイムライン表示画面

ブロガーさんの中には

悩む人

ツイートのタイムラインをブログのサイドバーに表示させたいけど、どうすればいいかわからない…。

と悩んでいる方も多いのではないでしょうか。

本記事ではこのような悩みを解決するために

「Cocoonのサイドバーにタイムラインを表示する方法」

について紹介します。

本記事で学べること
  • Cocoonのサイドバーにツイートを表示する手順
作者情報
  • 理系大学院生ブロガー
  • まったりさんブログ運営中
  • 情報・ネットワーク関係の研究中

▼Twitterはこちら▼

\\本ブログは”SWELL”を使用しています//

  • ブロックエディタ対応で初心者も扱いやすい
  • シンプルで綺麗なデザイン
  • テーマ乗り換えサポートプラグインあり
  • サポートが充実

▼公式サイトから購入可能です▼

目次

1. Twitter側の設定(Twitter Publish 連携)

Cocoonのサイドバーにツイートを載せるためには

『Twitter連携』

をする必要があります。

連携の方法は以下の通りです。

はじめに「Twitter Publish」にアクセスします。

Twitter Publish トップページ

Twitter Publish のトップページではTwitterのURLを入力する欄があります。

ここに

「https://mattarisan.com/○○○」

を入力します。

まったり

ここで、○に入るものは自身のツイッターアカウントの「ユーザー名」になります。

ー 補足 ー

ユーザー名というのは以下の画像の通りになります。

ユーザー名を入力した後にエンターを押すと次のようになります。

ここでは左側の

「Embedded Timeline」

を選択してください。

すると、以下のようにタイムラインを表示するためのコードを取得する文が出てきます。

タイムライン表示用コード生成画面

そのままコードをコピーして使用するとタイムラインが無限に表示されてしまいますので少しだけ変更を加えます。

上の図にある

「set customization options」

を選択してその中の

『Height(px)』

のみを変更します。

タイムラインのサイズ変更画面
まったり

私のブログでは「Height=300」で設定しています。
後から変更可能なのでブログのレイアウトを確認しながら決めるのがおすすめです。

変更が完了したら上の画像の右下にある「Update」を押して完了です。

その後「Copy Code」を押してコードをコピーしてください。

これでTwitter連携は終了です。

次からはWordPress側での作業になります。

2. WordPress(Cocoon)側の設定

Twitter Publish からタイムライン表示のコードをコピーしたあとはWordPress側での作業になります。

はじめに、以下のように「外観」→「ウィジェット」を選択します。

WordPress 管理画面

以下の画像のように、ウィジェットの中の

『カスタムHTML』

を選択して

「サイドバー」→「ウィジェットを追加」

を選択します。

「ウィジェット」での操作

最後に、追加されたカスタムHTML用のウィジェットを編集します。

追加したカスタムHTML用ウィジェットは以下の画像のようになっているので

  • タイトル:任意のタイトルをつける
  • 内容:Twitter Publish でコピーしたコードをペースト

をして「保存」を押してください。

カスタムHTML編集画面

保存が完了したあとは実際にブログを確認してみてください。

ー 補足 ー

なかなか保存されないという場合は、サーバーのWAF設定が影響している可能性があります。

そのような場合は一度サーバーのWAFを無効にしてから再度「保存」してみてください。

おそらくこれで成功するかと思います。

▼WAFの設定解除方法はこちら▼

完了していれば以下のようにTwitterのタイムラインがサイドバーに表示されているはずです!

Twitterのタイムライン表示画面

3. 最後に

今回は

Twitterのタイムラインを「Cocoon」のサイドバーに表示する方法

について画像つきで詳しく紹介しました。

この記事通りに進めれば5分程度で完了するので是非実装してみてください。

まったり

最後までご覧いただきありがとうございました!

にほんブログ村 にほんブログ村へ
にほんブログ村

\\本ブログで使用中のテーマ”SWELL”//

よかったらシェアしてね!

コメント

コメントする

目次
閉じる