画像の下への回り込みを解除する方法-Twitter編

Twitterのつぶやきをブログ内に表示させることが 本ブログ2011年4月6日の記事 jQuery.ajaxメソッドでTwitterのつぶやきを取得する方法 で上手く行くことが分かり、 またユーザー情報を抽出して纏め表示させることも5月1日の記事 目的要素の直前に挿入するｊQeryメソッドbefore() に書いたようにどうやら上手く行きました。

其処でプロフィール表示部分に纏めた情報は以下

  1. ユーザーアイコンのURL情報：user.profile_image_url
  2. ユーザー名：user.name
  3. ユーザープロフィール：user.description
の三つでしたが、今回これに更に　Twitter API が与えてくれている
  1. ユーザーID：user.screen_name
  2. ユーザーのサイトURL情報：user.url
の二つを追加することにしました。 両者共にURL情報を有していますから該当ページへリンクを貼ることも出来ます。

処でこの時、表示情報が増えれば表示面積も必然的に増え、 溢れた文字情報はプロフィールアイコンの下へ回り込みます。 回り込みがデザイン的に旨くない影響を及ぼす場合を考慮した、 その対策として…

スポンサーリンク

参考にするに打って付けのサイトが有りました。 それが webbibo：テキストボックスを画像の下に回り込ませない方法 です。 この時、テキストボックス内にブロック要素が存在すると この方法が効かなくなります。 そこで従来の直前追加情報内の div タグを span タグに変更しました。 以下が該当部分のコードで緑字部分が参考サイトに拠る指定で 赤字部分がブロック要素をインライン要素に変更した指定になります。

$("ol#ol110506").before(
    "<div class="article110506">"
    + "<img src="" + json[0].user.profile_image_url
    + "" style="float:left;margin-right:8px;" />"
    + "<p style="overflow:auto;zoom:1;line-height:1.3;">"
    + "<span style="font-size:120%;font-weight:bold;">"
    + json[0].user.name
    + "</span> （<a href="http://twitter.com/#!/"
    + json[0].user.screen_name + "">"
    + json[0].user.screen_name + "</a>）<br>"
    + json[0].user.description + "<br>"
    + "<a href="" + json[0].user.url + "">"
    + json[0].user.url + "</a></p></div>");

これに拠り実現した twitter　から取得したプロフィール情報を含むつぶやきの表示が以下になります。

※2016年11月26日現在 此のTwitterサービスにアクセスすると以下のようなメッセージと共に 既に提供の終了したAPIである旨が表示され新APIへ移行しなければ使用不能となっています。

{"errors":[{"message":"The Twitter REST API v1 is no longer active. Please migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview.","code":64}]}

3件のコメント

  1. Twitterから取得したつぶやき時間表示の日本慣用化

    Twitterのつぶやきをブログ内に表示させようと思い立ち、2011年4月6日の記事jQuery.ajaxメソッドでTwitterのつぶやきを取得する方法や、5月1日の記事目的要素の直前に挿入するjQueryメソッドbefore()また、5月6日の記事画像の下への回り込みを解除する方法-Twitter編など、い

  2. Twitterツイートの固定リンクの取得と表示

    以前は Twitter に於いてはつぶやき一つ一つの固定、パーマリンクを取得するのは、推奨されない仕様だったのか少々煩わしく感じる作業だった様に思います。処が最近では本家Webページでも時間表示をクリックすれば、該当するつぶやきのパーマリンクを得られます。本家の姿勢

  3. TwitterツイートのXMLログ保管と総つぶやき数の取得

    Twitter の使い方は人それぞれですから、そのツイートは単なるつぶやきに過ぎないので、そんなものの保存などは考えたこともない、という向きもあれば、ぃやぃや、自分は備忘録としてのツイートも多いのだから然るべき保存をしているという方もいらっしゃると思います。保存

コメントは受け付けていません。