前回はJetpackのウィジェットを使用しましたが、今回は、テキストウィジェットを使用して、Twitterのツイートをサイドバーに表示する方法を紹介します。
iPhoneなどでスクロールの操作中に、ウィジェット内でクルクルとスクロールしてしまうことありますよね？
気づいて指二本スクロールにすれば脱出できますが、ちょっと面倒です。
Simplicityには「パソコン用テキストウィジェット」が用意されていて、モバイルからのアクセスには、ウィジェットを表示させないことができます。
ホント、Simplicityは便利ですね(^^)
逆に「モバイルの場合も表示させたいな」という場合は、標準のテキストウィジェットを使用すればOKですので、お試しください。
Twitterからウィジェット用のコードを取得
WebブラウザからTwitterにログインした状態で、アバターのアイコンから[設定]をクリックします。表示された画面の左のサイドバーから[ウィジェット]をクリックします。
次のような画面が表示されたら、ウィジェットの[新規作成]ボタンをクリックして「ユーザータイムライン」を選択してください。
ボックスにTwitterのURLを入力して、[→]をクリックします。
[set customization option]と書かれたリンクをクリックして、コードをサイドバー用にカスタマイズします。
高さ、幅、言語を入力します。入力合わせて、下のプレビューが変化するので、確認しながら入力しましょう。
入力が終わったら、[Update]ボタンをクリックします。
カスタマイズされたコードが生成されました。
[Copy Code]をクリックして、コードをクリップボードにコピーしておいてください。
コピーできると下の確認メッセージが表示されます。右上の[×]で閉じてください。
サイドバーにSimplicityのウィジェットを追加
Simplicityを有効にされている方は、外観 > ウィジェット に「[S] パソコン用テキストウィジェット」が表示されていると思います。
クリックして、サイドバーにウィジェットを追加します。
「モバイルの場合も表示させたいな」という方は、ここで「テキストウィジェット」を選択してください。
タイトル欄には「Twitter」など見出しにしたい文字を入力します。
テキスト欄には、さきほどコピーしたウィジェットのコードを貼り付けます。
入力が終わって、最後に右下の[保存]ボタンをクリックすれば完成です。
Simplicityのウィジェットによる表示結果
早速、ツイートがどのように表示されているか、確認してみましょう。
Jetpackのウィジェットを使用した場合とほぼ同じですが、上の方の「〇〇さんのツイート」と表示されているところがちょっと違いますね。
また今回は、Simplicityの「[S] パソコン用テキストウィジェット」を使用したので、モバイルからのアクセスには、Twitterのウィジェットを表示しないようにもできました。