猫とMacの日々

 
--
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 
03
 
文末にそのコードを記載しましたが、今しばらく私みーけのお話にお付き合いください(^^ゞ

なぜかFC2ブログからシェアされた記事の画像が意味不明の画像になるんですよ~!
それを調べ始めたらこれがこれが奥が深いんです。

Facebook-OGP-FC2BLOG3.png

〜ってダンボさんのバナーなんですけどね。記事とは無関係なわけなんですよ。

いろいろ調べてまず知ったことは、FC2ブログの記事が「いいね」されたり、シェアされたりしても、FacebookのOpen Graph protocol(OGP)にFC2ブログ自体が対応していないので、記事画像の特定もできていないということでした。

FC2ブログOGPに対応させるぞ!

下記ブログなどを拝見するとFC2ブログのテンプレートを改造しなければなりませんでした。

FC2ブログをFacebookのOpen Graph protocol(OGP)に対応させる : web memo.Ver.2FC2ブログをFacebookのOpen Graph protocol(OGP)に対応させる : web memo.Ver.2

web memo.Ver.2さんの仕様ではどんな記事でもプロフィール画像固定になります。

FC2ブログをfacebook OGP対応にする - crimsonj.netFC2ブログをfacebook OGP対応にする - crimsonj.net

記事画像になるとあるんですがcrimsonj.netさんの仕様で変更したら私の環境では意味不明画像4枚の固定になってしまいました。うわ~ん!

FC2ヘルプ | FC2ブログ | テンプレート用 変数一覧FC2ヘルプ | FC2ブログ | テンプレート用 変数一覧

こんなにあるFC2ブログの環境変数

そして、いろいろさらに調べたら、FC2ブログではトップの記事画像を指定する暗号である環境変数というものが設定されてないのでした。
それがないのでOGPを設定しても適当な画像がFacebookに張り付くみたいです。

私はプログラムなんてベーシックのGOTO文くらいしか知りませんので、crimsonj.netさんが変更した環境変数に近そうなものを「えいや~!」と片っ端から貼り付けてその効果を調べてみました。(^^ゞ
結果が良ければコードの是非なんて猫には関係ないも~ん。

1日中あ~でもないこ~でもないととっかえひっかえしていましたら!なんとうまくいく環境変数に当たりました!わ~い!

さて、ここから、そのコードのご紹介です!

テンプレートのHTMLの、<HTML>から<HEAD>の間に挿入します。

<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">



こちらはテンプレートのHTMLの、<HEAD>から</HEAD>の間に挿入します。

<meta property="og:site_name" content="<%blog_name>" />
<meta property="fb:admins" content="あなたのユーザーNo" />
<!--myimage--><meta property="og:image" content="<%topentry_link>" /><!--/myimage-->
<!--index_area-->
<meta property="og:title" content="<%blog_name>" />
<meta property="og:type" content="blog" />
<meta property="og:description" content="<%introduction>" />
<!--/index_area-->
<!--permanent_area-->
<meta property="og:title" content="<%sub_title>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<%url>blog-entry-<%pno>.html" />
<meta property="og:description" content="<!--topentry--><%topentry_discription><!--/topentry-->" />
<!--/permanent_area-->



crimsonj.netさんの<%image_url>を<%topentry_link>に変えただけです。見つけるのは大変でしたが…。

これをそのまま貼ってはいけません。まだひと仕事残っています。
「あなたのユーザーNo」を下記リンクで取得して書き換えてください。
「あなたのユーザーNo」ってなんじゃらほい?FC2のIDかと思ったら全く違って
Facebook開発者のページにて発行してもらわなければならないんですよ。

Like Button - Facebook開発者Like Button - Facebook開発者


取得の詳細は下のページから。

Facebookインサイト設定の落とし穴、app_id, page_id, admins の違いとは - Six Apart ブログFacebookインサイト設定の落とし穴、app_id, page_id, admins の違いとは - Six Apart ブログ

ソーシャルメディア課長のヒカル女史が気品高く教えてくださいますわよ。(^^ゞ

Facebook-OGP-FC2BLOG2.png



これでなんとかFacebookに無関係画像が表示されることは滅多になくなりました。

Facebook-OGP-FC2BLOG1.png


以上、「力技にてFacebookの「シェア」でFC2ブログの記事画像を選んで投稿できるようにしてみました」でした。
ただし、私の環境だけでうまくいくのかもしれません。あなたの環境でうまくいかなくてもお教え出来るだけの知識はございませんので重々お許しくださいm(_ _)m
FC2ブログさ〜ん! 早くデフォルトでOGPに対応してくださいね。

あっそういえば、この駄ブログ、「猫とMacの日々」のFacebookファンページを作ってみました。
まだな〜んにもありませんが、ちょこちょこ書込しております。宜しかったらいいねしてやってくださいませm(_ _)m

猫とMacの日々猫とMacの日々




宜しかったら下のバナーをクリックしてやってください。FC2ブログさんも喜んでくれるに違いありません。









スポンサーサイト
RSSリーダーで読んでね
 
06
 


FC2総合インフォメーション 【ブログ】アルバム機能を追加しました!



ブログ「Paroday」より
『アルバム機能実装、リンクを画像URLに変更する方法』

FC2ブログさん、大変お世話になっています。
最近まれに重かったりもするけれど私の中では許容範囲です。
しかし、ブログアルバム機能、これはちょっと疑問でした。

アップする画像、その全てをアルバムへ誘導するダミーURLに変更しちゃまずいです。
この駄ブログではLightboxというジャバスクリプトを用いてその場で画像を拡大エフェクトさせているんです。
その影響で何時まで経っても画像が拡大されずにぐるぐる回っている絵を見続けるハメになりました。

そもそもアルバム機能が現在のFC2ブログに必要でしょうか?
たかだか1枚容量500キロバイト制限の画像を使って個人単位でアルバムを作ったところで誰が見るんでしょうか?
今ではFlickrもあればPicasaもあるし国内ではフォト蔵だってあります。
Appleが行なっているiCloudのフォトストリームというサービスを使えば撮った瞬間にどこにいても閲覧できる時代なのです。
飛んで行ったアルバムがデザインやUIに優れているとお世辞にも言えるシロモノではなくましてや画像に無関係の広告がデカデカと張り付いている姿を直視した時には全身の力が抜けてしまいました。
FC2さんもこのご時世、無料のサービスを続けていくのが厳しいのは理解できます。
それでも安直に広告の入れ子としての新機能を増やしていくのであれば私のみならず多くのFC2ブログのファンが旅立っていくことでしょう。

アルバム事件が起きたとき、真っ先に対応してくださったのがParodayさんをはじめとするFC2ブログのボランティアの方々でした。
(この駄ブログもParodayさんお作りになったスタイルシートを利用しています)
私は過去に問題を放置し続け廃止になったブログを借りていたことがありますがその経験では運営側がおかしくなってくるとそんなボランティアの方々がすぅ~っと消えていきます。そして見事にいなくなります。
そうして有益な情報源が無くなれば私のようなCSSやHTMLに疎いものはさっぱり対処ができなくなって結局活動の場を新たに求めるしかなくなるのです。

嬉しいことにFC2さんは迅速に対処してくれました。
今回の事件は爆弾低気圧だったとして横に置き、これからもユーザーのためにみなさんとご一緒に頑張っていきましょう。よろしくお願いします。FC2さん(^^)
RSSリーダーで読んでね
 
07
 
数年前からでしょうか、サムネイルをクリックするとそのままのページで画像が浮いたように拡大するエフェクトをブログでよく見かけるようになりました。
それを行うエンジンを Lightbox系スクリプトといい下記リンクによると36種類上もあるんだそうです。
◯THE HAM MEDIA BLOGより「イメージのLightbox系スクリプトのまとめ

やっぱりApple系ブログのみなさんもしっかり使っておられます。
ダンボさんの「Macお宝鑑定団Blog(羅針盤)」では PrettyPhotoを、
wakabaさんの「わかばマークのMacの備忘録」では Lytebox を、
立花岳志さんの 「No Second Life」では Simple Lightboxを。

この私もヘタレながら FancyZoom というのを使っていたんですが Twitterなどを機能的にリンクしてくれる zenback 干渉しちゃうんですよ。
干渉の回避はできるそうですが何やら呪文のようなスクリプトを変更しなければなりません。そんなスキルが猫の頭の私にあるはずもなく FancyZoom を泣く泣く外すことになりました。 なんだかんだ言っても zenback は便利だもんね。

もちろん FancyZoomzenback を共存させて使っておられる Apple系ブログもあります。
くじゃくさんの「リンゴが好きでぃす♪」 や veadarさんの「Macの手書き説明書」、ジェットさんの「MacBookの小部屋」 などです。
ホントすごいなぁ~憧れます。爪の垢を送ってください!

それでも、FancyZoom を諦めても画像拡大エフェクトしたい思いはどんどん拡大し、「違うスクリプトならうまくいくかも?」と淡い期待をそれに賭けることにしました。

FC2ブログでどんな Lightbox系スクリプトが人気かなぁ~とぐぐってみたら、派生の Lightbox 2 をみなさん使われていることがわかりました。
◯oyoyo Memo Blog より「2011/3/18/ にリリースされた Lightbox 2.05 を試用してみる
◯京都THUG LIFEより「高瀬川+小雨=Lightbox 2.05 京都・木屋町通
調べると Lightbox 2 は最近2.05にバージョンアップしてIE9対応になったそうです。こりゃ好都合ですね。

Lightbox 2.05の導入方法は下記リンクを見てその通りやればばっちりでした。
◯覚書 - My Knowledge Base - FC2ブログ版より 「FC2ブログで「Lightbox 2」を導入する方法

導入方法をざっくり書くと以下の通りです。(詳細は上記リンクで見てね)

1)Lightbox v2.05.zipをダウンロードして解凍する。
2)解凍した中身から「lightbox.js」「lightbox.css」「image-1.jpg」「thumb-1.jpg」の4つ以外をFC2ブログにアップロードする。
3)アップロード後にアップロードされたURLを必ずメモする
4)「lightbox.js」をテキストエディタで開き「closelabel.gif」「loading.gif」のURLをメモしたのに変更し上書き保存する。
5)「lightbox.css」をテキストエディタで開き「nextlabel.gif」「prevlabel.gif」のURLをメモしたのに変更し上書き保存する。
6)上書き保存した「lightbox.js」と「lightbox.css」を他のファイルを同様にアップロードする。
7)アップロード後にアップロードされたURLを必ずメモする
これでアップロードは完了です。

次にお使いのFCブログのテンプレートの変更をします。
テンプレートの<head> ~ </head>の間に以下の行を追加してテンプレートを更新して保存する。
もちろん「アップロード先」とあるところは書き換えてくださいね。


そしていつものようにブログを書いて写真を貼ったら
拡大したい画像のリンクタグに「rel="lightbox"」を追加すると準備万端となります。

テストしてみましょう。
前回の記事で紹介しました愛猫メロンのいたずらを写した4コマ写真です。
猫軍団の hosomichiさんが MacBook Pro 17インチ買ってすぐお披露目に来てくださった時のことです。
メロンはマジックトラックパッドに大変興味を持ちまして…こっそり…


640-Melon1a.jpg

640-Melon2a.jpg

640-Melon3b.jpg

640-Melon4a.jpg


なんかうまくいきましたね? メロンはマジックトラックパッドをゲットする前に捕まりましたけど(笑)

現在私の環境では Lightbox v2.05は zenback干渉もなくうまく動いております。
めでたしめでたし。
RSSリーダーで読んでね
 
08
 
「ムームーツイッター」で猫でも超簡単にReTweetボタンが貼れちゃったお話です。

本家TwitterでもReTweet機能を昨年の11月頃から限定公開し、そのあたりからTwitterにも「RT」と接頭詞がつくつぶやきが目立ってきました。
毎日参考にさせていただいているあちらこちらのブログを見ると

retweet.png


こんなボタンがブログに貼ってあることが多くなりました。

私が幼い頃、近所の悪ガキが鉄人28号のワッペンを胸に貼っていたりすると親にねだって代わりにゲンコツもらったものですがそんな感じでこの駄ブログにも貼ってみたくなったんですよ。

あちこち検索して調べてみるとJAVAスクリプトをブログにあわせてカスタマイズしなければならなかったりさっぱりわからない英語のページにログインしなければ使えなかったりとかなり敷居が高いので諦めかけておりました。

ところがつい最近、今年の1月1日吉日に公開された「ムームーツイッター」がもうラクチンなんです!



たったこれだけの魔法の呪文をブログのHTMLに書き足せば全て終わりです。すぐReTweetできちゃいます。URLも自動で短くしてくれます。
1月2日には画像指定機能も追加され着実に進化しています。

製作者のしもぴーさんがサーバーの維持やドメインなど、自腹でされていますので、「こりゃ、猫の手でも応援しなくちゃ」と記事にした次第です。

「ReTweetボタンをご自分のブログに貼りたいなぁ。でも自信ないなぁ」と躊躇されている方はぜひ一度お試しください。

○関連リンク

ムームーツイッター


RSSリーダーで読んでね
 
03
 
私が最初に始めたブログサービスであったDoblogが衝撃の崩壊という事実に直面して、
「もしもの時に備え簡単にバックアップ出来るブログサービスが良いかもしれない」と考えましてぷららのBroachからここFC2ブログに急遽お引っ越ししてきたわけです。
FC2ブログはご存知のようにデータのバックアップが可能ですからね。

400Doblogdobu2.png


Doblogは幸か不幸か消失前にMovableType形式のデータでダウンロード出来まして、難なくFC2ブログにインポート出来たわけですが、如何せん、ぷららBroachに残してきたエントリーはエクスポート機能がブログ側に備わっていないのでなんともなりません。

ブログをエキスポートするフリーウエアもいろいろ試してみたもののプロバイダぷららのメンバーだけのサービスブログにはさっぱり対応してませんでした。

DoblogのMovableType形式データをテキストエディタで開いてしげしげ見つめると「ブログのソースからあれとこれを挿入すれば何とかなる」と分かったものの、ぷららBroachの300くらいあるエントリーデータをしこしこ手作業でこなすのも気の遠くなるような話です。
ましてプログラム組んで行うなんてファミコンベーシック止まりの私には無謀なことでした。

400Broachplala2.png

湘南画材研究所@MTの朝之丞さんにURL変更のご連絡をメールでお伝えした際に、たまたまそのことを愚痴っちゃったわけです。
意外なことに朝之丞さんから「ぷららのブログ、コンバート出来るかもしれませんよ」と嬉しいメールを戴いたんですよ!!
それから、天にも昇るような気持ちで今まで進捗状況をお教えいただきつつ、昨日コンバートが完了しましてFCブログにインポートするテストも無事終わったようです。

こちらがお世話になっていたBroachのブログ。
猫とMacの日々Broach

こちらは技術を駆使してBroachからコンバートしていただいたブログです。
猫とMacの日々 switching over to FC2



湘南画材研究所@MTの朝之丞さん、本当にありがとうございました。
Doblog、Broachと転々としてきた私の軌跡といえるものがここFC2にひとまとめにすることが出来ます。

実は湘南画材研究所@MTの朝之丞さんは何やら壮大な計画を構想中で、私のようにあちこちでブログを書いてきた人たちが飛び上がって喜ぶことが起きるかもしれませんよ!

○関連リンク
湘南画材研究所@MT

朝之丞のTry and Tested - CNET Japan

湘南画材研究所@GL - Try and Tested のまとめSiteです。

湘南画材研究所@JGM

猫とMacの日々 switching over to FC2 Ver 1 カットオーバー - 湘南画材研究所@MT

RSSリーダーで読んでね

カレンダー

プルダウン 降順 昇順 年別

08 | 2017年09月 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30


Apple Amazing LINKS

URLのABC順です

Apple Marvelous LINKS

URLのABC順です

以下ブログ休止中

Fantastic Cats LINKS

素材スペシャルリンク

とんとん工房の復活を願うひとりです。

猫屋敷連合(猫軍団)

AppleBlog百人百録2013

Apple系リンクブックです。 画像クリックでダウンロードページに飛びます。

私の渾身の作品をどうぞご覧ください。

ブロとも申請フォーム

リンク

メールフォーム

名前:
メール:
件名:
本文:

カテゴリー

FC2カウンター

feedburner

ブログ内検索

Ukphoto

伊勢志摩を本拠地に全国を奔走するドローンカメラマン中西学さんのページ。来る2月13日よりソニーストア名古屋にて写真展を開催します!

Jazz Vocalist 佳川夏己

3オクターブの音域を駆使し浸透性ある歌声で清楚も妖艶も演じこなすジャズボーカリストです。ジャズ好きなら彼女のステージを一度ご覧ください。1st CD 『PEONY』絶賛発売中。

iMug -伊勢志摩UserGroup-

ブログ「林囓mac」のMetalさん主催で開催される伊勢志摩地方のApple User Groupです。定例会を月一でされていますのでお近くならぜひご参加くださいね。

伊勢ゲストハウス風見荘

伊勢市駅から僅か徒歩2分。築80年の歴史ある旅館をボランティアで半年かけて大改造。全世界からお客様が泊まりに来るアットホームな伊勢のゲストハウスです。

おすすめのパソコン教室

アイテスプラスは名古屋市南区のパソコンスクールです。なんとスマホ、iPhone、iPadクラスもあるんです!優しい先生が手取り足取りお教えくださいますよ。

伊勢・河崎 モナリザ Cafe

モナリザは伊勢河崎に築150年の砂糖蔵を改装した喫茶店です。 伊勢路の新銘菓として名高い「サトナカクッキー」もおみやげにどうぞ。

おすすめのレストラン

伊勢志摩は鳥羽に花咲く桃源郷 イタリアンレストラン Cuccagna(クッカーニャ) あなたの素敵な時間のためにあるお店です

おすすめの博物館

Appleファンの琴線に響く博物館。その名も「Steve Jobs museum」 トブiPhoneのトブさんが全身全霊を傾けて建設中です!

twitter & tumblr

Follow Me


Like Box

つぶやき

BlogPeople





チーズスイートホーム

ランキング

にほんブログ村 PC家電ブログ Macへ にほんブログ村 猫ブログへ blogram投票ボタン

スポンサー

収益金は全て恵まれない猫のために使います。


みーけのおすすめ

プロフィール

みーけ

  • Author:みーけ
  • 無類の猫好きの私みーけがアップル系のお話を軸に自由に書き散らすブログです。
    貴重な情報は他で得て息抜きにお越しください。

    可愛い猫のトップ画像は「とんとん工房」のTOM様よりお借りしています。

    「猫とMacの日々」は2004年6月15日に開始しました。
    2005年11月30日までの記事はDoblogから移管しました。
    Broachで掲載した2005年12月1より2009年4月25日までの記事は湘南画材研究所の朝之丞さんのご好意により移管できました。
    ここに深く感謝いたします。

カンタン!ブログお引越しサービス

ブログのお引越しは『カンタン!ブログお引越しサービス』をおすすめします。

画像はPicasaにまとめてアップロードした後に画像リンク変更したMovable Type形式データを作成してくださいます。

最近の記事

最近のコメント

最近のトラックバック

RSSフィード

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