hexo
Facebook用イメージをImageMagickで作る方法
Facebookhexoimagemagick

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。ブログ用に画像を入れてりしてるんですが、サイズがまちまちだったりするので
ImageMagickを使って変換をしたいと思います。

Facebook用のイメージ

https://developers.facebook.com/docs/sharing/best-practices
に記されており、幅1200、高さ630が画像のサイズとして良いようです。

ImageMagickをインストール

[f_prg@blog] $ brew install imagemagick
==> Installing dependencies for imagemagick: libtool, libpng, freetype
==> Installing imagemagick dependency: libtool
==> Downloading https://homebrew.bintray.com/bottles/libtool-2.4.6.yosemite.bott
######################################################################## 100.0%
==> Pouring libtool-2.4.6.yosemite.bottle.tar.gz
==> Caveats
In order to prevent conflicts with Apple's own libtool we have prepended a "g"
so, you have instead: glibtool and glibtoolize.
==> Summary
🍺  /usr/local/Cellar/libtool/2.4.6: 69 files, 3.8M
==> Installing imagemagick dependency: libpng
==> Downloading https://homebrew.bintray.com/bottles/libpng-1.6.16.yosemite.bott
######################################################################## 100.0%
==> Pouring libpng-1.6.16.yosemite.bottle.tar.gz
🍺  /usr/local/Cellar/libpng/1.6.16: 17 files, 1.3M
==> Installing imagemagick dependency: freetype
==> Downloading https://homebrew.bintray.com/bottles/freetype-2.5.5.yosemite.bot
######################################################################## 100.0%
==> Pouring freetype-2.5.5.yosemite.bottle.tar.gz
🍺  /usr/local/Cellar/freetype/2.5.5: 60 files, 2.6M
==> Installing imagemagick
==> Downloading https://homebrew.bintray.com/bottles/imagemagick-6.9.0-9.yosemit
######################################################################## 100.0%
==> Pouring imagemagick-6.9.0-9.yosemite.bottle.tar.gz
🍺  /usr/local/Cellar/imagemagick/6.9.0-9: 1442 files, 22M
[f_prg@blog] $ which convert
/usr/local/bin/convert

Facebook用のイメージの画像生成コマンド

画像を作成する際のコマンドは、下記の2つになります。
サイズは幅1200px、高さ630pxですが
多くの画像でこのコマンドが有効か確認しておらず
オプションについては今後変更する可能性もあるので
今回は紹介を省略させていただきます。

convert Zendesk_logo_on_green_RGB.png -thumbnail 1200x630 -gravity Center -background white -extent 1200x630 thumb_Zendesk_logo_on_green_RGB.jpg
convert -resize 1200x630 -gravity Center -background white -extent 1200x630 Zendesk_logo_on_green_RGB.png thumb_Zendesk_logo_on_green_RGB.jpg

まとめ

これで、サイズの大きい画像とかを統一できそうです。
ツール使ってもよかったのですが、私はMac・Winで使うので
共有のアプリケーションを探すのもなんなので問題なさそうです。

Node.js
HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする
FacebookGoogle +Google AnalyticsHexoNode.jsTwitter

HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする

はじめに

こんにちは。インフラエンジニアレベル1のf_prgです。
Hexoはブログツールなのですが、デフォルトだとSEOやSocial Graphの設定がされてません。
Google Analytics, Google +, Facebook, Twitterの設定の方法をご紹介したいと思います。

HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする

テンプレートの_config.ymlを修正します

themes/landscape/_config.ymlファイルにありますパラメータを編集します。
themes/landscape/README.mdとhttp://hexo.io/docs/helpers.htmlを参考にしてください。

# Miscellaneous
google_analytics: UA-XXXXXXXXXXXXXXX
favicon:
twitter: f_prg
google_plus: f.prg.ex
fb_admins: YYYYYYYYYYYYYYY
fb_app_id: ZZZZZZZZZZZZZZZ

入力後に更新すれば、生成されるHTMLが下のようになります

<meta property="og:type" content="article">
<meta property="og:title" content="HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする">
<meta property="og:url" content="http://blog.star-flare.com/2014/08/31/hexo_site_options/">
<meta property="og:site_name" content="f_prgのブログです。">
<meta property="og:description" content="HexoでGoogle Analytics, Facebook, Twitterの設定をする
はじめに
こんにちは。インフラエンジニアレベル1のf_prgです。Hexoで、Google Analytics, Facebook, Twitterの設定ができるのでその方法をご紹介したいと思います。
HexoでGoogle Analyticsを使用する
テンプレートの_config.ymlを修正します">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HexoでGoogle Analytics, Google +, Facebook, Twitterの設定をする">
<meta name="twitter:description" content="HexoでGoogle Analytics, Facebook, Twitterの設定をする
はじめに
こんにちは。インフラエンジニアレベル1のf_prgです。Hexoで、Google Analytics, Facebook, Twitterの設定ができるのでその方法をご紹介したいと思います。
HexoでGoogle Analyticsを使用する
テンプレートの_config.ymlを修正します">
<meta name="twitter:creator" content="@f_prg">
<link rel="publisher" href="f.prg.ex">
<meta property="fb:admins" content="YYYYYYYYYYYYYYY">
<meta property="fb:app_id" content="ZZZZZZZZZZZZZZZ">

ちょっと下には、Google Analyticsの設定があります。

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXXXXXXXXX']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

まとめ

これでSEOやSocial Graphの効果が出そうですね。
Google Analyticsで効果測定ができそうです。

補足、おまけ

Twitter CardのValidationは
https://dev.twitter.com/docs/cards/validation/validator
で可能です。

参考資料・リンク

http://hexo.io/docs/helpers.html