SharePoint ページに Twitter の検索ウィジェットを配置


暇が出来てしまったので、SharePoint ページ上に Twitter の情報 (厳密には検索結果) を表示する方法を記載します。コードは記載しないのでご安心を。
これを使った分かり易い例としては、自社製品に関する SharePoint サイト/ページに自社製品に関するハッシュタグを持っているツィートを一緒に表示することが可能です。

image

1. 検索ウィジェットのコードを取得する

Twitter の素材ページにアクセスします。

image

[設定] タブで以下の通り設定します。
※なお、設定内容は各自に合わせてください。

  • Search Query : 対象のハッシュタグ (例: #spjp)
  • タイトル : SharePoint (日本語)
  • キャプション : ツィッター フィード

image

[環境設定] タブで以下の通り設定します。

  • ツイート更新間隔とは : 60
  • ※ 自動するクロールが嫌な場合には、[すべてのツイートを読み込む] をチェックして、[ツイート数] に「5」ぐらいを選択してください。この方がいいかもしれません。

image

[デザイン] タブでは特に変更していません。

image

[サイズ] タブで以下の通り設定します。

  • 横幅の自動調整 : チェックする

image

2. 検索ウィジェットのコードをテキスト ファイルとして SharePoint ライブラリにアップロードする

[設定を終了し、コードを生成する] ボタンをクリックし、表示されたテキストをコピーし、メモ帳で新規ファイルにコピーし、適当なファイル名 (Twitter.txt) で [文字コード] を「UTF-8」にして保存してください。
今回生成したコードは以下の通りでした。

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '#spjp',
  interval: 60000,
  title: 'SharePoint (日本語)',
  subject: 'ツィッター フィード',
  width: 'auto',
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
  }
}).render().start();
</script>

次に、このファイルを SharePoint ライブラリ上にアップロードします。

image

3. SharePoint ページにコンテンツ エディター Web パーツを配置し、テキスト ファイルを参照するように設定する

SharePoint ページにコンテンツ エディター Web パーツを配置し、以下の通り編集します。

  • コンテンツへのリンク : 上記でアップロードしたファイルの URL (相対パスまたは絶対パス) を入力します。
  • 外観 – 枠の種類 : 「なし」を選択

image

これで終了です。ページを保存すれば、本投稿最初の画面のように表示されるはずです。これは非常に簡単ですね。

2012/04/19 追記

SharePoint Maniacs さんよりご指摘いただいたので補足します。
同じようにして、ウィジェットと呼ばれるものには大概対応可能ですが、SharePoint ページを表示している端末からウィジェットによる情報の取得先 (今回の場合には Twitter) にアクセス可能である必要があります。つまり、オフラインではうまく利用できませんので、ご注意ください。

広告