ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

FacebookページやGoogle+の投稿をブログに埋め込む短縮コードの生成方法

Facebookページ投稿を埋め込む

最近ブログ記事などで見かけるようになった、FacebookページやGoogle+の投稿の埋め込み。私もやってみましたがとても簡単にできます。今回は無駄なコードをのぞいた貼り付け方法を共有します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

Facebookページ、Google+の投稿を貼り付けてみましたが有効にはたらくかどうかは検証できていません。

既に多くのフォロワーやいいね!などを獲得してファンの多いブログ・サイトでは、「このブログすごいよ!」感をアピールできて、さらなる拡散を誘発できそうです。

ちなみにFacebookページ、Google+などへ投稿した時に表示されるタイトル、説明文、写真・画像などは、OGP設定をしていないと適切に表示されない場合があります。下の記事を参考にしてみてください。

【Web制作】FacebookのOGP設定をプラグインなしで設置する方法【Web制作】FacebookのOGP設定をプラグインなしで設置する方法27 shares

ブログをFacebookでいいね!してもらうとシェアされるタイトル、説明文、写真…

Facebookページの投稿を埋め込む方法

Facebookページ投稿を埋め込む方法

埋め込みたい投稿の右上「▽」をクリック。「外部へ埋め込む」を選択すると「投稿を埋め込む」というウィンドウが表示されます。一番上のコードをコピーしてください。

あとはコピーした内容を貼り付けたい場所にペーストするだけです。とても簡単ですよね。

貼り付けるコードを短縮して表示を高速化

高速化というのは大げさかもしれませんが、コードを短くシンプルにできて、スクリプトの重複を解消することができます。

この方法が可能なのは、ブログ・サイトに「いいね!」「Facebookのシェア(送信)」ボタン、Facebookページの顔入りボックスなどを既に設置している場合のみです。ほとんどのブログが対象だと思います。

例えばコピーした内容が次のようだとします。わかりやすいように改行して空白行も入れています。この1〜2行目(<div id=”fb-root”>から</script>まで)は丸々カットできます。JavaScriptなのでカットすると表示速度も向上します。

もしカットしたら投稿が表示されない場合は、すみやかに元のコード全部を貼り付けてください。

Facebookページの投稿を表示した例は、この記事の一番上の画像を見てみてください。

Googleページの投稿を埋め込む方法

Google+ページ投稿を埋め込む方法

埋め込みたい投稿の右上「▽」をクリック。「投稿を埋め込む」を選択するとウィンドウが表示されます。このコードをコピーしてください。

あとはFacebookページと同様で、コピーした内容を貼り付けたい場所にペーストするだけです。

貼り付けコードを短縮する方法

Facebookページと同様に、ブログ・サイトに「+1」ボタン、Google+バッジなどを既に設置している場合のみ、コードを短縮できます。

コピーした内容が次の場合、1〜2行目は不要です。コメントも不要なら5行目のみを、貼り付けたい場所にペーストするだけでOKです。

もしそれで投稿が表示されない場合は、すみやかに元のコード全部を貼り付けてください。1〜2行目はheadタグの間か、</body>タグの直前に設置すればいいでしょう。

Google+ページの投稿を貼り付けた例は、下を見て参考にしてください。もしよければ「フォロー」してください(^^)

まとめ:今日のゆめぴょんの知恵

FacebookページやGoogle+の投稿を、その記事に埋め込みたい場合、まず記事を公開した後でFacebookページなどで投稿して、その後で更に編集作業をしなくてはいけないのが面倒です。何か方法をご存知の方、ぜひ教えてください!

今はまだ有効な使い方をしているブログ・サイトは見つかりません。大手メディアもいろいろテスト運用してるようですね。この有効な方法を見つけたら、また記事にしたいと思っています。

なおソーシャルボタンの設置方法についてまとめた記事もあります。興味ある方は読んでみてください。

保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK68 shares

記事にソーシャルボタンを設置することは、もはや必須になりつつあります。良い記事は…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:SNSソーシャルメディアのシェアボタンが表示されない原因を解明【WordPress】FacebookのOGPとTwitterCardsに固有タイトルを設定!プラグイン不要で:次記事»
ページ
↑先頭
ホーム