Hatena::ブログ(Diary)

honeniqの三日坊主日記 このページをアンテナに追加 RSSフィード

2011-12-05

Twitterウィジェットを設置するとエラーが出る場合の対処法

あらすじ

先日からサイドバーTwitterウィジェットを設置しようとして四苦八苦してました。

具体的には、Twitter公式ウィジェットをフッタに貼り付けると、「ご指定のscriptタグは許可されていません。」と冷たく拒否されてしまうんです。


はてなダイアリー利用可能タグのページを見たところ、

はてなダイアリー内では、セキュリティ上の観点からscriptタグやobjectタグの貼り付けを基本的に禁止していますが、ブログパーツ貼り付けのため、以下のタグについては一部利用可能としております。

という記述があり、どうやら許可されているブログパーツに限ってはscriptタグも許可される模様。

対応ブログパーツ一覧Twitterウィジェットも入っていますが、若干古い情報のような感じがします。というのも、現在Twitterの公式ウィジェットJavaScriptで実装されているのですが、この一覧に載っているのはFlashぽいから。


そして進展

それでしばらく無かったことにしていたのですが、同じく一覧のページに

※提供元の貼り付けコードの変更等により、ブログパーツが貼り付けられなくなることがございます。その場合には、お手数ですがはてなアイデアにてお知らせください。

という記述があったので、はてなアイデアで検索してみました。そしたら出ました。


ほぼ求めていた通りの情報です。

こちら→Twitterのブログパーツ(プロフィールウィジェット)が貼り付けられなくなっています。修正願います。

sa_to_e 『コードの変更が原因と思われます。

http://d.hatena.ne.jp/hatenadiary/20100520/1274349465の利用例のコードと比べると、現在のコードでは【hashtags】【timestamp】【avatars】の3項目がなくなっています。

試しにこの3つを追加してみると正常に貼り付けられます。』 (2011-10-24 15:47:15)

sa_to_e 『プロフィールウィジェットだけでなく、検索ウィジェット/お気に入りウィジェット/リストウィジェットも同様の理由で貼り付けられなくなっています。』 (2011-11-12 16:07:02)


さらに同記事のトラックバックからの情報で、使えるようになりました!ありがとうございます!

こちら→はてなダイアリー

こちら→はてなダイアリー


本題の対処法

そのまんま受け売りですが、一応ここにも載せておきます。


Twitterウィジェットのコードの中の

  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }

ここの中に「hashtags」「timestamp」「avatars」の3つを追加して、

  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }

こんな感じにしてやれば良いです。


おまけ

どうやら、はてな側でTwitterの公式ウィジェットだと認識するために、「hashtags」「timestamp」「avatars」も必要だったのが、Twitter側の仕様変更で消されちゃって、なんだこいつ偽物かってなってたわけですね。


今のテーマだと、若干横幅が変な感じになってますが、とりあえず満足しました。


あと、この方法を試しているときにもう一つ困ったことがあるのでメモ。

フッタを書き換えて「プレビュー」しただけだと、Twitterウィジェットは出てきません。ちゃんと「この内容に変更する」を押して、実際のページを見ると出てきます。ちょっとだけ焦りました。

2011-12-04

サイドバーにブログパーツを綺麗に置く方法

はじめに

サイドバーに外部のブログパーツを設置したくて色々試した結果、なんとなくサイドバーのことが分かってきたので、今回学んだことを紹介します。

デザイン編集の「詳細」の「ページのフッタ」っていう項目ですが、かんたんデザインでポチポチ選んで設定したまんまだと

</div>
<div class="sidebar">
	<hatena name="profile" template="hatena-module">
	<hatena name="searchform" template="hatena-module">
	<hatena name="section" template="hatena-module">
	<hatena name="sectioncategory" template="hatena-module">
	<hatena name="keywordcloud" template="hatena-module">
</div>

こんな感じになっていると思います。

ここにコードを追加して自分の好きなブログパーツを設置するときはどうするのっていうのが今回の話題です。


基本的なこと

サイドバーに何かを表示したい場合、

<div class="sidebar">

から最後の

</div>

の間にコードを書いていくことになります。


公式のはてなモジュールに関しては、

<hatena name="profile">

みたいに書いておくと、はてな側で対応したブログパーツを展開してくれます。最初に載せたコードの場合は、プロフィール・ブログの検索・最新タイトル・カテゴリー・最新言及キーワードの順で展開されます。


外部のブログパーツに関しては展開はしてくれませんので、それぞれのサービスで提供されているコードを貼り付けることになると思います。


見た目を統一したい

f:id:honeniq:20111204225525p:image:medium:right

ただ、そのままコードを書いても、そのままポンと置かれるだけです。他の項目のようにタイトル的なものもありませんし、テーマによっては枠線もつかなくて大分浮いてしまうことになります。もうちょっと周りに雰囲気を合わせたいところです。

そこで、追加したいブログパーツを下記のコードで囲います。

	<div class="hatena-moduletitle">ブログパーツのタイトル</div>
		<div class="hatena-modulebody">
			ブログパーツのコード本体
		</div>
	</div>

はてなモジュールにも、barcodeモジュールのようにポン置きになってしまうタイプのものがありますが、同じように囲ってやればOKです。


そんなこんなで、当サイトのサイドバーは現状こんな感じです。

</div>
<div class="sidebar">
	<hatena name="profile" template="hatena-module">
	<hatena name="searchform" template="hatena-module">
	<hatena name="section" template="hatena-module">
	<hatena name="adsense" format="180x150">
	<hatena name="sectioncategory" template="hatena-module">
	<hatena name="keywordcloud" template="hatena-module">
	
	<div class="hatena-module">
		<div class="hatena-moduletitle">QRコード</div>
		<div class="hatena-modulebody" align="center">
			<hatena name="barcode" value="http://d.hatena.ne.jp/honeniq/" template="hatena-module">
		</div>
	</div>

	<div class="hatena-module">
		<div class="hatena-moduletitle">ランキング</div>
		<div class="hatena-modulebody" align="center">
			<a href="http://mobile.blogmura.com/iphone/"><img src="http://mobile.blogmura.com/iphone/img/iphone100_33_3.gif" width="100" height="33" border="0" alt="にほんブログ村 携帯ブログ iPhoneへ" /></a>
		</div>
	</div>
</div>

f:id:honeniq:20111204225526p:image:medium:right

はてなモジュールをいくつか並べて、その下に今回紹介した方法でQRコードにほんブログ村のバナーを置いています。他のパーツと同様に、タイトルがついてますね。

意外と簡単なので、是非お試しください!