Panoramio Widget API(javascript)の貼り付けコード その３

ヘッダーロゴの下に下記のコードを追加しました。※これで各ページの最初の方にコードが挿入されます。

<script 
	type="text/javascript" 
	src="http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja_JP.utf8"
></script>
<style type="text/css"> 
.panoramio-wapi-photo .panoramio-wapi-images { 
	background-color: #ffffff; 
} 
</style> 

３行目の「&hl=ja_JP.utf8」は無い方がいいかも？ 無ければユーザー設定言語で表示されるはずだけど・・・

英語になったり、中国語になったり・・・

---

各記事には下記の部分だけをHTMLモードで記入します。

<div id="p86314230"></div>
<script type="text/javascript">
(function() { 
var wapiblock = document.getElementById('p86314230');
 
var myOptions = {
  'width': 573,
  'height': 340,
  'openLinksInNewWindow': true
};
var photoRequestOptions = {
 ids: [
  {  'photoId': 86314230,  'userId': 1597930 }
  ,{  'photoId': 86314228,  'userId': 1597930 }
  ,{  'photoId': 86314232,  'userId': 1597930 }
]
};
var widget = new panoramio.PhotoWidget(wapiblock, photoRequestOptions, myOptions);
widget.setPosition(0);
})(); 
</script>

１行目と４行目の「p86314230」は同じ文字列にしてください。idなのでブログ内で重複しないように、日付＋フォトIDの文字列でもOKです。７行目と８行目は写真のアスペクト比に合わせて変更した方がいいです。著作権表示の部分が改行する幅の時は18を大きく変更。

• ３：２      573, 400      573 /  3 × 2 + 18 ≒ 400
  
  
  
• １６：９     573, 340      573 / 16 × 9 + 18 ≒ 340
  

１２～１６行目は３枚の写真を切り替えて表示する場合の例です。

９行目は「true」で写真をクリックした時に新しいウインドウで開く、「false」だと同じウインドウで開くの違いみたいです。※APIのリファレンスには載っていない
[2013/04/23] APIサンプルのソースを見ていたら、載ってました。

以上、元ネタは下記サイトです。詳細は下記参照

• Panoramio のすすめ - NAVER まとめ