Facebookへのブログ更新通知を手動&サムネイル付きで行うためのブックマークレットを導入

先日、当ブログ用のFacebookページを作成した事、Like Boxを設置した手順を書きました。

ただ、設置したからと言って何もしないままだとブログの更新通知はFacebookページに届きません。

「RSS Graffiti」というサービスを利用した自動連携という方法もあったのですが、自分のコメントを添えて一緒に投稿したかったので、ブックマークレットを使用したコメント付き手動投稿をすることにしました。

FC2ブログだと、そのブックマークレットを利用するにも一手間かかって、結構ややこしかったので、自分が行った手順を紹介しておきます。

スポンサーリンク

ブックマークレットを利用したコメント付き手動投稿

まず初めに、今回紹介する手順を行う事で、どのようにFacebookページにコメント付き手動投稿が出来るかを示しておきます。

facebook
▲ブログ更新通知したいページを開いている状態で、「Facebookでシェア」というブックマークレットを選択すると、

facebook
▲別ウィンドウで上記のような画面となるので、「タイムラインでシェア」を選択し、「管理しているページでシェア」を選択します。

facebook
▲そして、任意のコメントを記入して、右下の「リンクをシェア」を選択します。これで投稿完了です。

facebook
▲ブログのFacebookページを確認してみると、左側のように投稿できています。

Facebookへのブログ更新通知を手動&サムネイル付きで投稿するためのブックマークレット導入手順

それではいよいよ、Facebookへのブログ更新通知を手動&サムネイル付きで投稿するためのブックマークレット導入手順を紹介していきます。

まずはこちらのページへいきます→https://www.facebook.com/share_options.php

サムネイル付きfacebook用ブックマークレット
▲図の「Share on Facebook」をブックマークバーまでドラッグ&ドロップします。

サムネイル付きfacebook用ブックマークレット
▲こんな感じでブックマークレットをブックマークバーにドラッグできました。

ただし、このままだとFC2ブログの場合は通常はうまく作動しないと思います。

うまく作動するようにするため、自分が行った対処法を以下に記しておきます。

ページのOGPをブログのテンプレート(html)に記す

OGP。なんだそれ?といった感じです。OGPとはOpen Graph Protocolの略です。Facebookでシェアされる時に、必要な情報のようです。これを設定してみます。

参考にしたのは以下の記事です。

これらの情報を元に、2つ修正してみました。

①htmlタグとheadタグの間に、以下のテンプレートを追記しました。

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

②headタグから/headタグの間に、以下のテンプレートを記しました。

<meta property="og:site_name" content="<%blog_name>" /><meta property="og:image" content="https://hibikanblog.net/wp-content/uploads/img/skitched-20140113-212942.jpg" /><!--index_area--><meta property="og:title" content="<%blog_name>" /><meta property="og:type" content="article" /><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-->" />

ただし、og:imageの部分は、アップロードした自分のブログ用サムネイルのURLを記しました。各自用意してください。

これで、ブックマークレットを利用してブログ更新通知が出来るようになりました。

ブログ運営
スポンサーリンク
日々の観察ブログ

コメント