1. TOP
  2. お役立ち
  3. web
  4. 【初心者必見】ブログに使えるコピペするだけで簡単実装できる機能まとめ

【初心者必見】ブログに使えるコピペするだけで簡単実装できる機能まとめ

 
こんにちは。
 
本日は初心者ブロガーのためにコードをコピペするだけでリッチなコンテンツを実装できる方法をご紹介します。
 
難しいjavascriptやPHPなどの知識がなくともグーグル・マップやユーチューブの動画を貼り付けられたりできます。そんな初心者に優しい簡単なAPIの実装方法をレクチャーしていきます。(ワードプレスを使用している前提で説明します)
  

目次

 



 
スポンサーリンク



 

Youtubeの動画の貼り付け方法

知らない人はいないYoutubeですが、紹介したい動画などがあった時に簡単に自分のブログに実装することができます。
 
 

まず見たい動画ページに飛びます。

僕が大好きな炎上系ユーチューバーを例にとって説明します笑

スクリーンショット 2016-07-22 20.33.26
 
 

画面左下の方の「共有ボタン」を押す

チャンネル登録ボタンのすぐ下にあります。

名称未設定-1
 
 

埋め込みコードを押して下のコードを全て選択してコピーしてください。

※この時必ずすべてのコードをしっかりコピーしましょう。(途中でソースが切れていると表示されません)

名称未設定-2
 
 

つぎにワードプレスの投稿編集ページに飛ぶ

スクリーンショット 2016-07-22 20.49.29
 
 

右側のテキストタブを押す

名称未設定-3
 
 

コピーしてきたテキストをペーストする。

名称未設定-4
 
 

下記のように簡単に動画を貼れることができます。

ポケモンGOの動画ですが、、、笑


 
 

 
 


 
 

グーグル・マップの貼り付け方法。

地図またはルートをサイトに埋め込む方法です。ブログ紹介する場所をお知らせするのに便利そうですね。
 
 

まずグーグル・マップを開きます。

Google マップ

  

埋め込みたい地図やストリートビュー画像、またはルートを地図上に表示します。

名称未設定-6

  

共有ボタンを押す

名称未設定-6

  

地図を埋め込むタブを押し、ソースをコピー。

名称未設定-7

  

つぎにワードプレスの投稿編集ページに飛ぶ

スクリーンショット 2016-07-22 20.49.29
 
 

右側のテキストタブを押す

名称未設定-3
 
 

コピーしてきたテキストをペーストする。

名称未設定-4
 
 

下記のような地図を埋め込めます。

グーグル・マップは下記のように共有できるものとできないものがあるらしいです。

共有できるものとできないもの

共有できるもの:

  • 場所、ビジネス情報、住所
  • ルートの検索結果
  • ストリートビューの画像

共有できないもの:

  • 保存した場所を含む地図(自分専用のため)
  • 距離測定の結果を含む地図
  • 地図そのもののスクリーンショットや画像

  

  


  

facebookのページを埋め込む

  

まず下記URLにアクセス。

URL:https://developers.facebook.com/docs/plugins/page-plugin
 
 

必要な情報を入力。

※ここでは詳しい入力の仕方は割愛しますが、上記URLに詳しく書かれているのでご参照ください。

スクリーンショット 2016-07-22 23.01.08
 
 

コードを取得ボタンを押す

名称未設定-8
 
 

「iframe」タグを押し、ソースをコピーする。

名称未設定-9
 
 

つぎにワードプレスの投稿編集ページに飛ぶ

スクリーンショット 2016-07-22 20.49.29
 
 

右側のテキストタブを押す

名称未設定-3
 
 

コピーしてきたテキストをペーストする。

名称未設定-4
 
 

埋め込み完了です!


 
 

 
 


twitterのつぶやきを埋め込む方法

おもしろいつぶやきや、ためになるつぶやきをブログで紹介する際はめちゃくちゃ便利です。そしてめっちゃ簡単です。
 
 

ツイッターにアクセス。

https://twitter.com
 
 

つぶやきの中の「・・・」を押す

名称未設定-10
 
 

プルダウン内の「ツイートをサイトに埋め込む」を押す。

名称未設定-11
 
 

ソースをコピーする

名称未設定-12

 

 

つぎにワードプレスの投稿編集ページに飛ぶ

スクリーンショット 2016-07-22 20.49.29
 
 

右側のテキストタブを押す

名称未設定-3
 
 

コピーしてきたテキストをペーストする。

名称未設定-4
 
 

つぶやき設置完了。

 


 
 

 
 


 
 

まとめ

いかがでしたでしょうか?

こんなに簡単にできるのかと驚いた方もいそうですね。

昨今は簡単に実装できる様々なプラグインやAPIが充実しています。こういったものをガンガン使えばサイトの質も上がりますし、何よりも作成がスムーズにできます。惜しみなく使うようにしましょう。

それでは!

 

 

関連記事