blog-RuinDig

短かったり長かったりする。Articles are my own.

Google+の一般公開の投稿をブログにHTML形式で埋め込んでみる

Google+の一般公開の投稿をブログに埋め込んでみる。

埋め込むといっても、以下のOGP形式ではなく、TwitterInstagramのようにHTMLコードを用いた埋め込み。

plus.google.com

<!-- 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/+GoogleJapan/posts/fKiiMviDREp"></div>

上記の"https://plus.google.com"で始まる部分に埋め込む対象となるGoogle+の投稿のURLを入力すればOK。

埋め込みに必要なコードは上記の通りという事がわかった。

旧UIでは、埋め込みコードは投稿から取得できたらしいが、新UIになって投稿から取得できなかったので、以下の記事に書かれていたコードを使って埋め込んだ。

techmemo.biz

ちなみに、はてなブログの「見たまま編集」では埋め込んだGoogle+の投稿が表示されないが、プレビューでは何も問題なく表示されている。埋め込む場所の調整は、はてなブログの「HTML編集」を見ながら調整すると良い。

+1ボタンやコメント欄が出てこないけど、これだけ機能すれば充分だと思う。

ただ、幅の調整ができなかったので、スマホで見た時に埋め込んだGoogle+の投稿の右側が切れてしまうのが難点だ。

f:id:edgeknight:20180815114749p:image

iPodTouchから埋め込んだ投稿を見た時の様子。右側が切れているのが分かると思う。

f:id:edgeknight:20180815115700p:plain

タブレット端末(Huawei MediaPad M3)から埋め込んだ投稿を見た時の様子。画面が大きいのもあってか、右側が切れていないのが分かると思う。

ちなみに、Google+のオープンコミュニティの投稿はHTMLコードでは埋め込めなかった。

plus.google.com

-end-