TOP> 過去ログ
2014年12月31日
このエントリーをはてなブックマークに追加

スポンサーリンク

2014 年末のご挨拶


ブログ名にブログとあるのに、ほぼ年末年始しか出現しない「日記」カテゴリです。
皆さん、年越しそばを食べながら紅白を見てますか
神田沙也加の「アナと雪の女王」みて思ったのは、当り前ですがさすが聖子に声がそっくりです。
紅白デビューの娘の姿をみて初オオトリの聖子の目にキラリ涙が感動的でしたね。
紅白デビューの頃が脳裏に浮かんだのでしょうか
長渕剛 「明日へ続く道」では曲もさることながら破れたジャンバーがナイスでした。
中森明菜 ROJO −Tierra−
「音楽制作を優先させて頂いたので今日はこんな形ですが、ニューヨークから歌わせていただきます。」
ということでした。金八のあと、一世風靡した後にマッチとの件などあり、ずっと気になってましたが元気そうでよかったです。
でも紅白で新曲ってピンときません。「飾りじゃないのよ涙は アッハー」を聞きたかったかな。
と、紅組かなりのエネルギー注入したけど、
嵐、EXILE、三代目J Soul Brothers、SMAP、TOKIOが強すぎでしょ

2014年の御礼


Ultimateのインストールをブログに記録しておこうとブログを始めて
2年と2ヶ月になりますが、ブログ読者様のお陰をもちまして
Seesaaブログ IT/インタネット部門  51,809ブログ中
平均50位前後をキープさせて頂いております。
とりとめもない記事ばかりで恐縮ですが、ブログテーマに恥じぬよう
ブログ読者様のお役に立てるよう
2015年も引き続き執筆したいと思っておりますので、コメントなどご指摘をドシドシお願いします。
どうぞよろしくお願いします。 m<(_ _)>m

2015年抱負


ブログパーツかなり使わせていただき便利でした。
ブログパーツの開発などもやっていきたいなぁと思っています。
さて、2015年目玉ですがWindows XPの最盛期である2005年11月にWindows20周年記念パッケージが販売されましたが、2015年11月あたりにおそらく発売されると狙っているWindows30周年記念パッケージです。
速報していきます。
あとは、気になるWindows 10CPの検証と発信です。
よろしくお願いいたします。

2015 on Twitter


恒例の2015年 on Twitter画像ですが、干支は羊になります。
昨年はかっこいい馬でしたが、「かっこいい羊」っていうのが想像できなかったので
かわいい羊にしました。
いつものように油性絵画風に改変しちゃいます。
オリジナル画像は改変OKのフリー画像から探します。
今回はこちらの画像を対象にしました。
http://free-images.gatag.net/tag/sheeps
クリエイティブ・コモンズ・ライセンスは、記号でライセンスの使用方法が分かるので
オススメです。

オリジナル画像
l201107290600.jpg

油性絵画風改変後
マックん改変2_l201107290600.png

2015 on Twitter

2015_on_twitter .png


来年のアケオメ リツイート数凄すぎ、思わず笑ってしまうツイート特集2015年1月1日0:00〜開始します。
Twitter社さん鯖落ちしないようにおねがいしますね。(笑)

スポンサーリンク


スポンサーリンク

広告表示LOLIPOP
人気ブログランキング

SNS Bookmarkサービス
Clip to Evernote
posted by マックん at 2014年12月31日22:41 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2014年12月29日
このエントリーをはてなブックマークに追加

スポンサーリンク

【Facebook / Twitter(ツイッター)】OGPイメージを変更してみた


さてと、今日もブログのアクセスを確認するかとアクセスログを確認すると。。
何これ・・・。
いつもとまったく違っていて、
「Twitter(ツイッター)公式アプリに関する不具合?と思ったら #iPhone #Android #アプリ」
にアクセスが超絶集中しているではないですか

人気ページがはるか後方に沈んでます。こんな感じ
facebook_twitter_developers1.png

そういう時のためにマックんのブログでは「Google 今日の急上昇ワード日本」がすぐ確認できるようになってます。
確認すると、事態が飲み込めてきました。
「ツイッター」「Twitter」のGoogle検索自体が急上昇しています。

facebook_twitter_developers12.png
で、「Androidアプリの公式Twitterでログインができない不具合」が発生し、どうなってるんだ!!とググられていたということが理解できました。

Androidアプリの公式Twitterでログインが確かにできません。
そんな検証をしていると、天の声が聞こえました。
「せっかく大量アクセスしていただいているのに、OGPイメージがデフォルトのままじゃないか ごらぁ」
そうです。このページは、画像がないページでOGPイメージはデフォルトのままのため緊張感に欠ける状態だったんです。
緊急だしもっと緊張感を出そうということで急遽、OGPイメージを変更することにしました。

Facebook/Twitter(ツイッター)のOGPイメージを変更する


OGPイメージはFacebookとTwitter(ツイッター)のdevelopersツールを使用します。
facebook_twitter_developers1.png
Facebookでシェアしたときの状態はというと、下記のような感じでした。

facebook_twitter_developers3.png

Twitterの緊急状態に全く反応していない、このサイト管理者大丈夫か?と思われそうです。
Twitter検証の合間の時間を活用し、
まず、FacebookのOGPイメージを変更します。

FacebookのOGPイメージを変更する


Twitter公式アプリをさわっていると、「Twitterの技術的な問題が発生しています」の画像がスナップショットできたのでこれを使用することにします。
サイズは大きいほどいいのですが、無料ブログはディスク容量が生命線ということもあり、なるべく節約しつつOGPイメージを変更できるサイズにしたいので下記の263×130pxにしました。注意点として縦横どちらか200px以上ないとFacebookのdevelopersツールで無視されます。
また、246×470pxよりも小さい場合はこのブログのように画像が縮小されて左側に配置されます。
画像が左側配置でいいなら最初から小さいサイズにしておくべきです。

twitter_error1.png
facebook_twitter_developers10ー.png

FacebookのdevelopersツールのDebuggerのリンクです。

https://developers.facebook.com/tools/debug

このDebuggerに下記のURLを設定してデバッグします。
「Twitter(ツイッター)公式アプリに関する不具合?と思ったら #iPhone #Android #アプリ」

右側の「Fetch new scrape information」を押すとデバッグが始まります。
当然ながら現在の状態はOGPはデフォルトのままということを確認します。

facebook_twitter_developers4.png

「Twitter(ツイッター)公式アプリに関する不具合?と思ったら #iPhone #Android #アプリ」のページに緊急追記をおこないます。その時に、「Twitterの技術的な問題が発生しています」の画像を追記と一緒に投稿します。

facebook_twitter_developers14.png


Seesaaブログの設定>外部連携は下記のようになってます。

facebook_twitter_developers11.png

記事内に投稿した画像があればそれを使用する。
となっているので追記した箇所に画像を投稿すればog:imageが切り替わるはずです。

画像投稿後に再度developersツールのDebugger右側の「Fetch new scrape information」を押すと下記のように変わります。

facebook_twitter_developers5.png

og:imageが変更されました。成功です。
まだ、一番下段のSHAREしたときの画像は変更されてません。

ここでdevelopersツールの真価が発揮されます。
このツールが世にでる前は、古いFacebook画像のキャッシュがどうやっても消えずに画像が切り替わらなかったのです。
ということで、次にdevelopersツールのDebugger左側の「Show existing scrape information」をクリックします。

facebook_twitter_developers6.png

SHAREしたときの画像イメージもデバッグで変更されました。成功です。
これで、FacebookのSHAREボタンでOGP画像が変更されるはずです。

念のため、FacebookのSHAREボタンを実際に押すと下記のように変更されたことが確認できました。

facebook_twitter_developers27.png

少し画像が切れてしまいましたが、時間の余裕があるときに直せばよいでしょう。

次はTwitterにOGPイメージを登録します。

TwitterのOGPイメージを登録する


Twitterでは、もともと何もしてなかったのでOGPイメージが登録されていません。
og:imageがブログで設定されていることはFacebookで分かっているのでCard validatorというTwitterのdevelopersツールでog:imageをデバッグして登録します。
URLは下記になります。

https://cards-dev.twitter.com/validator

「Twitter(ツイッター)公式アプリに関する不具合?と思ったら #iPhone #Android #アプリ」
のURLを含んだツイートをした後に、Card URLに
「Twitter(ツイッター)公式アプリに関する不具合?と思ったら #iPhone #Android #アプリ」
のURLを設定してプレビューするだけです。

facebook_twitter_developers8.png

はい、成功しました。簡単です。

Twitterのタイムラインでは「概要を表示」のボタンしか表示されていないので、概要の存在が分かりにくいですが、「概要を表示」を押すとURLの要約とog:imageが表示されます。
また、ハッシュタグを押した場合も概要が表示される場合があります。

facebook_twitter_developers13.png


ハッシュタグもしくは「概要を表示」を押すと下記のようなイメージで表示されます。

facebook_twitter_developers29.png

これは、画像がきれておらず大成功です。
ということで、FacebookとTwitterの両方できれいに表示できるように事前に画像のサイズとコンテンツの位置などを補正する必要があります。
この画像の微調整が一番の手間といえるでしょう。

このサイト管理者大丈夫か?と思われないように今回はOGPイメージを急遽変更してみました。 スポンサーリンク


スポンサーリンク

広告表示LOLIPOP
人気ブログランキング

SNS Bookmarkサービス
Clip to Evernote
posted by マックん at 2014年12月29日19:22 | Comment(0) | TrackBack(0) | Twitter(ツイッター) | このブログの読者になる | 更新情報をチェックする
ブログパーツ