facebookの埋め込み投稿、ソーシャルプラグイン設定してる人は1行でOK

公開日:2013年8月23日 

facebookの埋め込み投稿、ソーシャルプラグイン設定してる人は1行でOK

先日始まったばかりのfacebookの新機能、埋込み投稿。通常の方法で貼り付けるのも簡単ですが、それよりほんの少しだけ簡単に貼り付ける方法があります。AddQuicktagと組み合わせればイイ感じ


追記:2014.4.27
久しぶりにfacebook投稿機能を使おうとしたところ、デフォルトの仕様がかなりよくなっていました。ですので、投稿埋め込みするなら本記事の方法ではなくて、幅をある程度指定できる標準の方法が良さげです。

Facebook、ニュース情報源を目指し全体公開記事のウェブ埋め込みを可能に」や「【今日からやりましょ】Facebookページでファンを増やすためには人気ブログを書けに追い風機能」で知ったのですが、昨日から(?)facebookの投稿埋め込みが使えるようになりました。

実物はこのページの下の方に貼ってありますので、ご確認ください。

埋込み投稿の幅に合わせ当ブログもデザイン変更

埋め込み投稿はカスタマイズできないみたいですね。今までのfacebookプラグインは幅とか選べたりしたのですが、今回のは横幅552pxで固定らしいです。

本文幅からはみ出てる

当ブログは本文の横幅が500pxでした。なので、貼っつけると横がはみ出てしまったのです。

youtubeのiframeはCSSでサイズ変更できますが、これは勝手が違うのでできませんでした。(苦手な英語サイト含めて、世界中のサイトをググりましたが出てこず。何か方法あるのかな?)

ということで先月デザインを変更したばかりですが、本文幅を70pxほど広くしました。

「埋込み投稿」のコードを使わずに投稿を埋め込む

本記事タイトルで「OGP設定してる人」と書きましたが、正確にはSocial Pluginsを使ってるサイトです。

Social PluginsのページのEmbedded Postsでも「埋込み投稿」のコードを発行できるのですが、

fb-embed2

上の部分は他のソーシャルプラグインやOGP設定と共通です。
投稿を埋め込みたいところに下のコードを貼り付けるのですが、投稿のURL以外はいつも同じです。

つまり、

ここだけをWordpressプラグインのAddQuicktagや、お使いのOSの辞書などに登録しとけば、いつでも簡単につかえます。

投稿のURLの取得方法

URLを取得したい投稿の「日付」を右クリック

mac

Macの場合

fb-embed4

Windows XPの場合

Macでは「リンクアドレスのコピー」、winでは「ショートカットのコピー」でURLがクリップボードにコピーされます。
そして、先ほどの<div class=”fb-post” data-href=””></div>のdata-href=””にURLを貼り付けするだけ。
そうすれば、

このように投稿を貼り付けられます。
(上記の埋込み投稿のために一度この記事を公開して大急ぎで作業しました。)
ちなみに、個人の投稿も「公開」(地球マーク)なら貼り付けられます。
もう一つちなみに、本記事の方法と投稿の右上から発行するタグで生成されるソースは同じようです。なので読み込みが早くなるような効果は無いです。

fb-embed5

こちらの方法でも出てくるものは同じ

“上の部分は他のソーシャルプラグインやOGP設定と共通です。”と書きましたが、その辺の絡みがよくわかってません。
当ブログの場合、最初にOGP設定して、その後にサイドバー最下部にあるソーシャルプラグイン(Like Box)を入れました。その時にも「Include the JavaScript SDK on your page once, ideally right after the opening tag.」って言われた部分はどこにも貼らずに「プラグインを表示したい場所にプラグインのコードを配置します。」と言われたコードだけ貼ってOKでした。
もし、本記事の内容が特殊すぎるケースの場合、コメント等で教えてください。

追記:2013.8.26
facebookのOGPについて改めて調べた結果、タイトルがおかしいことに気づき、「OGP設定してる人」→「ソーシャルプラグイン設定してる人」と変更しました。
本記事は既に「Like box」などのソーシャルプラグインを設置してるサイトが対象です。

コメントを残す