ワードプレスに埋め込む方法まとめ!twitter/インスタグラム/Youtube/Googleマップ/PDF

ブログ記事を書いているけど、

twitter、インスタグラム、YoutubeなどのSNSを埋め込みたいことってありますよね。

 

お店や出かけた場所の紹介はGoogleマップがあると便利だし、

フォーマットやマニュアルをPDFで配布できたら使い方も広がります。

 

この記事では、

SNSやGoogleマップなど、

なんでもワードプレスのブログに埋め込む方法をまとめました。

 

埋め込むとブログのコンテンツが充実します♪

スポンサードリンク
 





 

ワードプレスにtwitterの投稿を埋め込む方法

ワードプレスにtwitterの投稿を埋め込む方法を紹介します。

 

1.埋め込みたい投稿を開く。

 

今回はこの変哲もない投稿を埋め込んでみます。

右上の↓をクリックします。

twitter1

 

2.”ツイートを埋め込む”をクリック

 

twitter2

 

3.”Copy Code”をクリック

twitter3

 

4.この画面が出たらコピー完了。(この画面は閉じてもOK)

 

twitter4

 

5.ワードプレスのテキストエディタにコードを貼り付けます。

 

↓こんな感じに埋め込まれます。

 

スポンサードリンク
 





 

ワードプレスにtwitterのタイムラインを埋め込む方法

1.https://publish.twitter.com/#を開きます。

 

2.表示したいタイムラインのURLを入力します。

https://twitter.com/ユーザーIDです。

timeline1

 

3.埋め込むタイプを選択します。

 

今回はタイムラインを埋め込みたいので、”Embedded Timeline”を選択します。

timeline2

4.”Copy Code”をクリックします。

timeline3

 

5.ワードプレスにコードをコピーすれば完了です。

 

ウェジット(サイドバーなど)に入れるには、

外観ーウェジットで埋め込みたい場所に、テキストで作成して追加します。

 

timeline4

 

わたしはトップページの右下に入れてます。

timeline5

 

 

スポンサードリンク
 





 

ワードプレスにインスタグラムを埋め込む方法

 

1.埋め込みたい投稿を開いて、右上の・・・を押します。

insta1

 

今回埋め込むのは、

わたしも参加しているオンラインサロンのインスタグラム(kyoko.womens_powerです♪

 

オンラインサロンってどんな感じ?と気になる方はこちら!

オンラインサロンは胡散臭い?女性限定サロンに参加した体験談【生きるチカラ向上委員会】

 

2.”埋め込み”を選択する。

insta2

 

3.コードをコピーする。

insta3

 

4.ワードプレスのテキストエディタに貼り付ける。

 

↓こんな感じになります。

 

この投稿をInstagramで見る

 

【がんばるママあるある】 #オンラインサロン 内でも朝活する人が増えてきています。 またKYOKO先生が、朝6時半から毎日 #voicy でラジオを配信してますのでみんな通勤しながら家事をしながら聴きつつ1日をはじめているようです。 特にお子さんがいるメンバーは家族が寝てる間に副業や勉強したいですが…ママが起きるとみんな起きる(特に子ども)ってなんでなんでしょうね(笑) ============= 【WEB副業、在宅ワークってどんな感じ?】 YouTubeで11万人の登録者がいるKYOKO先生が運営するオンラインサロン、#kyokoの生きるチカラ向上委員会 のメンバー達が日常の様子をそれぞれインスタ漫画にしてみました‼️ 私たち、楽しみながら個人の戦闘力をアップしています⤴️ 今後も随時更新しますので、宜しければフォローお願いします‼️ 作画:Kai (サロンメンバー) #KYOKOの生きるチカラ向上委員会 #KYOKO #女性の働き方 #女性の副業 #副業 #web副業 #在宅ワーク #在宅ワークママ #在宅ワーク女子 #オンラインサロン #インスタグラム始めました #朝活

【準備中】KYOKOの生きるチカラ向上委員会(@kyoko.womens_power)がシェアした投稿 –

 

ワードプレスにYoutubeを埋め込む方法

 

1.埋め込みたい動画を開きます。

 

2.”共有”を押します。

youtube1

3.”埋め込む”を選択します。

youtube2

 

4.”コピー”を押します。

youtube3

開始位置を指定して埋め込みたい場合は、

開始位置まで動画を進めた状態で2~3をします。

 

4で開始位置にチェックを入れれば、指定した開始位置で埋め込めます。

 

5.ワードプレスのテキストエディタにコードを貼り付ける。

↓こんな感じになります。

 

スポンサードリンク
 





 

ワードプレスにSNSを埋め込むときの注意点

ワードプレスにSNSを埋め込むときは、

対象の投稿・動画・写真の選び方に注意しましょう。

 

【気を付けるコンテンツ】

 

・違法にアップロードされたもの

 

・著作権や肖像権など侵害するおそれのあるもの

 

イベント記事を書くときにtwitterを埋め込むのは便利ですが、

投稿した人や観光客の顔が映っているものは避けましょう。

 

芸能人関係はoffiial以外は使わないようにしています。

 

ワードプレスにGoogleマップを埋め込む方法

 

1.Googleマップで埋め込みたい場所を検索します。

 

2.”共有”を押します。

 

今回は東京都庁を選びました!

googlemap1

 

3.”地図を埋め込む”タブを開き、サイズを選択して”HTMLをコピー”を押します。

 

googlemap2

 

4.ワードプレスのテキストエディタにコードを貼ります。

 

↓こんな感じになります。(サイズは中)

 

ワードプレスにGoogleマップのルート検索を埋め込む方法

地図を埋め込むのとほぼ同じです。

 

ルート検索でルートを選択して、”共有”を押します。

googlemap4

 

↓こんな感じです。(新宿駅から東京都庁までのルート)

 

スポンサードリンク
 





 

ワードプレスにPDFを埋め込む方法

ワードプレスにPDFを埋め込むにはプラグインを使用します。

※PDFファイル以外でも埋め込めます。

 

1.Download Monitorをインストールして有効化します。

 

Download Managerもほぼ同様の機能を持っているそうですが、

わたしはDownload Monitorを使用しています。

 

※この後の説明はすべてDownload Monitorの画面です。

pdf1

 

2.有効化すると管理画面にダウンロードというメニューが追加されます。

新規作成をクリックしましょう。

pdf2

 

3.タイトルを入れます。

pdf3

 

4.少し下にスクロールし、”+ファイルの追加”をクリックします。

pdf4

 

5.”ファイルをアップロード”をクリックしてファイルを選択します。

pdf5

 

6.”公開”を押します。

pdf6

 

7.ダウンロード情報のショートコードを記事に記載すれば埋め込まれます。

pdf7-2

 

ダウンロードの設定変更

 

・デフォルトテンプレート

表示形式を変更することができます。

タイトル名のみ表示したり、ダウンロード数を表示したりできます。

 

・ホットリンク防止

ホットリンク防止は、

他サイトがファイルにアクセスすることによる遅延や帯域幅制限を防ぎます。

 

個人のサイトでは考慮するほどではありませんが、一応有効にしておきましょう。

pdf8

 

パスワードをかけてアクセスできる人を制限できる

 

Download Monitorは、

パスワードをかけて限定公開することができます。

 

ただ、簡易的なパスワード保護なので、

個人情報や機微な情報は公開しないように気を付けてくださいね!

pdf9

 

スポンサードリンク
 





 

まとめ:ワードプレスに埋め込んでコンテンツを充実させよう!

いまや、SNSを使っていない人のほうが珍しいですよね。

 

SNSとブログを連携させれば、

アクセスやフォロワーの相乗効果が見込めます。

 

記事自体も情報が充実して、

役に立つ・見ていて楽しいコンテンツになりますよ♪

 

1つ1つの操作は簡単なので、ぜひ活用してくださいね!