こんにちは☆
Gem-oneの権蔵でございます。
ブログ(wordpress利用)の中に、twitterとの連携を、かけていないことに気がつきました。
いい機会なので、今まで連携していたtwitpicのガジェットを含め、その方法を紹介します。
今回の記事から何回かにわけて、下記の３個を紹介します♪
・twitpicの写真をブログに貼り付けよう
・twitterでの投稿内容をブログパーツで貼り付けよう
・ブログ更新のお知らせを自動でtweetしてもらっちゃおう
twipicの写真をブログパーツで貼り付けよう
普段、twitterへの写真公開は、twitpicを利用しています。
この写真をブログパーツ（ウィジェット）として登録します。
手順はこんな感じです。
【１】twitpic側の操作
１）twitpicのサイトへ行き、twitter連携をかける
２）右上の「Add a Twitpic widget to your site」のリンクボタンを押す
３）ガジェットの形状を決める
４）WidgetCodeとあるテキストをコピーする【２】ブログ側
１）wordpressにログインし、「外観」のウィジェットページをあける
２）「利用できるウィジェット」から「テキスト」を選択し、右側のサイドバーにはる
３）貼った「テキスト」のサイドバーに、先ほど【１】４）でコピーした文字を貼り付ける
これでいけます。
ブログをのぞいてみてください。
twipicの写真を貼り付けよう（番外）
PHPやJavascriptがさわれる方は、WebAPIを利用する手もありですよ☆
http://dev.twitpic.com/
に、APIのドキュメント(APIv2を使ったほうがいいですよ）があります。
ユーザーの最新画像がxmlなどでもってこれます(例えば私のはこれ）
その情報を元にして、ブログに画像一覧を貼るという感じです。
要約を記載すれば、こんな感じですよ☆
１）ブログを表示する際にtwitpicのWebAPIを利用し、XML(json)で「画像情報」をもらう
２）もらった「画像情報をimgタグなどで一覧化」し表示する
「画像情報」をもらう
twitpicからWebAPI経由で（最新の）画像一覧をもらう方法です。
今回は、ＸＭＬ形式でもらっていますが、javascriptであれば、jsonでもってきた方がらくですので、その場合は下記は雰囲気としてみてみてください。
さて、現時点でtwitpicに画像情報をくださいとAPIをたたいてみました。
http://api.twitpic.com/2/users/show.xml?username=gonchang3
<?xml version="1.0" encoding="UTF-8"?> <user> : <username>gonchang3</username> <name>権蔵(団子侍)</name> : <images> <image> <id>725040368</id> <short_id>bzo4q8</short_id> <message>つぶあんの方が、お得ですYO!</message> : </image> <image> <id>725006554</id> <short_id>bznemy</short_id> <source>api</source> <message>さぁ、がんばろっと。 </message> </image> : </images> : </user>
上記は、最新の画像一覧だそうです。たまぁーに日本語が見えますが、ほぼ英語です。ＸＭＬっていう言語で書かれているので、英語だらけです。
このＡＰＩは、ユーザーを指定すると、そのユーザがアップロードした画像の一覧を教えてくれるというもの。
users/showというWebAPIコマンドだそうです。
ほかにも、なにやら沢山ありますよ？
http://dev.twitpic.com/docs/
さて、この中身ですが、実は要約して記載をかけました。
twitpicから返答頂ける内容は、ものすごく長いんです（笑）
今回は、画像のサムネイルを表示するだけなので、そこの部分だけかいつまんでおります。
で、サムネイルとして画像一覧を表示する場合、上記のＸＭＬの中で、気にするのは、/user/images/の中にあるimageだけです（８行目、１４行目からあります）。
このimageタグの中にshort_idがありますよね（１０行目、１６行目です）。
サムネイル画像が見たいのであれば、この情報だけ分かれば、後はいらないと言って過言ではないです。
では試しにみてみましょう。
１０行目のshort_idは「bzo4q8」となってます。この情報を元にこのＵＲＬを作ります。
http://twitpic.com/show/mini/bzo4q8
では、このＵＲＬをブラウザで表示させてみてください。
サムネイルにちょうどな小さい画像が出ましたね？
たとえば、ＵＲＬのminiの部分を削り、このＵＲＬを観てみてください。
http://twitpic.com/bzo4q8
ほら、今度はtwitpic本家で、普通のサイズの画像が見られましたよね。
つまり、これさえ分かれば、
①サムネイルが表示し
②クリックした時にtwitpicで大きい写真をみさせる
が出来ちゃいますよね？
実際にxmlをどうもらうのか？
やることは分かったと。
じゃあ、どうやってＸＭＬを持ってくるのん？という話ですよね。
ここからは、ある程度phpなりjavascriptなりが分からないと厳しいです。
分からない方、勉強してからみてみてください。
PHPであれば、simple_xmlなどのパーサーを利用したり、file_get_contentやfopenでそのまま持ってくる方法。javascriptも考え方は同じです。
jqueryで持ってくる等、色々可能かと思います。
もらった画像情報を画像一覧として表示する
ここまでくるともう楽です。
１）先ほどＸＭＬの内容からshort_idを拾い
２）拾ったshort_idからimgタグを作る
それだけです。
上記１）はxpathでパースして持ってくる方法、正規表現でshort_idタグの中身をとってくる方法、色々対処があります。その後、持ってきた分だけimgタグを作ればいいだけです。
imgタグの前に、aタグをはってhrefにtwitpic本体へのリンクもすると、いいですね♪
でっかいサイズの写真がみられるようになりますからね。
最後にwordpressに埋め込む
上記の内容を、最後にwordpressの構造の中に放り投げてあげておしまいです。
javascriptで対処した方は、ウィジェットの中でscriptタグをかいてください。
PHPで作る方は、wordpressのテーマを編集し、ＴＯＰページのテンプレートやsidebarのテンプレートにそのコードをいれちゃいましょう。
もちろん、pluginにするという手もありますよ！
おしまいおしまい
このような話、Webで沢山出回ってますよね。
コードも多数、見つけることができました。
今回は、構造をメインにお話してみましたがいかがでしたでしょうか？
皆様、色々な情報を集めて、活動頑張ってください♪
ご意見ありましたらコメントからどうぞ♪
でわでわ☆
