アメブロにはTwitterが発行しているツイート埋め込みコードを貼る事が出来ないのですが
たまたま訪れたブログに貼ってあったのでどういうこっちゃと思いソースを見てみると
面白い貼り方をしていたのでご紹介。
まずツイートコードの取得なのですが貼りたいツイートの下にあるその他(・・・)を押します。
![ツイートの各種ボタン]()
返信、リツイート、お気に入りボタンの横にある・・・を押したら
ツイートをサイトに埋め込むを選択。
そうすればこのような埋め込みコードが出てくるのでそれをコピーします。
画像や動画などがついている場合は、メディアを含めるにチェックを。
![ツイート埋め込みコードを取得]()
そのコピーされたコードの全体がこれ。
<blockquote class="twitter-tweet" data-cards="hidden" lang="ja"><p>テスト用のツイートです。 このように表示されます。 <a href="https://twitter.com/hashtag/ameblo?src=hash">#ameblo</a> <a href="http://t.co/rufebdWrJ4">pic.twitter.com/rufebdWrJ4</a></p>— ﾋﾟｰｽ (@norinori125) <a href="https://twitter.com/norinori125/status/574190238597165058">2015, 3月 7</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
この赤字部分<script></script>をアメブロの記事に貼ると
禁止タグとしてエラーが起きてしまいます。
なのでこの赤字部分のタグだけフリープラグインに入れましょう。
マイページから管理画面→設定・管理→プラグインの追加→フリープラグインに行き
赤字部分のコードをコピーして保存。
これであらかた完成です。
後は残った赤字部分以外のコードを記事に貼り付けるだけなのですが
標準エディタ、タグ編集エディタのどちらでも構いません。
タグ編集エディタの場合はそのまま好きなところへコピペするだけ。
標準エディタの場合は記事を書く場所の左下にあるHTMLタグを表示して
貼りたい場所にコピペすればおｋです。
その際、他のタグを壊さないように気を付けてください。
と言う訳でさっそく貼ったものを見てもらいたいと思います。
どうでしょう、うまく貼れているかと。
画像などのメディアも貼ると下じゃなくて上に出るんですね。
禁止タグがあるので記事ではなく、そこだけをフリープラグインに貼るとはいい考えだわ。
思いもつかなかったです。
赤字部分のコードは枠やボタンなどを構成するためのものなので
一度、フリープラグインに入れて置けばおｋ。
記事に貼る場合はその赤字部分だけを消して貼り付ければ
１つのコードですべてのツイートに対応してくれます。
ここは重要なのですが記事を編集してる段階
そして表示を確認したりプレビューした場合でもちゃんと表示されなく
全体公開するまできちんと表示されません。
それは記事を書く場所ではフリープラグインを読み込まないからであり
ブログに表示されて初めてツイートが記事に反映されますので覚えておいてください。
これ凄いいいな～と思っていたのですがデメリットもあるんですよね。
まずツイートを消されてしまうと当然ながらブログに表示されなくなります。
相手や自分がTwitterを退会しても同じく。
こればっかりはしょうがないですね。
そのツイートそのものがないんですから読み込めるわけがない。
その場合、こんな表示になってしまいます。
記事に貼り付けた時と同じ状態に。
消されて表示されず、ブログが汚くなってしまうデメリットの他に
Twitterがサーバーエラーなどを起こした場合にも表示されない可能性があり
その場合、ブログが重くなって記事自体が表示されない懸念も。
後、ブログを読み込み終わらないときちんと表示されませんし
ガラケーでは当然反映されなく、スマホではどう表示されるのかさっぱり。
それを考えると結局、ツイートは画像にして
ブログに貼り付けていた方がいいのかなとも思いました。
それでもこの方法のおかげでアメブロ記事内にツイートが表示され
フォローボタンやリツイートなどの各種ボタンもブログ上でアクションできることに。
メリットデメリットを考えて自分に合った方を選ぶといいと思います。
■ランキングに参加中。
いつもポチがとうございます。
クリックして下さると１０ポイントが入り喜びます。
![ブログランキング・にほんブログ村へ]()
![人気ブログランキングへ]()
たまたま訪れたブログに貼ってあったのでどういうこっちゃと思いソースを見てみると
面白い貼り方をしていたのでご紹介。
まずツイートコードの取得なのですが貼りたいツイートの下にあるその他(・・・)を押します。
返信、リツイート、お気に入りボタンの横にある・・・を押したら
ツイートをサイトに埋め込むを選択。
そうすればこのような埋め込みコードが出てくるのでそれをコピーします。
画像や動画などがついている場合は、メディアを含めるにチェックを。
そのコピーされたコードの全体がこれ。
<blockquote class="twitter-tweet" data-cards="hidden" lang="ja"><p>テスト用のツイートです。 このように表示されます。 <a href="https://twitter.com/hashtag/ameblo?src=hash">#ameblo</a> <a href="http://t.co/rufebdWrJ4">pic.twitter.com/rufebdWrJ4</a></p>— ﾋﾟｰｽ (@norinori125) <a href="https://twitter.com/norinori125/status/574190238597165058">2015, 3月 7</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
この赤字部分<script></script>をアメブロの記事に貼ると
禁止タグとしてエラーが起きてしまいます。
なのでこの赤字部分のタグだけフリープラグインに入れましょう。
マイページから管理画面→設定・管理→プラグインの追加→フリープラグインに行き
赤字部分のコードをコピーして保存。
これであらかた完成です。
- Twitter/Twitter Inc.
![]()
- Amazon.co.jp
後は残った赤字部分以外のコードを記事に貼り付けるだけなのですが
標準エディタ、タグ編集エディタのどちらでも構いません。
タグ編集エディタの場合はそのまま好きなところへコピペするだけ。
標準エディタの場合は記事を書く場所の左下にあるHTMLタグを表示して
貼りたい場所にコピペすればおｋです。
その際、他のタグを壊さないように気を付けてください。
と言う訳でさっそく貼ったものを見てもらいたいと思います。
テスト用のツイートです。 このように表示されます。 #ameblo pic.twitter.com/rufebdWrJ4
— ﾋﾟｰｽ (@norinori125) 2015, 3月 7どうでしょう、うまく貼れているかと。
画像などのメディアも貼ると下じゃなくて上に出るんですね。
禁止タグがあるので記事ではなく、そこだけをフリープラグインに貼るとはいい考えだわ。
思いもつかなかったです。
赤字部分のコードは枠やボタンなどを構成するためのものなので
一度、フリープラグインに入れて置けばおｋ。
記事に貼る場合はその赤字部分だけを消して貼り付ければ
１つのコードですべてのツイートに対応してくれます。
ここは重要なのですが記事を編集してる段階
そして表示を確認したりプレビューした場合でもちゃんと表示されなく
全体公開するまできちんと表示されません。
それは記事を書く場所ではフリープラグインを読み込まないからであり
ブログに表示されて初めてツイートが記事に反映されますので覚えておいてください。
これ凄いいいな～と思っていたのですがデメリットもあるんですよね。
まずツイートを消されてしまうと当然ながらブログに表示されなくなります。
相手や自分がTwitterを退会しても同じく。
こればっかりはしょうがないですね。
そのツイートそのものがないんですから読み込めるわけがない。
その場合、こんな表示になってしまいます。
これが消したツイート、消されたツイートの場合はこのような表示になります。
— ﾋﾟｰｽ (@norinori125) 2015, 3月 7記事に貼り付けた時と同じ状態に。
消されて表示されず、ブログが汚くなってしまうデメリットの他に
Twitterがサーバーエラーなどを起こした場合にも表示されない可能性があり
その場合、ブログが重くなって記事自体が表示されない懸念も。
後、ブログを読み込み終わらないときちんと表示されませんし
ガラケーでは当然反映されなく、スマホではどう表示されるのかさっぱり。
それを考えると結局、ツイートは画像にして
ブログに貼り付けていた方がいいのかなとも思いました。
それでもこの方法のおかげでアメブロ記事内にツイートが表示され
フォローボタンやリツイートなどの各種ボタンもブログ上でアクションできることに。
メリットデメリットを考えて自分に合った方を選ぶといいと思います。
いつもポチがとうございます。
クリックして下さると１０ポイントが入り喜びます。
