ホームページ・アメブロ等にTwitterのツイートを埋め込みたい!

2015-11-05_231518

こんにちは!
ぴよちゃんです(^^3)/
よくサイトやブログで
盛り上がっている話題の
ツイートを紹介しているのを
見かけます。

 

始めの頃はやり方がわからなく
文章を自分で読んで書いていました(^_^;)

しかしツイート画面がブログに
埋め込まれている方が
オシャレだし見やすい!!

 

今回は以外と簡単な
HPやブログにツイートを埋め込む方法を
わかりやすくご紹介いたします。

スポンサードリンク

PR

いい買い物の日キャンペーン 11月11日まで限定!11,111円GETできるチャンス!

関連記事

→ツイッターでインスタグラム画像が見れない?連動できるアプリはコレ!

→【最新版】ツイキャスの録画&見る方法とiPhoneにダウンロード保存するテク!

→Twitterのタグ付けが出来ない!やり方や使い方をまとめてみた

 

ツイートから情報をゲット!

まず自分のサイトにツイートを
埋め込むためには
埋め込みたいツイートの
コードとよばれる情報を入手します。
ツイートの右下の『・・・』というマークを選択。
すると下にメニューが出るので
『ツイートをサイトに埋め込む』を選択。

2015-11-05_225203

 

 

するとこの画面になるので
埋込みに必要なコードを
全選択してコピーします。

 

2015-11-05_225238

 

ちなみに画像付きツイートの場合は
メディアを含めるかどうか
この画面で選択できます。

 

 

次に自分のHPやブログへ
移動します。

こちらはwordpressの例です。

ビジュアルとテキストとありますが
ビジュアルは通常の文章を入力する画面で
テキストは素人には理解不能な
先程のコードやタグと呼ばれるものを
貼り付ける画面です。
ブログによっては
通常・標準モードと
HTMLモードにわけられています。
そのHTMLモードがコードを貼り付ける画面です。

2015-11-05_231347

 

そこへ先ほどコピーしたコードを
貼り付けます。

 

2015-11-05_231407

 

するとブログに
ツイートが埋め込まれました。

 

2015-11-05_231518

スポンサードリンク

アメブロは埋め込める?

芸能人も多く参加している
アメーバブログ。
アメブロでもツイートを
埋め込みたいな~☆と
思う方も多いのではないでしょうか。
で実際にやってみたところ・・・

2015-11-05_232658

しっかりHTML表示のほうを
選択して貼り付けましたが・・・

 

 

禁止タグが入力されていますと出て
このまま貼り付けではできませんでした・・・

2015-11-05_230040

 

コードの赤字が禁止タグです。

<blockquote class=”twitter-tweet” lang=”ja”>
<p dir=”ltr” lang=”ja”>理系男子は「3月14日」にプロポーズする人が多いらしい。 その理由は単にホワイトデーだからではなく、円周率「3.14 」は永遠に続くので、二人の愛が永遠に続くように。という意味が込められているそうです</p>
— ぴよちゃん (@piyochannnnn1) <a href=”https://twitter.com/piyochannnnn/status/662221402712313857″>2015, 11月 5</a></blockquote>
<script src=”//platform.twitter.com/widgets.js” async=”” charset=”utf-8″></script>

 

 

しかしこれを削除すると
表示されないので
この部分をフリープラグインというものに追加します。

 

 

アメブロの設定・管理をクリック。

2015-11-05_233902

 

 

プラグインの追加で
先程の赤字のタグを貼り付けます。

41 2015-11-05_233737

 

配置設定で
フリープラグインを使用する機能の
どこかへ移動しておきます。

40 2015-11-05_233848

 

 

それから記事投稿画面で
ツイートのコードの赤字を抜いたものを
貼って投稿すればオッケーです☆

 

2015-11-05_233816

しかしこの埋込みはPCからは
ツイートの画面が見れますが
スマホからだと、囲みの線もないので
ちょっぴりさみしい印象になるかもしれませんね。

 

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>