ラベル ブログ の投稿を表示しています。 すべての投稿を表示
ラベル ブログ の投稿を表示しています。 すべての投稿を表示
2015年10月1日木曜日

Twitterボタンがテキストになってしまって焦った!(解決済み)


猫と一緒にガジェットライフ♪ムチャです。

このところあまりブログを更新できていなかったので気にしていなかったのですが、いつぞやからか画像のようにツイートボタンとフォローボタンがテキストになってしまってました(;´Д`)

結局原因はわかって解決したのですが、まあ小ネタとして書いておきます。



謎のエラーがclassにセットされていた

本来であればボタンの画像が表示されるところがテキスト表示となっていますが、実際はリンク(aタグ)になっています。

Chromeであれば、右クリックして「要素を検証」を選択すると、その要素に設定されているスタイル(CSS)を見る事ができます。

見てみると、問題のaタグのclass属性に「twitter-share-button-error」という文字列が設定されていました。

どうも動的に画像に置き換える処理の中でエラーが発生しているようでした。

ボタンのスクリプトは以下の公式サイトから持ってきた物です。
貼り付けているものと見比べても、特に変更されたところはありませんでした。

widgets.jsというのを読み込んでいるので中身を見てみると、「-error」という文字列を属性に追加する処理を見つけることができたのですが、難読化されているので全くわかりません(;´∀`)


とりあえず広告を外して動作を見てみた

わずらわしいことは承知の上ですが、このブログにも広告をいろいろ貼らせてもらってます。
ここ数日の間で新しく貼った物はないので関係は無さそうと思ったのですが、他にできることもないので広告を1つ1つ外しては動作を見て、というのを繰り返してみました。

すると、ある広告を外したときだけきちんとボタンが表示されました。

それは「もしもアフィリエイト」の「楽天モーションウィジェット」でした。


問い合わせたら即時対応!

とりあえず広告を外してボタンが表示されたのでよしとして、一応問い合わせ窓口から状況を説明して改善要望を出しました。


もしもの問い合わせ窓口は、ログイン後の画面の下の方にあります。

すると、翌日に「【もしもアフィリエイト】サポートデスク担当」からメールが届き、
システムの修正が完了いたしました。」との内容が。

早速楽天モーションウィジェットを貼ってみると、Twitterボタンも問題無く表示されました!即時対応すばらしい!



ブログをいじるときは記録とバックアップを

何か新しいブログパーツを貼り付けたりテンプレートを修正する場合は、必ず変更内容を記録することと、テンプレートをバックアップすべきだと思いました。
広告を外したりするには、どの部分をいじればいいのか、コメントをわかりやすく書いておくのも大事だと思いました。

まあ今回は変更が原因では無かったですけどね。

自分の中では今回の件でもしもアフィリエイトの株が上がりました。
商品リンクを簡単に作れる「カエレバ」でも利用できるので、合わせて使うのがオススメです。


それではみなさまよきガジェットライフを(´∀`)ノ



2014年10月3日金曜日

新しいアイコンと名刺で心機一転を図る

photo by pakutaso.com

猫と一緒にガジェットライフ♪ムチャ(@mutoj_rdm821)です。

昨年10月に仕事復帰してからは、仕事で精一杯でセミナー等に行く暇も気力も無く、名刺を渡す機会がない=人脈が増えないという負のスパイラルだったので、久しぶりにセミナーに行ってみようと考えました。

それなら名刺も作り直さないと!と言うわけで、以前と同じく「前川企画印刷」さんで新しい名刺を作っていただきました。



その前にアイコンの話を



少し前にアイコンを変更しました。描いてもらったのはニコニコ生放送でけっこう人気のあるゲーム配信者の「サトウキビさん(@310kib)」です。絵がとてもうまいのですが、これまでイラストの請け負いをしていませんでした。

それが試しに1回やってみようという感じで募集をしていたので、即申し込んで描いてもらったのがこのアイコンです。(現在は請け負いは休止中)
すずがとてもかわいく描けていてお気に入りです。

そんなサトウキビさんのニコニコミュニティはこちら↓


現在はDS版ドラクエ4、マリオカート8をプレイされています。

また募集を再開するかもしれないので、Twitterやコミュニティをチェックしてみてください。でもあまり過去のことは詮索しないであげてください(謎)。


新しい名刺


前川企画印刷さんのサイトからの申込後、メールで以下の内容を伝えました。
  • 以前のイメージ(茶トラの模様)をベースに
  • すずの写真(お気に入りのひっくり返ったやつ)を入れて
  • キャッチフレーズを目立たせて
  • キーワードは以前はただ文章で横並びにしてただけだったので、ちりばめる感じで
  • アイコンは新しい物を
  • SNS等のアカウントは新しい物に
  • 裏面はブログトップ画像のまま、QRコードを追加
こんな漠然としたイメージでお願いしました(;´∀`)
ただ印刷するだけではなくて、イメージを伝えてデザインまでしてくれます。

そしてできたのがこちら。


すばらしすぎます!なんかあまりに無理難題を押しつけてしまって申し訳ない感じ(;´∀`)


裏面にはしっかりとQRコードを入れてもらいました。


こんなコメントまでいただきました。無理を言った上に急がせてしまったのに・・・。

これで両面カラー100枚が1800円(税抜き、送料込み)です。安すぎませんかね?大丈夫なんでしょうか・・・。(一応ブログやSNSで紹介するのが条件に入っています)

今後お会いする方にはどんどん渡していこうと思います。


まずは2014年10月4日(明日)のセミナーで


ブロガーで会社まで作ってしまった立花岳志さんのセミナーに参加してきます。
まだうつ病は治っておらず、創造的な活動ができる体ではないのですが、何かしらのきっかけを見つけに行ってきます。


それではみなさまよきガジェットライフを(´∀`)ノ
2014年5月21日水曜日

超絶今さらですがプロブロガー本2にすずが載っていて驚いた件

r-2014-05-21 21.47.53

猫と一緒にガジェットライフ♪ムチャ(@mutoj_rdm821
)です。

ブログを書いている人なら一度は耳にしたことがあるのではないでしょうか。通称「プロブロガー本」は以下の2冊が出ています。

自分も両方所持しています。ですが後者については購入はしたものの、うつ病を抱えながらの仕事でせいいっぱいで、途中で止まったままでした。

しかし、まだ読んでいないページに驚きの事実が!



すずが書籍デビューしていた!

r-2014-05-21 21.48.43

本をお持ちの方はテクニック65をご覧下さい。自分も設置しているブログパーツの「Zenback」が紹介されています。

r-2014-05-21 21.48.57

そして右のページをご覧下さい。なにやら見覚えのある写真が・・・

r-2014-05-21 21.49.14

なんとこのブログのすずのページの紹介が!!!!

Zenbackでは、常に同じ情報を表示させておくことができる「お知らせ欄」という機能があります。このブログではすずの紹介を載せているのですが、基本的に自分のブログにしか表示されません。(ZenbackBIZという有料サービスでは、広告を表示することができます。)

確か、以前無料でお知らせの内容を他のブログに載せることができるお試し期間がありました(2013年6月くらい)。たぶんその時にたまたま本を書いていたコグレマサトさんのブログにうちのページが表示されたんだと思います。何という偶然!

ちなみにこんな内容を表示しています。まあ下にスクロールしていくと分かるのですが。

2014-05-21_22h02_36

そのすずの紹介ページはこちらです。

本に載ったからといってPVが増えたかと言えばそんなこともなく、アナリティクスを見ると、真っ平らでした(;´∀`)

まあでもいいんです。すずのことをたくさんの人に知ってもらえたら。



そうでなくてもプロブロガー本はオススメです

実際にプロブロガーとして活躍されているコグレマサトさん、するぷさんが書かれているこの2冊の本は、ブログを描いている人にはオススメです。自分も1の方は全部読んで、載っているテクニックは活用しています。

Kindleだとセット版もあります。

すずの紹介ページをまだご覧になっていない方はぜひご覧下さい。よろしければブログ自体の紹介ページもどうぞ。

それではみなさま良きガジェットライフを(´∀`)ノ

2013年9月10日火曜日

BloggerでRSSの配信が止まってしまった場合の解決法

feedburner-logo


猫と一緒にガジェットライフ♪ムチャ(@mutoj_rdm821)です。

ブログのRSS配信に利用していた「FeedBurner」が、2013年9月1日の記事を最後に配信されなくなってしまいました(;´Д`)

ウチのブログでは「PINGOO!」というサービスを使って、RSSからping送信を行い、「にほんブログ村」や「ブログランキング」への登録を行っています。(Bloggerはping送信に対応していないので・・・)

これらが更新されなくなって気づきました。

慌てていろいろ調べて、結局FeedBurnerのせいじゃないことがわかりました。顛末をまとめておきます。



そもそもFeedBurnerとは

RSSの配信をFeedBurnerに任せることにより、アクセス解析等いろいろな機能を提供してくれるサービスです。

Googleが開発元を買収し、運営を続けています。

最近では時々購読者数が0になったり等不具合が報告されていたり、APIの提供終了やフィード用AdSenseの終了、またGoogleReaderの終了に伴って、FeedBurnerも突然終わるんじゃ無いかという噂が飛び交っています。

ブロガーはGoogleの『FeedBurner』の利用をやめた方がいい

 

 

FeedBurnerのエラー情報を見るところ

2013-09-10_11h36_01(クリックで拡大)

管理画面の最初のページにある、「フィード伝言板を購読すると~」の下にるURLをクリックすると、障害情報が見られます。

2013-09-10_11h39_17(クリックで拡大)

フィードのサイズが大きすぎる・・・?どっかで聞いたことあるような気がします。

ここでもうちょっと調べてみればよかったのですが、FeedBurner自体の先行き不透明感から、利用を止めようと決断しました。

 

 

Bloggerでのフィードリダイレクトの設定

2013-09-10_11h48_12(クリックで拡大)

管理画面の「設定」→「その他」→「フィードリダイレクトURLの登録」から行います。

FeedBurner利用時はここにFeedBurnerが提供するURLを指定していましたが、これを削除しました。

 

 

復活・・・に見えたが

この状態で、にほんブログ村やブログランキングには更新が届いたので、とりあえずこれで安心・・・

・・・と思ったのですが、試しにFeedlyに登録している自分のブログの更新状況を見るとやっぱり2013年9月1日の記事で止まってるΣ( ̄□ ̄;)

FeedBurnerのせいじゃなかったようです。ごめんよ・・・でも君との将来は不安だよ。

 

 

最終的な解決

そこで最初のエラー内容です。同じように、FeedBurnerの配信が止まった人の情報を探ってみると、Bloggerのカスタマイズ記事を多数書かれているすなふさんのブログ記事が見つかりました。

[Blogger]ブログのRSS配信が出来なくなってた!FeedBurnerでは、配信記事数に注意が必要かも! - Sunabox

解決法は、フィードの配信数を制限すること。具体的には、URLのパラメータとして「max-results=nn (数字)」を付けます。

ウチのブログのRSSは「https://www.jmuto.info/feeds/posts/default?alt=rss」なので、これを「https://www.jmuto.info/feeds/posts/default?alt=rss&max-results=20」にしてやります。

試しにFeedBurnerへ登録して、Ping送信ページから「FeedBurnerの提供するURL」を指定して強制的に更新をかけると、エラーが無くなりました!

2013-09-10_11h58_58

ALL CLEAR!グレイト!

(ちなみにBloggerのフィードURLについてはこちらのヘルプに書いてあります)

 

しかしFeedBurnerに関しては(ry

でもまたフィードの変更をお願いするのも悪いので、Bloggerの方でリダイレクトしてしまうことにしました。

 

先ほどの設定画面で「フィードリダイレクトURLの登録」欄に「~&max-results=20」を付けたURLを登録します。(既にパラメータが付いているので&で結合しています。パラメータが他に無ければ「~?max-results=20」になります。)

2013-09-10_12h01_30

これでFeedlyの方を更新してみると、きちんと最新の記事が読み込まれましたつД`)・゚・。・゚゚・*:.。..。.:*・゚

 

 

まとめ

FeedBurnerに対する先入観のせいで、解決までに時間がかかってしまいました。

おそらく現在は最新記事まで配信されているはずです。もしおかしかったらご指摘いただけると助かります。

FeedBurnerからの配信はしばらく残しておきますが、サービスの継続に関しては不安があるので、まだ変更していない方は、以下のURLへ変更をお願いしますm(__)m

https://www.jmuto.info/feeds/posts/default

「?alt=rss」はヘルプによればRSS2.0で配信する場合の指定で、付けなければAtom1.0ということなので、この際だからパラメータも取ります。二転三転してすみません(変更しなくても読めますが・・・)。ページ上のRSS案内画像やFeedly登録ボタンのリンクは修正済みです。

 

それではみなさまよきガジェットライフを(´∀`)ノ

2013年8月25日日曜日

何かを成す原動力は、何気ない最初の一歩と歩き続けること #ブロガーサミット

r-DSC00765


猫と一緒にガジェットライフ♪ムチャ(@mutoj_rdm821)です。

2013年8月24日、ブログ界のスゴい人達25人と、1000人以上の参加者が一堂に会する「ブロガーサミット2013」に参加してきました。

これまで参加してきたセミナー等のイベントでは多くても100人超、それでも懇親会での立ち回りはいっぱいっぱいだったので、その10倍の人数が集まるなんて想像も付きませんでしたが、とにかくその熱気とパワーはすごかったです。

パネルディスカッションが6部で6時間というボリュームのため、全てを書き出すと大変な涼になってしまうので、印象に残ったフレーズと自分の考えたことをまとめたいと思います。最後には、参加者の感想をまとめて下さっている方がいらっしゃいますので、そのリンクも貼っておきます。



イベント公式サイトのURLに2013とか入っていないのでいずれ消えてしまうかもしれないので、ディスカッションのタイトルとパネリストは載せておきます。

パネルディスカッション1 「ブログ~この10年~」

パネリスト:

  • 清田 いちる氏  小鳥ピヨピヨ ギズモード・ジャパン初代編集長(現長老)
  • 岡田 有花氏  フリーライター/IT戦士
  • Otsune氏  Otsune ネットウォッチャー
  • 佐々木 大輔氏  アルカンタラの熱い夏 LINE株式会社、執行役員

最初のセッションでは、この10年でブログがどう変わっていったか、ブログが社会に与えたインパクトなどについて語られました。

パーマリンクが一般的に

かつてホームページというものは「トップページへのリンク」をお願いするほど、「入口から入る」のが当たり前でした。しかし、現在のブログは個々の記事が重要で、それぞれのパーマリンクが価値を持つようになってきました。

昔はWEBで情報を探すときは、企業などの知ってるところから入ってたように思います。今は検索が入口で、たどり着くのは普通の人のブログ記事だったりします。普通の人でも、内容がよければたくさんの人に見てもらえるようになったのは、大きく変わったことだと思います。

ステマ

一時期芸能人のブログによるステマ(ステルスマーケティング)が話題になりました。

一般の人にとっては、お金をもらって記事を書くというのはそこそこ有名にならないと機会すらないとは思いますが、重要なのは、お金をもらうにしろもらわないにしろ、ウソを書かないということだと思います。もしお金をもらって記事を書く依頼が来たとしても、ウソを書いて読者を騙すようなことはしない、でなければ依頼を断るくらいの気持ちは持ち合わせていたいものです。

 

 

パネルディスカッション2 「個人ブログからブログメディアへ」

パネリスト:

  • 新野 淳一氏 Publickey ITジャーナリスト/Publickeyブロガー
  • 村井 智建氏&宮下 泰明氏 AppBank APPBANK株式会社
  • 伊藤 春香氏  「はあちゅう主義。」 美容クーポンサイト「キレナビ」編集長
  • 堀 正岳氏  Lifehacking.jp ブロガー・研究者

このセッションで登壇されたのは、ブログを本業としている方もしくはブログによって個人をブランディングして本業に活かしている方です。

リアルな繋がりから信頼関係を作る

appbankのお二人は、ブログを本業とすべく記事を洗練させて読者を増やし、きちんと実績を作った上で営業をかけるというように、戦略をきちんと立てて経営を進められているとのこと。対象がapple/iPhoneということで対象とする読者は一般のユーザーです。しかし、新野さんはIT系の専門性の高いブログのため、非常に狭い領域です。

そのため、直接営業をかけるというよりは、勉強会などに参加して繋がりを作り、信頼関係を作っていたとのことです。

一般のブロガーとしては営業とか無縁の話かもしれませんが、直接会って信頼関係を築いていくというのは、ブログを続けていく上での大きな助けになると実感しています。

真摯にものを伝えて行くことが大事

「個人ブロガーにとっては、真摯さは営業と同じくらいの武器になる」堀さんのお言葉です。

真摯って何でしょうということで辞書を引くと「まじめで熱心なこと」とあります。ブログが本業かどうかにかかわらず、真摯さを貫いて周りの信頼を獲得していくのが重要です。わざと炎上させるようなことを書いたり、ウソで塗り固めた記事を書いたりすると、一時的には有名になるかもしれませんが、真摯さを欠いた報いは自分に返ってくると思います

ステマの話に通じるところもあると思いますが、真摯であればそもそも気にすることでは無いはず。

 

 

パネルディスカッション3 「ブログサービスの近未来」

パネリスト:

  • 貝塚 健氏 ヤフー株式会社 企画本部 サービスマネージャー
  • 寺崎 宏氏 NTTレゾナント株式会社 メディア事業部 ソーシャルサービス部門 主査
  • 関 信浩氏 シックス・アパート株式会社 代表取締役CEO
  • 吉田 健吾氏 株式会社paperboy&co. 常務取締役/ 株式会社ブクログ 代表取締役社長

このセッションでは、ブログのプラットフォームを提供されている方々が登壇されました。

運営には積極的に意見を

セッションの内容は運営側のお話だったので、ブロガーとしてピンとくる物はそれほど無かったのですが、継続できずに止めてしまう人が多いというお話がありました。

運営側として、開設するためのハードルは下がってきましたが、継続するための仕組みがまだ確立できていないようです。

プラットフォームのユーザーとしては、積極的に意見を出して運営側に取り込んでもらうのが、お互い幸せになるのではないかなと思います。(自分はzenbackにはチョコチョコ意見を言っています。Twitterのアカウントもあるので。)

 

 

パネルディスカッション4 「ビデオブロガーの今」

パネリスト:

  • ジェット☆ダイスケ氏 ガジェット☆ダイスケドットコム ビデオブロガー
  • アリケイタ氏 ビロガー アリのチャンネル ビデオブロガー
  • 佐々木あさひ氏  YouTube sasakiasahi メイクアップパフォーマー
  • タムカイ氏 ブログ「タムカイズム」企画運営 / 「ブロネク!」広報担当(自称)

このセッションでは、youtubeを使って動画による情報発信をされている方、Google+ハングアウトを使ってブロガー同士を繋ぐ試みをされている方が登壇されました。

舞台は揃った!始めるなら今!

ジェット☆ダイスケ氏以外は映像については素人で、普通にiPhoneだったりwebカメラだったりを使って始めたとのこと。

自分もyoutubeに動画をアップしていますが、デジカメで撮った動画をそのままアップロードしただけです。昔は容量や回線速度の問題で難しかった動画は、現在では始めるためのハードルはものすごく下がっています

編集を凝ろうとすると一気に難しくなるのですが、もし興味があればとりあえずスマートフォンで撮った動画をアップしてみてはどうでしょうか。

批判コメントは末端まで届いたと考える

特にyoutubeは酷い内容の批判コメントが付いているのを見かけることがあります。しかしそれは、「知り合いやファン以外の末端まで動画を見てもらえた証拠」と捉えるという考え方です。至言だと思いました。批判にネガティブになるのではなく、積極的に捉えて継続することが大切ですね。

 

 

パネルディスカッション5 「ブログライフバランス」

パネリスト:

  • メレ山メレ子氏  メレンゲが腐るほど恋したい ブロガー/「メレンゲが腐るほど恋したい」運営
  • 岡田 康宏氏  サポティスタ サポティスタ主宰
  • 野間 恒毅氏 ワンダードライビング 「ワンダードライビング」主宰/ワンダーツー(株)代表取締役
  • 津田 大介氏  津田大介公式サイト ジャーナリスト/メディア・アクティビスト

ここでは、ブログによって人生が大きく変わった方々が登壇されました(津田さんは違う所で知った方が多いと思いますが)。

不評でも止めないで続ける

「今の状況に至る最大のターニングポイントは?」という質問に対して、「最初は不評だったがそれでも粘り強く継続していったら、あるとき人気が出た」という話が出ました。

ブログに限らず、新しい事を始めたばかりの時はなかなか結果が出ず、周囲から不評を買うことがあると思います(特に身内が「そんなのやめときなよ」というのが多い気が・・・)。

そういうとき、周りを気にせず粘り強く継続することが、ターニングポイントへ至る道なのだと思います。

継続するためのコツ

ブログを蓄積していくと意外な人に読んでもらえる事がある、という意見が出ました。自分もこのブログを1年半以上続けてきて、イベントなどで初めて合う方(こちらは一方的に知っている)から「見てます」と言われることがありました。これほど嬉しい事はありません。

自分のブログは1日の500PVとかそこらですが、面白いことに書かない日もアクセス数が大して変わらなかったりします。検索技術の発達により、こんな辺境の地へも訪れる人がいるんです。面白いことに、書かなかった日もアクセス数はほとんど変わらなかったりします。

他にも、「無理をしない。」「気分が乗らないときは書かない。」「いろいろなことに手を出してみる。そうして離れたところから見つめることで良さが分かって(ブログに)戻ってくることもある。」などがありました。その通りだと思います。

 

 

パネルディスカッション6 「ブログを書くということ」

パネリスト:

  • コグレ マサト氏  [N]ネタフル ブロガー/浦和レッズサポーター。
  • いしたにまさき氏 [mi]みたいもん! ブロガー/ライター/アドバイザー/内閣IT広報アドバイザー
  • 松村 太郎氏  tarosite.net ジャーナリスト/キャスタリア株式会社 取締役
  • 粟飯原 理咲氏 アイランド株式会社 代表取締役社長

最後はまさにブロガーのコグレマサトさんといしたにまさきさん、ブログを中心として活動されている松村さん、そして普通の主婦が200万部のベストセラーを生み出したレシピブログなどを運営されている粟飯原さんという、錚々たるメンバーによるセッションでした。

蓄積した記事数、費やした時間は裏切らない

「それは成功したから言えるんでしょ?」と思われるかもしれません。なので成功していない自分からw。

開設して1年半超、記事数683。月のPVは2万行きません。それでも上で書いたように、知って下さる方がいらっしゃいます。自分を見てくれている人が増えるのはとても嬉しい事です。

ブログに書けるからということで、新しい事を始めたり、これまで気にかけていなかったイベントに参加したり、場所に訪れたりするようになりました。昔の自分には考えられません。

うつ病・睡眠時無呼吸症候群により仕事を止めてから、結局今でもちゃんと復帰できていません。なのでとても偉そうなことは言えませんが、ブログを書いててたくさんのメリットを得たのは間違いではありません。

「だからブログ書けよ」とは言いません。別にブログじゃ無くてもいいと思います。どんなことでも、始めてみて蓄積した事、費やした時間は裏切らないと思います

 

 

まとめ

セッション6時間+懇親会2時間で8時間という長丁場、1000人という規模、ある意味むちゃくちゃです。Twitterでもいろいろな意見が出ていました。賛同、批判、様々でしたが、これだけブログについての議論が盛り上がったのであれば大成功だったのでは無いかと思います。

Twitterの発言を有志の方がまとめて下さっています。→【議事録】高齢化が進む #ブロガーサミット に行ったら楽しかった - NAVER まとめ

 

一番印象深かった言葉があります。いしたにまさきさんが最後に語ったことです。

デジカメのことをよく記事にしているので、「子供が生まれたのでオススメのデジカメを教えてください」とよく聞かれるが、その時はいつも「子供が生まれる前に買おうよ」と返している。

必要になってからでは遅い。普段から素振りをしているから、イチローは4000本達成した。

思いついたらやろう!人気ブログを作ろう!ではなくて、普段から書いていたらそれが人気記事になったりする。

グサッときました。なんかネガティブなことを考えずにとにかく始めて続けてみるというのは、すごく大事なことだと思います。何気ない最初の一歩と歩き続けること、これが何かを成す原動力なのだと思います。

うまくまとまったでしょうか(;´∀`)

他にもたくさんの方がブロガーサミットの感想を書かれています。こちらもまとめがありますので、興味がありましたら覗いてみてください→ブロガーサミット2013感想のまとめ! #ブロガーサミット - NAVER まとめ

 

 

おまけ

r-DSC00799

懇親会も大盛況でした。参加費はなんと無料!スポンサー様によるお酒や食べ物の提供で食べ放題飲み放題でした。

まだ記事を書いてませんが、無駄にenchantMOONを持ち歩いてました。本当は、

r-DSC00801

こんなのを表示して首から下げてようかと思っていたんですが、目立ちすぎるのと、画面オフの時間を設定できないので止めました・・・(ていうか普通に画像開くのも大変だった)

でもネタフルのコグレマサトさんにサインを書いていただきました(∩´∀`)∩

r-DSC00800

いつかはコグレさんのように・・・なれたらいいなぁ(遠い目)

そのコグレさん(とするぷさん)が書いているブロガーのバイブル、通称プロ・ブロガー本は2冊出ています。kindleならセット板もあります。

通常の本はこちら。本の中にも案内がありますが、本の購入者はインプレスのサイトからPDF板をダウンロードできます。

2013年5月30日木曜日

BloggerでTwitter Cardsに対応させる

2013-05-30_16h40_59


猫と一緒にガジェットライフ♪ムチャ(@mutoj_rdm821)です。

Twitterのサービスで「Twitter Cards」というのがあります。上の画像のように、ブログのURLを投稿すると、追加の情報としてブログタイトルや概要、サムネイル(上の画像では出ていませんが)を出す事ができます。

Googleのブログサービス「Blogger」でこれを行うには、テンプレートの編集でHTMLを直接書かないといけません。今回は自分の行った方法をご紹介します。



metaタグの追加

まず管理画面から「テンプレート」を選択します。さらに「HTMLの編集」ボタンを押します。

2013-05-30_17h19_13

すると以下のようにHTMLの編集画面になります。最初の方にheadタグがあると思いますが、このすぐ後にmetaタグを追加していきます。

2013-05-30_17h19_47

必要な内容は以下の通りです。


namecontent
twitter:cardsummary(固定)
twitter:url記事のURL(Bloggerの式で自動挿入)
twitter:domainブログのドメイン(http://www.example.com等)
twitter:creatorTwitterのID(@~)
twitter:title記事のタイトル(Bloggerの式で自動挿入)
twitter:description投稿画面の「検索向け説明」に書いた内容(Bloggerの式で自動挿入)
twitter:imageサムネイル画像(Bloggerの式で自動挿入)

ほとんどはBloggerのテンプレートで使える式で自動的に挿入できます。ブログのドメインとTwitterのID、トップページ用のサムネイルURLだけ置き換えてください。

自分の追加した内容は以下の通りです。if文で、個別の記事用とトップページ用に記載内容を変えています。具体的にはタイトルとサムネイル画像の指定が違います。

<!-- 記事 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
</b:if>
<!-- ホーム -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta content='トップページ用の画像URL' name='twitter:image'/>
</b:if>
<!-- 全てに適用 -->
<meta content='summary' name='twitter:card'/>
<meta content='@自分のTwitterID' name='twitter:creator'/>
<meta content='自分のドメイン' name='twitter:domain'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>

 

表示テストを行う

Twitter Cards Validatorへ行きます。Twitterにログインしていない場合は以下ののログイン画面が出ると思うので、ログインします。

2013-05-30_17h43_36

 

最初の画面ではSummaryを選びます。

2013-05-30_16h43_12

Validate & Applyタブを選択し、ブログの適当な記事のURLを貼り付けてGo!ボタンを押します。

2013-05-30_17h42_02

各メタタグの要素と、表示イメージが表示されます。指定がおかしい場合は赤いマークが付くので分かります。

2013-05-30_17h45_04

 

申請する

うまく設定ができたら、申請を行います。これをしないと実際の表示が行われません。

申請方法は以下のはてなブログの記事の「付記2. はてなブログで独自ドメインをTwitter Cardsへ対応させる」の内容の通りに行えば大丈夫だと思います。

はてなブログがTwitter Cardsに対応しました。ツイートで記事の概要が表示されます[追記あり][再追記あり] - はてなブログ開発ブログ

ちょっと分かりづらいのは、「Example Summary Card URL」のところに指定するURLですが、ブログの適当な記事のURLを指定しておけば大丈夫です。

申請が通ると「Twitter Cards - Your submission has been approved!
」というタイトルのメールが来ると思います。これで完了です。

 

まとめ

これで問題無く表示されると思うのですが、一番最初の画像のように、今現在自分のサイトはサムネイル画像が表示されていません。当初は出ていましたし、Validatorでは表示されるので、よくわかりません。

現在Twitterのフォーラムに質問を投げています。返ってきたら追記しようと思います。

Bloggerでブログを書いている方、ぜひお試し下さい。

▼こちらの記事もどうぞ

▼ブログを気に入っていただけたらRSS登録をお願いします!
▼ブログランキング参加中!応援よろしくお願いします。

スポンサーリンク