検索結果: むちゃとアプルの1日。

タグ「Google」の検索結果（1/1）

August 27, 2008

Google AJAX Feed APIでRSSフィードをタブで表示

今更ながらGoogle AJAX Feed APIを設置致しました。
色々と出来るみたいですが・・・それでさえサイドバーが長くなってしまっているのでタブ表示にしました。
これで他の私のブログの更新が見れるようになりました。
1.Google AJAX Feed APIからStart using the Google AJAX Feed APIから
　APIキーを取得。
　I have read and agree with the terms and conditions チェックを入れる。
　My web site URL 自分のサイトのURLを入力する。
　Generate API Key をクリック。
2.
Your key is:API Keyになります。
This key is good for all URLs in this directory:
先ほど入力した、各自のサイトのURLが表示されます。
Here is an example web page to get you started:
FEEDを表示するためのサンプルHTMLになります。

<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したAPI key"></script>
    <script language="Javascript" type="text/javascript">//<![CDATA[
      google.load("feeds", "1");
      function OnLoad() {
        var feedControl = new google.feeds.FeedControl();
        feedControl.addFeed("RSSフィードのURL", "タグのタイトル");
        feedControl.addFeed("RSSフィードのURL", "タグのタイトル");
        feedControl.addFeed("RSSフィードのURL", "タグのタイトル");
        feedControl.setNumEntries(5);
        feedControl.draw(
             document.getElementById("feedControl"),  {
             drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED  });
      }
      google.setOnLoadCallback(OnLoad);
    //]]>
    </script>

ピンク字⇒取得したAPI key
ピンク字(5)⇒表示したいエントリー数

<div id="feedControl">loading...</div>

赤字の「feedControl」は上のサンプルHTMLと同じにしないと動きません。

Google検索を設置する

設置したGoogleサイト検索のコードを参考にリンク、検索機能を追加
下記をサイドバー右に設置致しました。
Google フリー検索 (ベーシック版) : ウェブ検索 + サイト検索
●デザイン⇒テンプレート⇒テンプレートモジュール⇒サイドバー


<div class="searchstyle">
<form method="get" action="http://www.google.co.jp/search">
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/intl/ja/logos/Logo_25wht.gif"
width="75" height="32" alt="Google" title="Google"
/></a><br />
<input type="text" name="q" size="14"maxlength="255" value="" accesskey="a" tabindex="1"/><input type="hidden" name="ie" value="UTF-8"
/><input type="hidden" name="oe" value="UTF-8"/><input type="hidden" name="hl" value="ja"/>
<input type="submit" name="btnG" value="Search"
accesskey="b" tabindex="2" /><br /><input type="hidden" name="domains" value="musashi.s201.xrea.com"/><input type="radio" name="sitesearch" value=""accesskey="c" tabindex="3" />Web<br />
<input type="radio" name="sitesearch" value="musashi.s201.xrea.com"accesskey="d" tabindex="4" checked="checked"/>musashi.s201.xrea.com
</form>
</div>

　ピンク字は、サイト名を入れる。
　青字は、ブログの文字コードを挿入。当ブログは、UTF-8です。
　他の文字コードでブログを運用している場合は変更する。shift_jis・euc-jpです。
●デザイン⇒テンプレート⇒インデックステンプレート⇒スタイルシート（メイン）

/* Googleサイト検索 */
.searchstyle{
    padding: 2px;
    background-color: #ffffff;
    font-size: 10px;
    border: 1px dotted #999999;
}

ソーシャルブックマーク

AddClips ソーシャルブックマーク＆RSSボタン統合サービス
Add Clipsはソーシャルブックマーク追加ボタンやRSSリーダーへの追加ボタンを1つに統合して
どのソーシャルブックマーク/RSSリーダーを使っているユーザーにも対応できるオールインボタンを
提供するサービス。
とってもすっきりしました～。

<!-- AddClips Code START -->
<script type="text/javascript">
  AddClipsUrl    = '<$MTEntryPermalink valid_html="yes"$>';
  AddClipsTitle  = '<$MTEntryTitle$>';
  AddClipsId = '19C2346773C64';
  AddClipsBcolor='#666666';
  AddClipsNcolor='#8fabbe';
  AddClipsTcolor='#ffffff';
  AddClipsType='4';
  AddClipsVerticalAlign='middle'; 
  AddClipsDefault='bookmark'; 
</script><script type="text/javascript" src="http://js.addclips.org/v2/addclips.js" charset="utf-8"></script>
<!-- AddClips Code END -->

Read More... ≫

1個1個設置されるには・・・下記をどうぞ。
Hatenaブックマーク
　アイコン画像リンク　

<a href="http://b.hatena.ne.jp/append?>$MTEntryPermalink encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>Hatenaブックマークに追加"><img src="<$MTBlogURL$>はてなブックマークのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>Hatenaブックマークに追加" width="16" height="12" /></a>

del.icio.us
　アイコン画像リンク　

<a href="http://del.icio.us/post?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をdel.icio.usに追加"><img src="<$MTBlogURL$>del.icio.usのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>をdel.icio.usに追加" width="16" height="16" /></a>

Yahoo!ブックマーク
　アイコン画像リンク　

<a href="#" onclick="window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=<$MTEntryTitle encode_url="1"$>&u=<$MTEntryPermalink$>&opener=bm&ei=UTF-8','popup','width=550px,height=480px,status=1,location=0,resizable=1,scrollbars=0,left=100,top=50',0); return false;" title="<$MTEntryTitle encode_html="1"$>をYahoo!ブックマークに追加"><img src="http://Yahoo!のアイコン画像" alt="<$MTEntryTitle encode_html="1"$>をYahoo!ブックマークに追加" width="16" height="16" /></a>

livedoorクリップ
　アイコン画像リンク　

<a href="http://clip.livedoor.com/clip/add?link=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>&jump=ref" title="<$MTEntryTitle encode_html="1"$>livedoorクリップに追加"><img src="<$MTBlogURL$>livedoorクリップのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>livedoorクリップに追加" width="16" height="16" /></a>

Google
　アイコン画像リンク　

<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<$MTEntryPermalink$>&title=<$MTEntryTitle$> | <$MTBlogName$>" target="_blank"><img src="<$MTBlogURL$>banner/google.gif" alt="<$MTEntryTitle encode_html="1"$>Google Bookmarksに追加" width="16" height="16" /></a>

ニフティクリップ
　アイコン画像リンク　

<a href="http://clip.nifty.com/create?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>ニフティクリップに追加"><img src="<$MTBlogURL$>ニフティクリップのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>ニフティクリップに追加" width="16" height="16" /></a>

POOKMARK Airlines
　アイコン画像リンク　

<a href="http://pookmark.jp/post?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>POOKMARK Airlinesに追加"><img src="<$MTBlogURL$>POOKMARK Airlinesのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>POOKMARK Airlinesに追加" width="18" height="12" /></a>

※画像は、直リンクはしないで、必ずパソコンにダウンロードして使って下さい。
1.ソーシャルブックマーク用のテンプレートモジュールを作成する。
　　　●デザイン⇒テンプレート⇒テンプレートモジュール
　　　　下記コードをコピー & ペーストしてテンプレートモジュールを作成する。
　　　　テンプレート名称：socialbookmark

<ul class="sbm_icon">
<li>
<a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>Hatenaブックマークに追加"><img src="<$MTBlogURL$>banner/hatena_append.gif" alt="<$MTEntryTitle encode_html="1"$>Hatenaブックマークに追加" width="16" height="12" /></a>

<a href="http://del.icio.us/post?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をdel.icio.usに追加"><img src="<$MTBlogURL$>banner/delicious.gif" alt="<$MTEntryTitle encode_html="1"$>をdel.icio.usに追加" width="16" height="16" /></a>

<a href="#" onclick="window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=<$MTEntryTitle encode_url="1"$>&u=<$MTEntryPermalink$>&opener=bm&ei=UTF-8','popup','width=550px,height=480px,status=1,location=0,resizable=1,scrollbars=0,left=100,top=50',0); return false;" title="<$MTEntryTitle encode_html="1"$>をYahoo!ブックマークに追加"><img src="http://musashi.s201.xrea.com/blog/banner/yahoo!.gif" alt="<$MTEntryTitle encode_html="1"$>をYahoo!ブックマークに追加" width="16" height="16" /></a>

<a href="http://clip.livedoor.com/clip/add?link=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>&jump=ref" title="<$MTEntryTitle encode_html="1"$>livedoorクリップに追加"><img src="<$MTBlogURL$>banner/livedoorclip_add.gif" alt="<$MTEntryTitle encode_html="1"$>livedoorクリップに追加" width="16" height="16" /></a>

<a href="http://clip.nifty.com/create?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>ニフティクリップに追加"><img src="<$MTBlogURL$>banner/nifty_clip.gif" alt="<$MTEntryTitle encode_html="1"$>ニフティクリップに追加" width="16" height="16" /></a>

<a href="http://pookmark.jp/post?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>POOKMARK Airlinesに追加"><img src="<$MTBlogURL$>banner/pookmark_add.gif" alt="<$MTEntryTitle encode_html="1"$>POOKMARK Airlinesに追加" width="18" height="12" /></a>
</li>
</ul>

2.スタイルシート。
　　　●デザイン⇒テンプレート⇒スタイルシート（メイン）
　　　　下記コードをコピーして再構築

/* ソーシャルブックマーク */
.entry ul.sbm_icon {
    margin: 0 4px 5px 0;
    text-align: right;
}
.entry ul.sbm_icon li {
    display: inline;
}

3.設置したい場所にインクルードする。
　　　●デザイン⇒テンプレート⇒テンプレートモジュール⇒ブログ記事の概要
　　　　上記（1.）作成したテンプレートモジュールをインクルードします。

<$MTInclude module="socialbookmark"$>

≪ Close...

むちゃとアプルの1日。

タグ「Google」の検索結果（1/1）

Google AJAX Feed APIでRSSフィードをタブで表示

タグ:

Google検索を設置する

タグ:

ソーシャルブックマーク

タグ:

むちゃとアプルの1日。

タグ「Google」 の検索結果（1/1）

Google AJAX Feed APIでRSSフィードをタブで表示

タグ:

Google検索を設置する

タグ:

ソーシャルブックマーク

タグ:

タグ「Google」の検索結果（1/1）