WordPressでInstagramやYouTube、Twitterの投稿を超簡単に貼る方法

WordPressでブログを書いていると、InstagramやYouTube、Twitterの投稿をブログに貼りたくなることがあります。

通常なら、各サービスで埋め込み用のコードを取得して記事内にそのコードを貼るのですが、WordPress4.4以降ならURLを貼るだけで自動的に各サービスの投稿をきれいに記事内に表示させてくれます。

Vineがサービス終了したのに伴い、Instagramに動画を移動させていたのですが、「サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル」という本に、URLを貼るだけで投稿を埋め込んでくれるということが書いてあったのを思い出し、試してみました。

超簡単に埋め込みをすることができ、コードもすっきりし、貼る手間も激減しましたので、その方法を紹介します。

YouTubeの貼り方

YouTubeでは、貼り付けたい動画のページを開きそのURLをコピー。

記事に貼るだけでOKです。

このように表示されます。

ただし、レスポンシブに対応していないコードが表示されるので、レスポンシブデザインを採用している場合はCSSで対応する必要があります。

僕の場合はURLをdivで囲い「video」というclassを作って対応しています。

HTML

<div class="video">
https://www.youtube.com･･･
</div>

CSS

.video {
    position: relative;
    height: 0;
    padding: 30px 0 56.25%;
    overflow: hidden;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

divなどのタグでURLを囲うと、YouTubeのURLの前後に改行が入っていないなければ動画が表示されないので注意が必要です。

Instagramでの貼り方

InstagramはどこのURLを貼れば良いのかわかりにくいです。

まず、投稿一覧画面を表示させます。

自分の投稿を表示させるには、右上の人マークをクリック。

タイムラインから表示させるには、タイムライン上の名前をクリック。自分でも他人でもOKです。

これで投稿の一覧画面が表示されるので、貼り付けたい投稿をクリック。

写真や動画が大きく表示され、そのときのアドレスバーに表示されているURLをコピーします。

そのURLを記事に貼ればOK。

このように表示されます。

View this post on Instagram

A post shared by Keikenchi ITotuo (@itotuo) on Nov 20, 2016 at 11:00pm PST

Twitterでの貼り方

Twitterでは、タイムライン上の埋め込みたいツイートをクリックし、ツイートが大きく表示されたときのアドレスバーに表示されているURLをコピー。

そのURLを記事に貼ればOK。

このように表示されます。

切符を買ったお釣り650円が、100円玉と10円玉で返ってきて絶望している。

— トツオ@経験知 (@iTotuo) February 2, 2017

週3日の副業で月50万

月50万稼げたら年収は600万で、普通の人以上の生活ができます。

それが週3日で稼げたら、残りの4日をどう過ごしますか？

• 自分の趣味に全力を注ぐ
• 家族との時間を増やし、子供の成長をしっかりと見守る
• 毎週海外へ旅行へ行く
• 新しいことに挑戦する
• 何もせず、のんびり自由な時間を過ごす

週の半分以上が自分の好きなことに使えるのなら、人生は楽しい物になりますよね！

週2日の休みが増えるということは、

年間104日も増え、365日のうち208日も自分の時間に使えるのです！

更に、今30歳だとして、65歳まで働いたら、

3,640日も変わってきます!!10年以上ですよ!10年!!

週2日の休みのために5日を無駄にする生活をいつまで続けますか？

週4日の自由をたった3日で稼いで、自分のために自由に時間を使う生活をはじめましょう！

週3日で50万円稼げる案件は、業界最大級の案件を保有しているレバテックフリーランスで見つけられます。

1分で完了する無料登録で、時間の自由への一歩を踏み出しましょう！

おわりに

今までSNS系の投稿はほとんど埋め込んでこなかったので、各サービスの埋め込み投稿を使っていましたが、この方法で簡単かつ簡潔に貼れるのでとても楽です。

Instagramの貼り付けコードはクソ汚くて記事編集時の視認性が著しく悪くなりますからね。

勝手にいろいろやってくれるWordPress超便利ですね〜！