HOME   »   ブログ運営  »  Facebookへのブログ更新通知を手動&サムネイル付きで行うためのブックマークレットを導入
RSSフィード
先日、当ブログ用のFacebookページを作成した事、Like Boxを設置した手順を書きました。ただ、設置したからと言って何もしないままだとブログの更新通知はFacebookページに届きません。

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

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

スポンサーリンク

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

まず初めに、今回紹介する手順を行う事で、どのように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="http://blog-imgs-46.fc2.com/n/a/s/nasimeya/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を記しました。各自用意してください。

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

関連記事

iPhoneからブログ更新通知をFacebookページへ投稿する方法(IFTTT、Postmania、MS2使用)

ブログのはてブ人気エントリーをサイドバーに設置する方法

ブログ用に、実名非表示のFacebookページを作成した

Facebookのソーシャルプラグイン(Like Box)をFC2ブログのサイドバーに設置する方法

FC2ブログのスマホ版テーマ「basic_black_st」でのブログタイトルを全て表示する方法

FC2ブログでコードを行番号つきで表示する方法

FC2ブログで最新記事にサムネイルを付けてサイドバーを見やすく!

FC2ブログで記事のタイトルにブログ名を含めない方法

FC2ブログでファビコンを設定する方法

FC2ブログ(有料版)でFTPの設定をする方法

「公式Twitterアプリでこの記事をつぶやく」ソーシャルボタンの作成&設置方法

スポンサーリンク

過去記事セレクション

当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました



▼このカテゴリの最新記事
Relate Entry
Entry TAG
Facebook   ブログ   ブックマークレット  
Comment
Trackback
Comment form
サイト内検索
全記事表示リンク

PAGE TOP