web-3967926_1920

こんばんは、黒澤春(@harukurosawa )で御座います。

今回はブログで役立つ「埋め込み機能」についての記事となっております。

以前に「web漫画の埋め込み機能」の記事を書きましたが、動画サイトやSNS等でも同様に「埋め込み機能」があり、ブログと彩るツールとして使えます。

普段より私がよく利用している埋め込み機能とその埋め込みコードの簡単な利用方法をまとめていきたいと思います。

今回は主に「動画サイト」と「SNS系」にフォーカスを置いていますので、漫画系の埋め込みについて知りたい方は下記の関連リンクにまとめてありますので、ご参照下さい。

◆関連記事



埋め込み機能とは?

programming-3173456_1280

「埋め込み機能」とは、ブログといったwebサイト上に埋め込み元の情報をそのままリンクとして反映させる方法です。

発信元が開示している「埋め込みコード」をテキストコピーし、自身のwebサイトの記事内等にコピーペーストする事で表示する事が可能です。

この埋め込みコードはあくまでリンク扱いとなるため、動画やSNSの投稿を著作権法を気にせず、快適に利用できるという素晴らしい利点があります。

ブログ運営している方にとってこれ程嬉しいサービスはありませんね。

昨今では某まとめサイトがツイッターの画像を無断転載し、引用の枠を越えていたため、賠償命令が下された例があります。

ネットの誹謗中傷で逮捕されてしまうような現代ではネットリテラシーを意識することは最重要事項です。

又、著作権を守るのと同時に埋め込みを使用することでサイトの見映えもよくなるので良いこと尽くしなんですよね。

なので、この記事をきっかけに「埋め込み機能」をうまく利用して楽しくブログやwebサイト運営出来ればなと思います。

Twitterの埋め込みコード取得方法

smartphone-586944_1920

スマホアプリをお使いの方はブラウザよりお入り下さい。

アプリからは埋め込みコードを取得する事は出来ませんのでご注意を!

では、実際に画像を使って説明していきます↓

IMG_20190720_181602


①ブラウザからツイッターにアクセス

②∨マークを選択

③< / >ツイートを埋め込む

④Cope Codeをクリックする「埋め込みのコード」がテキストコピーされる

⑤ブログやwebサイトにコピペしたコードを貼り付けで完成です




IMG_20190720_181638

以上がツイッターのツイートの埋め込み機能を利用する手順、方法です。

実際にコピペされたコードをブログに貼り付けると以下のように表示されます↓



ツイッターのツイートの埋め込みを応用した「Twitterまとめ記事」の作り方の記事を過去に執筆しておりますので、もし宜しければ見て下さい↓

◆関連記事


Instagramの投稿を埋め込む方法

phone-1235721_1920

Instagram(以下インスタ)にもTwitterと同様にwebサイトに埋め込む機能が備わっています。

インスタ文化はツイッターと違い、皆さんご存じの通り写真がメインのSNSサイトです。

匿名性の高いツイッターと違い、リアル寄りのSNSプラットホームですね。

写真がメインという事もあり「スイーツ」に「ファッション」や「美容」や「景色」等、ツイッターと違い目で楽しむ投稿が多いですね。

なので、上記の四点に重点を置いたwebサイトを経営している方にオススメですね。

では、早速インスタの「埋め込み機能」の使用方法を説明していきます。

今回は日本人ユーザーでもっともフォロワー数の多い「渡辺直美」さんの投稿を例にしていきたいと思います。

20181225_005339

①Twitter同様ブラウザからアクセス

②画面右上の「…」マークを選択


20181225_005438

③メニューが表示されますので「埋め込み」を選択

20181225_005423

④「埋め込みコードをコピー」をタップして後はブログに貼り付けるだけでオーケーです。


成功すると上記の様に表示されます。

Twitterの取得方法と酷似していますが、念のため一連の流れをまとめましたのでご参考にどうぞ↓


①Twitter同様ブラウザからアクセス

②画面右上の「…」マークを選択

③メニューが表示されますので「埋め込み」を選択

④「埋め込みコードをコピー」をタップして後はブログに貼り付けるだけでオーケーです




以上がインスタでの「埋め込み機能の使い方」でした。

もっと上手に埋め込みを使うには「ハッシュタグ」を使ってブログに埋め込みたい有益な投稿を検索しく事をオススメします。

20181225_004207

IMG_20190306_181527

ハッシュタグとは?ツイッターやインスタグラム等のSNSで利用できる検索キーワードであり、検索したい言葉の頭に「#(半角のシャープ)」を付ける事で、ハッシュタグになります。

ハッシュタグを使用することで他のユーザー同士共通の投稿で繋がれるという利点があります。

埋め込みでは検索の方法として活用出来ます。


Facebookの投稿を埋め込む方法

social-media-763731_1280

Facebookの埋め込み方法ですが、「アプリ」や「モバイル版」からの埋め込みコードの取得は出来ないので「PC版」からログインして下さい。

簡単な方法としてスマホで操作している方はURLの「m.」を取ってブラウザから「PC版サイト」に設定してください。

20190407_234943

「画像」や「動画」のある呟きの「…」をクリックすると「埋め込み」という項目があるのでそれを選択します。

20190407_235002

すると埋め込みコードが表示されるのでこれをブログに貼り付けると下記のようになります。


これで「Facebook」から気になる動画や画像を簡単にブログに反映させる事が可能です。


①スマホの場合はブラウザから「PC版サイト」へアクセス

②埋め込みたい投稿の「…」を選択

③埋め込みを選択

④投稿を埋め込むからコピーコードをコピペしてwebサイトに貼り付けて完成です




ここで一つ注意なのは「Facebook」は個人の生活等の投稿が多いため、埋め込みが認められているとは言えプライバシーやモラル面で懸念が残ります。

法的に問題が無いとはいえ、トラブルの元になりかねませんので、Twitterに比べると使う機会は少ないと思います。

又、「Facebookページ」を埋め込む機能もありますので、自身のページをブログで紹介するのに使えたりします。

こちらはFacebookの公式ページにて解説されてるので興味のある方は下記リンクよりご参照ください↓

ページプラグイン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

Imgurで画像を埋め込む方法


「Imgur(イムガー)」とは?海外の画像共有サイトで無料で利用する事が可能です。

「2ちゃんねる(5ちゃん)」でよく使われるアップロードサイトの一つですね。

そうせいもあってか、著作権に引っ掛かる様な無断転載が多く、絵師さんの絵を勝手にアップロードする輩までいる始末…

個人ブログ経営者には余り縁の無いサイトですが「まとめサイト」を運営する方には必須なサイトです。

その理由としてツイッター等と同様「埋め込み機能」を利用すると、あくまで掲載元を表示させるだけで、無断転載には該当しないからです。

なので「まとめサイト管理人」は2ちゃんにアップされた画像を直接自身のブログにアップせずに「埋め込みコード」を取得するのが訴訟回避の鍵になっている訳です。

ですが、法律の抜け道を突いた方法のため、いささか問題はありますね。

一言で言えば「グレーゾーン」であり、モラル的にも余り宜しく無いため極力使わない方が良いかもしれません。

恒例ですが、「Imgur」の埋め込み機能を使用するにはスマホからだと「埋め込みコード」を取得できないのでご試用されているブラウザ設定から「PC版サイト」を表示して下さい。

「Google Chrome」であれば画面右上から設定できます。

準備が整いましたらwebサイトに埋め込みたい画像を選びましょう。

20181221_000125

画面中程にあるSNSボタンの一番右端の「…」をクリックして下さい

20181221_000015

「< / > Embed post」をタップすると埋め込みコードが表示されるのでそれをコピペします。

20181221_000053

Pitou One of the royal guards from hunter x hunter

コピペした「埋め込みコード」をwebサイトに貼り付けすると、上記の様に「埋め込みの画像」が表示されます。


①ImgurのPC版サイトへブラウザからアクセス

②埋め込みたい画像を選択(虫眼鏡検索の際は海外サイトのため英語で検索して下さい)

③画面中程にあるSNSボタンの一番右端の「…」をクリックして下さい

④「< / > Embed post(投稿を埋め込む)」をタップすると埋め込みコードが表示されるのでそれをコピペします

⑤コピペした埋め込みコードを自身のwebサイトに貼り付けをして完了




以上がImgurの埋め込みの方法となります。

スマホの方でどうしても「PC版サイト」が表示されない方は埋め込みたい画像のURLの「m.」を削除し、末尾に「?r」を付け加えて見てください。

上記の埋め込みを例に出します↓


修正前:https://m.imgur.com/gallery/MZLEN#ZihyoYP

修正後:https://imgur.com/gallery/MZLEN#ZihyoYP?r




修正後のURLにアクセスすると「投稿を埋め込む」に飛べるようになるかと思います。

他の画像でも同様に使える手法なので是非覚えておいて下さい。

最後に

social-1206610_640

いかがでしたか?

ブログやwebサービスを展開している方は本記事を参考にする事で「無断転載や著作権侵害」にならないように出来るかと思います。

しかし、途中でも話した様にあくまで法律的に合成ですがモラル的な観点で言うと「転載」なのは間違いないので余り頻繁に利用するのは得策ではありません。

良質で最高なwebサイトを作るためには引用は最低限にして、きちんとオリジナルのコンテンツを配信する事が一番大切です。

そこの所をしっかりと頭においてSNSやImgurの様なサイトの埋め込み機能を活用していきましょう!

それでは本日も最後まで閲覧頂きましてありがとうございました。したっけ、またお会いしましょう!

スポンサードリンク