1. Top
  2. » ネット関係

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

3月のブログアクセス数変遷

ピクチャ 8

だから何だというわけでも無いが、メインの方のブログアクセス数は震災前に近い状態まで復帰。
継続的に募金・節電しつつ、日常を取り戻しましょう。

TumblrをカスタマイズしてFacebookのいいね!(Like)を設置

毎日飽きもせずに似たような事ばかり。今日はブログ的に使っているTumblrにFacebookのLikeを設置したメモ。
参考はこのあたり。誰も見ていないページなのでただの自己満足。

■<head></head>内にOGPを記載
以下の内容を記載。前も書いたがPermalinkPage以外には記載不要。

{block:PermalinkPage}
<meta property="og:title" content="{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}" />
<meta property="og:type" content="article" />
<meta property="og:description" content="{MetaDescription}" />
<meta property="og:url" content="{Permalink}" />
<meta property="og:image" content="{block:Posts}{block:Photoset}{PortraitURL-128}{/block:Photoset}{block:Photo}{PhotoURL-100}{/block:Photo}{/block:Posts}" />
<meta property="og:site_name" content="{Title}" />
{/block:PermalinkPage}

Post内容がPhotoの場合はimageをPhotoの内容にする。他は(自分の場合は)Photosetくらいしか使わないが、Photosetの場合はどうも画像が取れないようなのでプロフィールの画像とした。これなんとかならないんだろうかと思うが、前述のtumblrの変数一覧ページを見る限り、どうも無理っぽい気がする。

■{block:Photo}{/block:Photo}や{block:Photoset}{/block:Photoset}内に以下を記載
<iframe src="http://www.facebook.com/plugins/like.php?href={Permalink}&layout=button_count" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:20px"></iframe>
もう1つ外側の{block:Posts}{/block:Posts}に記載する方法もあるが、Notes表示の際に表示されないっぽかったので、内側にそれぞれ記載。

ちなみに{Permalink}ではなく{URLEncodedPermalink}を使用すると、Likeする事は出来るのだがFacebook上のニュースフィードには反映されない=機能しない…ような気がした。

mixiのイイネ!ボタンを設置

ブログとソーシャル周りの整備ついでに、mixiのイイネ!ボタンを設置した。mixiチェックと迷ったが、操作のカジュアルさと人数カウントが出来るという点を考慮し、イイネ!を選択。ちなみにmixiにそんなに場所を割きたくないので両方設置という選択肢は無い。

以下、雑な手順。

■mixiのアカウントは削除してしまっていたので再登録
登録時に携帯認証必須でちょっとイラッとする。最近のメイン端末がb-mobile+Android+gmailの為ちょっと苦労した。結局は休眠状態に近いウィルコム回線を引っ張り出してきてなんとか登録。パケット代が…

mixi Developer Centerに登録
ここでも再度の携帯認証が必須で更にイラッとする。パケット代…。デベロッパー登録時に住所・氏名・電話番号の入力を求められた事にもイライラ。

■Developer Centerのmixi Pluginから新規サービス追加
サービス追加し、タグを取得

■FC2ブログのテンプレートにタグを埋め込み

■感想
まずmixiイイネ!のサイズが大き過ぎてイラッとする。縦幅も横幅も場所を取り過ぎ。設置する種類が1種類しかないようで、ちゃんと設置するにはそれなりのスペースをmixiイイネ!用に割く必要がある。が、mixiにそこまで場所を使いたくなかったのでイイネ!数のみが表示される領域のみを割り当てる。
で… イイネ!数は、どうも「マイミクの内、イイネ!している人数」のみが分かる模様… ログアウトするとイイネ!が無し扱いになる。マイミク以外の人がイイネ!している数は分からないっぽい。

アイコンサイズといい、人数のカウント方法といい、Facebookの後発なんだからせめてFacebookと同等レベルをスタートラインにして欲しいものだ。

あれ、設定間違ってただけかも

ブログのアクセスカウンタ撤去&テンプレート入れ替え&カスタマイズ

メインの方のブログ( http://currychef.blog54.fc2.com/ )を含め、前から気に入らなかったブログテンプレートを入れ替え&カスタマイズ。出来るだけシンプルで頭が良さそうな構成を心掛ける。

まずは、最近不安定すぎて腹立たしかったFC2のカウンターを撤去。ページの他の部分は表示されているのにカウンター画像がネックとなり表示が完了しない…というバカバカしい状態があまりに頻発していたので思いきってバッサリと。そもそもGoogleのアクセス解析を入れているのでカウンターを可視化する必要は特になかったのだが、なんとなく惰性で設置していた。カウンターがあると記載内容に説得力が増すという動機も少なからずあったが、時代も踏まえるともう要らないだろう。

で、カウンターを撤去し、テンプレートをシンプルなものに入れ替え、テンプレートからあまり必要としないリンク(タグ、カテゴリ、ジャンル)を削除。極力、余計な情報は目に触れないようにする。横幅も今までは固定だったが、この高解像度時代に横幅固定(ウィンドウを広げても余白だけが広がっていく)というのもアレなので横幅を可変に。

少し迷ったが、個別ページのタイトルタグは、今までは「ブログ名 記事名」だったところを、「記事名 - ブログ名」に変えた。タイトルタグを変更するとgoogleに嫌われ易い(検索順位を落とされ易い)という話が気にはなったが、今まではタイトルの先頭にブログ名を入れていた関係でgoogle検索結果画面での表示がイマイチだったので、思いきって変更。これが吉と出るか凶と出るか…と言ってもアクセスカウンターを撤去したのでもうどうでも良いと言えばどうでも良い。

で、
ピクチャ 1
ずっと設定していなかったfaviconを設定。

次に、
ピクチャ 2
ブログに関連したリンク(RSS、Facebookページ、Twitter、はてな、おまけでArchive)はページ上部に集めた(スペースが余っていた為)。

個別記事に対しては、
ピクチャ 6
ヘッダ部分の空きスペースに、はてなブックマークボタン&ブックマーク数、Tweetボタン&Tweet数、いいね!(Like)ボタンを設置。他のブログを見るとその他のブックマークサービス(googleブックマーク、yahooブックマーク、delicious、Livedoorクリップ、etc)へのリンクを設置している事も多いが、少なくとも自分のブログに関してはこれらサービスからは殆どブックマークされてないようなので、メジャーな「はてな・Twitter・Facebook」に限定。反応数も数字で見る事が出来るしね。

後は、個別画面の(DISQUSの)コメント欄の下の方に、
ピクチャ 4
Facebook(個別ページ)のLike用ウィジェットを表示。ここには、自分のfriendがLikeしている場合に限りLikeしているfriendのアイコンが表示される。ページの上の方や途中に設置してあるブログもあるが、このウィジェットは何気に縦幅が長いため、個別画面の最下部にのみ表示とし、一覧表示中には表示しない事にした。

あと、Facebookページ用のウィジェットというかbadgeを、公式の中で派手目のヤツに変更し、目立たせるようにした。
ピクチャ 5
これ設定次第ではLikeしている人の顔アイコンを表示する事も出来るが、人の顔写真を勝手に晒すのはしのびない為、顔アイコン無しの状態に設定。ところでFacebookページの新バージョン(3/11に一斉に切り替わるもの)はLikeしている人の顔写真が出ないようになったけど、このウィジェットはどうするんだろうね。Facebookのポリシーからすると、friendでもない人の顔写真を勝手に表示していた今までの方が違和感があるんだけど。

FC2ブログのコメント欄をDISQUSに変更(2)

DISQUSの設定方法メモ。

DISQUSにアカウントを作成して、

ピクチャ 4
サイトを追加して、

ピクチャ 5
LanguageはJapanese、Like(いいね!)はFacebookの機能を使うのでDisable、Reactionsは拾いたいのでTwitterにチェック(どの程度ちゃんと動くのかは不明)、Login buttonはFacebookとTwitterを表示(この設定はボタンを表示するかどうかのみで、他のサービスでもログインは可能)

ピクチャ 12
ここから詳細設定。まずは一番上のGeneralで、

ピクチャ 6
コメントする際にログインを必須とする為、「Registered only」を選択。一番左を選択するとログインしなくてもコメント可能(多分)。

ピクチャ 7
ModerationのPre-ModerationはNo(承認なしでコメント可能)。Yesにすると承認するまで反映されない。

ピクチャ 8
AppearanceのDefault SortをNewest firstに。このへんは好みで。

ピクチャ 10
で、一番右側のInstallから、

ピクチャ 11
Universal Codeを選択し、JavaScriptを取得。



<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'example'; // required: replace example with your forum shortname

// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <pan class="logo-disqus">Disqus</span></a>


FC2ブログのテンプレートにコピペして、上記のexampleは最初に設定したSite Shortnameに変更する(必須)。
テンプレートの差し込み先は、<!--permanent_area-->と<!--/permanent_area-->の間(の一番後ろの方)。

複数サイトに設置する場合はその下の行に以下のような形でサイトを分類するキーワードを設定するが、値はUnicodeをエスケープして指定する必要がある(FC2ブログの文字コードがEUCの為)。

var disqus_title = "\u690d\u7269";

最初からUnicode(UTF-8)のブログサービスであればおそらく値の直接指定で問題ない筈。ShiftJISのブログサービスであれば半角英数字は直接指定しても問題なし?FC2ブログの場合はEUCなので半角英数字だろうが全角文字だろうがUnicodeをエスケープして指定必要。コメント設置先のサイトが1つの場合はどうなんだろう。ただ同一ユーザーの他サイトも含めたコメントの追跡を考えると指定した方が良いような気がする。
全角文字のUnicodeエスケープの変換であればこのあたりが便利。

あと、こちらのサイトによると以前は文字コードの違いでかなり苦労したようだが、今はそんな事もなく、あまり何も気にせずに設置しても大丈夫。


あとは、InstallのUniversal Codeから、今度はComment countのJavaScriptを取得し、</body>の直前に組み込む。するとアンカーのリンク先がhttp://xxx#disqus_threadとなっている箇所について、xxxのコメント数をJavaScriptで書き換えてくれるようになるので、コメントへのリンクを
<a href="<%topentry_link>#disqus_thread">コメント</a>
みたいな感じでtopentry内に書いておく。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。