Hatena::ブログ(Diary)

SOHOスタイル

2013-10-03 ライブドアブログの「いいね!」が反映される方法

以前の記事で、「ライブドアブログにフェイスブックの「いいね!」ボタンをつける方法」を書いたのですが、これだけでは、せっかくフェイスブックで「いいね!」してもらえてもそれが反映されません!!!!

ということで、ライブドアブログの「いいね!」が反映される方法です。

これって、いつできたんでしょ?当時はなかったような…

手順はこうです。

f:id:sohostyle:20130524163908p:image

1)ブログ設定をクリックします。

f:id:sohostyle:20130524163909p:image

2)次は、「デザイン」のなかの「PC」をクリック。

f:id:sohostyle:20130524163910p:image

3)この画面が出てくるので、「カスタマイズ」を選びます。

緑の丸枠4箇所にタグを貼りつけます。各ページすべてにに2種類のタグを入れましょう。

●1つめのタグは<$OGP$>

<$OGP$>という独自タグを全てのデザインテンプレートの<head>から</head>の間に記述します。

例)
<head>
<$HeadSectionCommon$>
<title><$BlogTitle ESCAPE$> - livedoor Blog(ブログ)</title>
<$OGP$>
</head>

このように</title>と</head>の間に入れるのがよいのではないかと思います。

●2つめはxmlns:og="http://ogp.me/ns#"

これは、<html>タグ内に書きますが、<html xmlns=〜となっているかも知れません。

例)
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#">
<head>

グリーンの丸印をした4か所すべてにこのタグを入れてくださいね。

以上です。

そして、ブログを書いたら、サムネイルとディスクリプションを設定することができますね。ライブドアブログ、なんだかとっても親切になっています。

f:id:sohostyle:20131004000503j:image

この3つを確認してアップして、フェイスブックでシェアするとこのようになります。

f:id:sohostyle:20131003234832p:image

サムネイルとディスクリプションが反映されていますね。そして肝心のブログの方ですが…
f:id:sohostyle:20131003234833p:image

このように、着々と「いいね!」が反映されています。コメントがつくごとに「いいね!」が増えているので、これでOKですね。

この方法は、Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)という記事に同じことが書いてあります。

このブログでは、この記事をわかりやすく画像を加えて解説させていただきました。

2013-10-01 パワーポイントより簡単なPrezi

ローフードのパティシエ1級で、作品のプレゼンをしたのですが、今回はじめてPreziを使ってみました。

これは、O-med(オ・メド)というオリーブオイルのメーカーのプレゼンを見て知ったツールなのですが、カッコイイですね〜。

調べてみると、Preziどうやらパワーポイントより作るのが簡単そう♪ということで、こちらが、そのプレゼンです。

テーマは、「ワインに合うローナッツチーズのアンティパスト」。ローフードなので、乳製品は使わず、もちろん非加熱。とってもヘルシーで美味しいチーズです。


ところが…はてなダイアリーって、Preziの埋め込みができないんですね…Σ( ̄ロ ̄lll) ガビーン 

ということでコチラ>>をご覧ください。

本来だったら、

f:id:sohostyle:20131001232118p:image

「埋め込む」をクリックして、自動生成されるソースを貼るだけで、ブログなどにPreziを紹介することができます♪

ここではできないので、他のブログサービスで試すことにします…

2013-06-26

シーサーブログをフェイスブックでシェアするときに「サムネイル」を表示する方法

シーサーのブログサービスを利用しているのですが、ある日フェイスブックでブログをシェアしようと思ったら、サムネイルが表示されませんでした…。表示されても、私が出したいサムネイルではなく、適当な画像が選択されてしまう(-_-;ウーン

フェイスブックでシェアするときに、サムネイルは命です。

記事と関係ないサムネイル(たとえばブログのピクトやタイトル画像など)が出るとか、サムネイルが出ない、なんてことは許容できません ( ̄▽ ̄;)!!ガーン

シーサーブログをフェイスブックでシェアするときにサムネイルを表示させるためには


結論から言うと、シーサーブログの設定で、「OGPタグ追加」で「追加」を選択するだけでした。どんなにググってもこの解決法が出てこなかったので、このブログでご紹介します。

なんでグーグル検索で見つからなかったのでしょうか…みなさん、こんなことではつまずかないのでしょうか…

OGPタグの設定方法は、次のとおりです。


f:id:sohostyle:20130626174422j:image


1)管理画面左の「設定」をクリック

2)右下の「外部連携」をクリック

次の画面下にある


f:id:sohostyle:20130626174534j:image


3)「OGPタグ追加」の「追加」をマークする

4)保存する

これだけです(^▽^)/


これをすることによって<head></head>部分に自動的にOGPタグが追加されます

OGPタグとは?


このOGPとは、オープニングラフプロトコルというもので、タイトル、ディスクリプション、イメージ(サムネイル)、タイトル、などを指定するためのmetaタグです。


f:id:sohostyle:20130626185819j:image


この画像は、「スマートフォンサイト制作ブログ」さんからキャプチャでお借りしてきました。詳しくは、このサイトをご確認ください。


ただ、このOGPタグはヘッド部分に書き込まなければなりません

普通、ブログの各ページのヘッド部分なんていじれなじゃないですか…

試しに、普通に記事部分に貼ってみたのですが、もちろん結果はNG…

OGPタグに翻弄される…


シーサーに問題があるのか、フェイスブックがまた急に何か変えたのか…

でも、ほかのブロガーさんのシーサーブログは、問題なくフェイスブックにサムネイルが出ていました。

どんなにググっても、解答らしきものが見つかりません。アメブロについてはいくつか記事があったのですが、なぜかシーサーはない…ああでもない、こうでもないと試していて、やっとシーサーブログには、このOGPを自動生成させるサービスがあることに気づきました。

OGPタグを設定した後にはフェイスブックデバッカーページで確認を


このあとの大事な作業は、フェイスブックのデバッカーページでデバックすることです。

使い方はかんたん。ページのURLを入れて、デバックするだけ。

ここでOGPがキチンと入っているかを確認できます。

デバッガーについての記事を読むと、「この作業をするだけでサムネイルが表示されるようになる」という方が多数いらっしゃいました。

私は、この作業だけで解決しなかったので悪戦苦闘したわけです。

デバックしても反映されない!?


ところが、ここでもつまずきました…

ハッキリとは言えませんが、たぶん、キャッシュが残っていたんですね。


f:id:sohostyle:20130626193544j:image


ソースを確認すると、ヘッド部分に「おぉ〜!入ってる〜!!」

OGPのメタタグは自動生成されているのに、なぜサムネイルは出てこない???

FireFoxのキャッシュを消してみたり、リロードしてみたり、挙句の果にはいちどブログ記事を消して新しくコピペで記事を生成したり…などとやっているうちにやっとできました。


f:id:sohostyle:20130626192059j:image


告白しますと、私がゴニョゴニョと解決できないでいたところ、システムをしている主人が見かねてやってくれました…

2013-05-24

ライブドアブログにフェイスブックの「いいね!」ボタンをつける方法

そういえば、ライブドアブログにフェイスブックの「いいね!」ボタンがなかったなぁと思ってググってみると、親切な方がいらっしゃいます。

こちらの方が、タグを用意してくださっています。

さっそくそのまま貼りつけてみると、こんな感じの仕上がり。

f:id:sohostyle:20130524163905p:image

あれれ…『「いいね!」と言っている友達はまだいません』と言われてしまいます( ̄▽ ̄;)!!ガーン

だって、いまいいね!ボタンを貼りつけたばかりだし…と言い訳チックな気分に。

ということで、『「いいね!」と言っている友達はまだいません』を取る方法を調べました。

フェイスブックに「Like Button」というページがあって、ここで「いいね!ボタン」を生成できます。選択肢があるので、自分の好みのボタンを作ることができます。

が、なぜかうまくできません…(未熟)

ということで、タグをいじることにしました。

結論として、これをコピペすると、このような見た目になります↓↓

<iframe src="http://www.facebook.com/plugins/like.php?href=<$ArticlePermalink$>&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

f:id:sohostyle:20130524163907p:image

見慣れた、いつもの「いいね!ボタン」ですね。

ちなみに元のタグはこれ。

<iframe src="http://www.facebook.com/plugins/like.php?href=<$ArticlePermalink$>&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

layoutのところを「standard」から「button_count」に変更しました。

layout=standard&

layout=button_count


で、これをどこに貼りつけるか、です。ググってみると、なぜか私のライブドアブログのhtmlを書くところがみなさんとちがう…。

ということで、ご紹介します。

f:id:sohostyle:20130524163908p:image

ブログ設定をクリック。

f:id:sohostyle:20130524163909p:image

次は、「デザイン」のなかの「PC」をクリック。

f:id:sohostyle:20130524163910p:image

この画面が出てくるので、「カスタマイズ」を選びます。

緑の丸枠4箇所に上記タグを貼りつけます。貼る場所は、私は下にしました。管理者用の編集(エディット)ボタンがあるので、その下にしました。

ちょっと、ホッとしました。

2012-04-25

コクヨのシュレッダー「KPS-X80」を買いました

会社なんだから、シュレッダー必要でしょ…

クライアント関連のドキュメントは、今まで手でちぎっていました。この作業から解放されると思うとなんとも自由な気分♪

ということで、とうとう買いました。

コクヨのシュレッダーKPS-X80です。

f:id:sohostyle:20120424141033j:image

もっとスタイリッシュな北欧のシュレッダーを、とも思ってかなり調べたのですが、裁断パワーが弱いとか壊れやすいとか、やはりこういう機器は日本製かなと思ってコクヨにしました。


コクヨ デスクサイドシュレッダー<RELISH>KPS-X80W GBC パーソナルシュレッダー グレー&ブラック GCS02CX-GB
f:id:sohostyle:20120424141902j:image
5,870円 (税込) 送料込
・幅170×奥行き330×高さ306mm
・細断寸法/4×40mm
・最大細断枚数/A4コピー用紙(64g/m2)約5枚
・ゴミ箱容量/8リットル
5,372円(税込)通常配送無料
・幅210×奥行き355×高さ385mm
・細断方式/クロスカット(4×30mm)
・細断枚数/ A4コピー用紙5枚
・ゴミ箱容量/14リットル


どちらにしようか悩みましたが、コクヨにしました。

この2機種の大きなちがいは、ゴミ箱のサイズです。確かに8リットルってすぐにいっぱいになります。でもうちくらいの規模だったら、これくらいでいいかも。大きすぎず、小さすぎずちょうどよい気がします。ただ、8リットルより小さいと少々、忙しいかも知れません。

GBCもデザインよかったんですが、飽きたらどうしよう…。コクヨはスタイリッシュとは程遠いのですが、憎めないというか無難だと思いました。

手動のシュレッダーも考えましたが、力がいるとか、なんだか手でちぎったほうがよさそうなコメントも多く、せっかくなので電動にしました。

コクヨのシュレッダー「KPS-X80」は、このように細断します。

D