sosyaretto

FaceBookページで1つのアプリを使って複数のWebサービスを読み込むの巻

FaceBookページ(個人用のアカウントじゃなくhttp://www.facebook.com/pages/create.phpから作るほう)にブログのエントリーやTwitter、Flickerやはてブなどなど・・いろんなWebサービスを連携するとなるとその都度専用の連携アプリを仕込んでいかないとだめなんですがこれをまとめて設定できるのがLiveDoor謹製「ソーシャレット」(http://www.facebook.com/apps/application.php?id=182139565160419)です。

Livedoorのソーシャレット

まずは先だってLivedoor(http://www.livedoor.com/)のアカウントを取得しログインした状態に、その後個人用のFaceBookアカウントでこのアプリを入れていただいてただくと下記のような画面が出ます。(Livedoorのアカウントは下段のメニューでここでも取れる)

ソーシャレットアプリ画面

この画面の「アイテム編集画面へ」メニューを選択。
ここでいちばん初めにFaceBookのアカウントと連携するボタンが出てるのでもちろん連携し

ソーシャレット認証画面

「FaceBookページ管理」タブをクリックし任意のFaceBookページの欄で「ソーシャレットで管理する」ボタンを押下しますです。

ソーシャレットで管理する

次に同画面の最下段「アイテムの追加」ボタンを押下し、任意のWebサービスを選択(事前に登録されたものに限る)サービスごとにURLやIDなどを登録します。

それが終わったら各FaceBookページに追加した「アイテム(Webサービス)」を表示するかチェックを入れて選択します。

ソーシャレットで表示するメディアを選択

今まではRSSはこのアプリTwitterは公式アプリをなどなど複数のアプリを入れて管理していましたが、これなら一括して管理できるので便利!

feedurl

FeedWindのtitle部分のリンク先をRSS以外にする

RSSを表示するブログパーツにFeedWind(http://feed.mikle.com/)ってのがあるみたいですが、「ココログ」のRSSを引っ張ってきた場合タイトル部分のリンク先がATOMフィールドになったってたのでブログのURLに修正しました。

方法はまずHTMLページのブログパーツのソース部分
タイトルの表示非表示の部分をoffに設定

rssmikle_title="off";

んで、タイトル部分は

「自分で書く!」

こんな感じで

<div class="feed_title">
<a href="リンク先" target="_blank">タイトル文字</a>
</div> <!-- start feedwind code -->
<script type="text/javascript">
<!--
rssmikle_url="ブログのRSS";
rssmikle_frame_width="174";
rssmikle_frame_height="300";
rssmikle_target="_blank";
rssmikle_font_size="12"; ・・・以下省略

それだけです。
「だってタイトル部分のリンク先指定がないんだもの みつお」

jquery

jQuery Plugin 「Nivo Slider」 で画像にリンクを貼る

jQuery Plugin で間単にスライドショーを実装する「Nivo Slider」ってのを使ってみて、確かに実装が簡単で画像切り替えのエフェクトも良い感じだったのですが、各画像にAタグでリンクを設定してもリンクが効かなくて困りました。
しかしながらそんな事はなく、Aタグのクラス属性に「nivo-imageLink」を設定すれば良いのでした。

<div id=”slide_images”>
<div id=”slider” class=”nivoSlider”>
<a href=”sample1.html” class=”nivo-imageLink”><img src=”1.jpg” alt=”” border=”0″ /></a>
<a href=”sample2.html” class=”nivo-imageLink”><img src=”2.jpg” alt=”” border=”0″ /></a>
<a href=”sample3.html” class=”nivo-imageLink”><img src=”3.jpg” alt=”” border=”0″ /></a>
<a href=”sample4.html” class=”nivo-imageLink”><img src=”4.jpg” alt=”” border=”0″ /></a>
<a href=”sample5.html” class=”nivo-imageLink”><img src=”5.jpg” alt=”” border=”0″ /></a>
</div>
</div>

つまりは「リファレンスよく読めよ」と言う話でございました;;

modxロゴ

MODX Revolution のTinyMCEのリンク挿入でエラー

MODX Revolution のTinyMCEのリンク挿入機能でエラーが発生

そもそもMODX EvolutionのTinyMCEのリンク編集画面では
プルダウンメニューでちゃんとリソースの一覧が表示されていたのですが
Revolutionではそんなことができなかったので、リソース一覧からドラッグしたりしていたのですが
(これでもリッチエディタではくテキストで編集しているときはリソース番号を[[~5]]のような感じで挿入できるからすごい^^)
どうにもならなくて再度リンク編集画面を開いたらエラー
どうやら
「/インストールディレクトリ/config.core.php」
が見つからないらしい・・

でも本当は
「/インストールディレクトリ/manager/config.core.php」
にあったりするので該当するファイルの中身をうちの環境のパスで書き換えてみた
書き換えるのは

/インストールディレクトリ/assets/components/tinymce/jscripts/tiny_mce/plugins/modxlink/link.php
の5行目あたり

/インストールディレクトリ/assets/components/tinymce/jscripts/tiny_mce/plugins/modxlink/search.php
の7行目あたり

require_once dirname(dirname(dirname(dirname(dirname(dirname(dirname(dirname(__FILE__)))))))).'/config.core.php';

みたいな記述があるので

require_once dirname(dirname(dirname(dirname(dirname(dirname(dirname(dirname(__FILE__)))))))).'/manager/config.core.php';

みたいに「manager」ディレクトリの中を探してもらうように変更
でもこんなに「dirname」で括ってあるとわかりにくいなぁ;

でもこの二つの修正すると
いままでプルダウンでダーッとリソースの一覧が表示されていたものが
リソース名で検索してリンクを挿入できたりして結構便利なってましたね^^

modxロゴ

MODX Revolution Dittoのテンプレートタグの書き方で引っかかる

MODX Revolution だとプレイスフォルダが[+placeholder+] から [[+placeholder]] に代わってたり、リンクを[~5~]とかリソースidを使うときに[[~5]]に代わってたりします。

詳しくは新旧MODXタグの一覧を
http://rtfm.modx.com//display/revolution20/Tag+Syntax

でDittoでテンプレートをチャンクで作ってる時に

<li><a href="[+id+]">[+title+]</a></li>

みたいに書いてたのですが、リンクのほうがうまく動かなかったので

<li><a href="[[~[[+id]]]]">[[+title]]</a></li>

みたいに [[+id]] で一度リソースidを展開してそれをさらに[[~展開された番号]]でリンクとして適用してOKでした。