最近ブログ記事などで見かけるようになった、FacebookページやGoogle+の投稿の埋め込み。私もやってみましたがとても簡単にできます。今回は無駄なコードをのぞいた貼り付け方法を共有します。
ゆめぴょんです。こんちはっ(^^)/
Facebookページ、Google+の投稿を貼り付けてみましたが有効にはたらくかどうかは検証できていません。
既に多くのフォロワーやいいね！などを獲得してファンの多いブログ・サイトでは、「このブログすごいよ！」感をアピールできて、さらなる拡散を誘発できそうです。
ちなみにFacebookページ、Google+などへ投稿した時に表示されるタイトル、説明文、写真・画像などは、OGP設定をしていないと適切に表示されない場合があります。下の記事を参考にしてみてください。
Facebookページの投稿を埋め込む方法
埋め込みたい投稿の右上「▽」をクリック。「外部へ埋め込む」を選択すると「投稿を埋め込む」というウィンドウが表示されます。一番上のコードをコピーしてください。
あとはコピーした内容を貼り付けたい場所にペーストするだけです。とても簡単ですよね。
貼り付けるコードを短縮して表示を高速化
高速化というのは大げさかもしれませんが、コードを短くシンプルにできて、スクリプトの重複を解消することができます。
この方法が可能なのは、ブログ・サイトに「いいね！」「Facebookのシェア（送信）」ボタン、Facebookページの顔入りボックスなどを既に設置している場合のみです。ほとんどのブログが対象だと思います。
例えばコピーした内容が次のようだとします。わかりやすいように改行して空白行も入れています。この1〜2行目（<div id=”fb-root”>から</script>まで）は丸々カットできます。JavaScriptなのでカットすると表示速度も向上します。
[html]
<div id="fb-root"></div>
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));</script>
<div class="fb-post" data-href="https://www.facebook.com/wispyon/posts/663301523687785" data-width="550"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/wispyon/posts/663301523687785">投稿</a> by <a href="https://www.facebook.com/wispyon">ゆめぴょんの知恵</a>.</div></div>
[/html]
もしカットしたら投稿が表示されない場合は、すみやかに元のコード全部を貼り付けてください。
Facebookページの投稿を表示した例は、この記事の一番上の画像を見てみてください。
Googleページの投稿を埋め込む方法
埋め込みたい投稿の右上「▽」をクリック。「投稿を埋め込む」を選択するとウィンドウが表示されます。このコードをコピーしてください。
あとはFacebookページと同様で、コピーした内容を貼り付けたい場所にペーストするだけです。
貼り付けコードを短縮する方法
Facebookページと同様に、ブログ・サイトに「+1」ボタン、Google+バッジなどを既に設置している場合のみ、コードを短縮できます。
コピーした内容が次の場合、1〜2行目は不要です。コメントも不要なら5行目のみを、貼り付けたい場所にペーストするだけでOKです。
[html]
<!– Place this tag in your head or just before your close body tag. –>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!– Place this tag where you want the widget to render. –>
<div class="g-post" data-href="https://plus.google.com/108225766841424520099/posts/UopHbfXsNb8"></div>
[/html]
もしそれで投稿が表示されない場合は、すみやかに元のコード全部を貼り付けてください。1〜2行目はheadタグの間か、</body>タグの直前に設置すればいいでしょう。
Google+ページの投稿を貼り付けた例は、下を見て参考にしてください。もしよければ「フォロー」してください(^^)
まとめ：今日のゆめぴょんの知恵
FacebookページやGoogle+の投稿を、その記事に埋め込みたい場合、まず記事を公開した後でFacebookページなどで投稿して、その後で更に編集作業をしなくてはいけないのが面倒です。何か方法をご存知の方、ぜひ教えてください！
今はまだ有効な使い方をしているブログ・サイトは見つかりません。大手メディアもいろいろテスト運用してるようですね。この有効な方法を見つけたら、また記事にしたいと思っています。
なおソーシャルボタンの設置方法についてまとめた記事もあります。興味ある方は読んでみてください。
ゆめぴょんでした。ちゃおっ！
