エントリー

Twitterの新ウィジェットを幅220px以下のサイドバーに収める方法

2012年9月からTwitterのタイムラインを表示するウィジェットの仕様が変更になりましたが、この新ウィジェットでは最小幅が220pxと決められており、設置するとfreoでもWeb Diary ProやWeb Gallery Proでもデフォルトのテンプレートではサイドバーからはみ出てしまいます。
ファイル 68-1.jpg

なので幅を自由に変更できる旧ウィジェット(Join the conversation ウィジェット)を設置したままという人も多いと思いますが、旧ウィジェットはAPI v1.0からv1.1への移行に伴い2013年3月6日以降は使えなくなる予定です。
「 Join the conversation ウィジェット」提供終了のお知らせ(Twitterブログより)

そこで新ウィジェットをなんとかはみ出さずに設置する方法を紹介します。

  1. まずは新ウィジェットのコードをテンプレートに貼り付けます。
    Twitterにログインして Twitterのウィジェット より「新規作成」を押して、ユーザーウィジェットの設定より設定をして、コードをコピーします。
    templates/utility.html(Web Diary ProやWeb Gallery Proの場合は skin/navigation.html)にコピーしたコードを貼り付け、その前後を {literal}{literal} で囲んだものをアップします。
    設置コードの例:
    <div class="utility">
      <h3>Twitter</h3>
      <div class="content">
        {literal}
          <a class="twitter-timeline" href="https://twitter.com/(Twitterのアカウント名)" data-widget-id="(ウィジェットのコード番号)" lang="ja">@(Twitterのアカウント名) からのツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        {/literal}
      </div>
    </div>
    ※Web Diary ProやWeb Gallery Proの場合は {literal}{literal} で囲まずコードをそのまま使用します。
    ※日付などの表示が日本語にならない場合は lang="ja" を追加します。

【2013.3.26追記】

  1. freoの ブログパーツ管理プラグイン を使用する場合は、templates/utility.html の適当なところに
    <!--{foreach from=$plugin_parts|smarty:nodefaults item='plugin_part'}-->
    <!--{if $plugin_part.status == 'publish'}-->
      <div class="utility">
      <h3>{$plugin_part.name}</h3>
        <div class="content">
          {$plugin_part.text|smarty:nodefaults}
        </div>
      </div>
    <!--{/if}-->
    <!--{/foreach}-->

    を追加(freoの公式サイトに記載されているものとは異なります)し、
    プラグインの登録画面の内容に

    <a class="twitter-timeline" href="https://twitter.com/(Twitterのアカウント名)" data-widget-id="(ウィジェットのコード番号)" lang="ja">@(Twitterのアカウント名) からのツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    と登録すれば同じように表示することができます。
  2. css/common.css(Web Diary ProやWeb Gallery Proの場合は skin/common.css)に
    .twitter-timeline {
      min-width: 180px!important;
    }
    を追加します。
【追記】firebugでiframeのidを調べなくてもclass名で事足りることが判明したので書き換えました。
【2014/1/29追記】Twitterウィジェットのコードが一部変更になっているようなので修正しました(太字部分を追加)。

すると以下のようになります。
ファイル 68-2.jpg

ページ移動

関連エントリー

コメント

ねむ

fc2のブログのやり方も解説してもらえませんか?失敗してしまいます・・・

  • 2013/04/20 21:17:00

ccc

fc2ブログなら
「Twitter公式ウィジェットのフォント・背景色などを変更するプラグイン」
http://paro2day.blog122.fc2.com/blog-entry-1084.html
に詳しい解説が載っているようですので参考にして下さい。

  • URL
  • 2013/04/20 21:50:00

taki

初めまして、YASUと申します。

長年、Web Diary Proを使っております。
最近、ブログに貼り付けてあるTwitterが突然表示されなくなりました。
Web Diary Proの更新も質問の場もなくなり、いよいよfreoへの移行を検討しなくてはと検索してる際、こちらのサイトを発見致しました。
ご丁寧にWeb Diary ProによるTwitterの解説があるではありませんか!しかも去年!
もしお時間があるようでしたら、突然表示されなくなったTwitterを表示できるようになりませんでしょうか?
宜しくお願いいたします。

ps
まだまだ、私にはferoを使いこなす自信がありません。
できればWDPを使っていきたいと思っております。

  • URL
  • 2014/01/28 23:37:00

taki

すみません、追記です。

ブログパーツを使うと表示されます、
しかしながら、「Twitter公式ウィジェット」を貼り付けでは表示されません。

  • 2014/01/29 00:14:00

ccc

このサイト(WGPで作成)のトップページにもTwitter公式ウィジェットを貼り付けておりますが、特に問題ありません。
今回、埋め込みコードが若干変更されていたので、やり直してみましたが、それでもちゃんと表示されています。
ちなみにテスト用のWDPでも問題ありませんでした。
※ちなみにここのサーバーはさくらです。

なので、「ブログに貼り付けてあるTwitterが突然表示されなくなった」という現象がよくわかりませんm(__)m

  • URL
  • 2014/01/29 22:46:00

taki

お手数をお掛けします。

なので、「ブログに貼り付けてあるTwitterが突然表示されなくなった」という現象がよくわかりませんm(__)m

そうですか~私だけの現象なんでしょうか?
ちなみにこちらのサイトのTwitte表示もわたしの環境下では表示されてません
スクリーンショットで画像を私のサーバへUPしてみました。
http://www.takinoya.com/SnapCrab_Web-Liberty&freo.jpg

ありがとうございました、

  • 2014/01/29 23:53:00

taki

表示されない現象が分かりました。
参考になればと思い投稿致します。

通常使ってるブラウザはchromeです、
このようなトラブルがあった場合のみIEで確認してます。
今回、chromeの拡張機能のひとつ「avast! Online Security 9.0.2013.75」をOFFにしたところ正常にTWITTERが表示されました。
しかしながら、IEで表示されないのかは未だに不明です。
IEのアドオン「avast!」は無効になってます。

それではお騒がせし申し訳ございませんでした。

  • 2014/01/31 10:30:00

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年03月

- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed