ウェブサイトにHTML埋め込みコードを追加する方法[クイックガイド]

ソーシャルメディアで見つけた他の人のコンテンツをキュレーションしたり、自分のソーシャルメディアのビジュアルコンテンツの効果を高めたりしたい場合、ブログやウェブサイト上にHTML埋め込みコードを追加して、該当コンテンツを埋め込む必要があります。

実際の手順に入る前に、まず「埋め込み」と「HTML」についておさらいしておきましょう。コードに関しては全く何もわからないという方もいるかもしれませんので、一つずつ説明していきます。 

HTMLとは

ウェブ上で使用されている最も基本的な言語の一つで、ウェブページのデザインやレイアウトの形成に使われています。ブログツールの「バックエンド」でHTMLコードを見かけることも多いのではないでしょうか。

 一例としてHMTLコードには以下のようなものがあります。

<a href=http://blog.hubspot.com/>HubSpot Blog</a> 

埋め込みとは

ウェブサイトやブログ記事に外部のコンテンツを挿入することを言います。HTMLを使って、SNSやコンテンツネットワークからインタラクティブコンテンツを引っ張ってくるときに耳にすることも多いかと思います。自分でデザインせずとも、ブログにインタラクティブコンテンツやビジュアルコンテンツを表示することができるので、非常に便利です。

さて、HTMLと埋め込みが何なのかを理解できたところで、実際にどんな作業を行えばいいのかを見ていきましょう。ウェブサイトやブログの任意のページにコードを追加し、人気のソーシャルネットワークのコンテンツを埋め込む方法を順を追って説明していきます。

HTML & CSS入門ガイド│マーケティング担当者向け

初心者でもコーディングを始められるよう、HTMLやCSSについて基礎をわかりやすく解説しています。

• コーディング言語とは？
• HTMLとは？
• CSSとは？
• 知っておきたいHTMLコード

今すぐ無料ダウンロードする 詳しく見る 今すぐ無料ダウンロードする

今すぐダウンロードする

全てのフィールドが必須です。

ダウンロードの準備ができました

下記のボタンよりダウンロードいただけます。

今すぐダウンロードする

まずは、埋め込みたいコンテンツの埋め込みコードを生成する必要があります。以下、主要なSNSおよびコンテンツネットワークで、埋め込みコードを生成する方法です。コードを生成する前に埋め込みたい内容を編集できるものもあります。

Facebook

Twitter

YouTube

SlideShare

Instagram

注：この方法は写真にも動画にも使えます。

WindowsならCtrl＋C、MacならCommand＋Cでコピーできます。あるいはコードを選択した状態で右クリックして「コピー」を選択しましょう。

Instagram

注：Instagramではこの方法は写真にも動画にも使えます。

コンテンツ管理システム（CMS）にはさまざまな種類が存在しますが、おそらくどのCMSでも同じような手順でHTMLビューアを見つけられるはずです。画像はHubSpot CMS、HubSpot COS、WordPressにおけるHTMLビューアの見方です。

HubSpot CMS

HubSpot COS

WordPress

コードを貼りつける際は、別のコードの途中に貼り付けてしまわないように注意しましょう。ウェブページでエラーになってしまいます。この手順はどのCMSを使用していても同じです。

無事にウェブサイトまたはブログにコンテンツを埋め込むことができました。各SNSから埋め込まれたコンテンツは、以下のように表示されます。

Facebook 

Twitter

3 Tips to Get You Started With Photoshop [+Tutorial Videos] http://t.co/aLoXW9XEqs

— HubSpot (@HubSpot) September 10, 2013

YouTube

Google+

SlideShare

 ソーシャル攻略：HubSpotのAll-in-oneマーケティングソフトウェアで3大ソーシャルメディアを制する方法

Instagram

皆さんは、マーケティング活動の一環としてコンテンツを埋め込む際、どんな方法を使っていますか？

画像クレジット：racheocity

編集メモ：この記事は、2013年11月に投稿した内容に加筆・訂正したものです。Ginny Soskeyによる元の記事はこちらからご覧いただけます。