Twitterのツイートをアメブロの記事に貼り付ける方法 - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで

Twitterのツイートをアメブロの記事に貼り付ける方法

Twitterのツイートをアメブロの記事に貼り付ける方法

./image/entry/QBlog/20140915-1-04.png

Twitterでお気に入りのツイートを見つけた時に、そのツイートをアメブロの記事に貼り付けてシェアしたいと思ったことはありませんか?

Twitterはツイートを他のサイトに貼り付けるタグを提供してくれてはいますが、残念ながら、そのタグをそのままアメブロの記事に貼り付けることはできません。

貼り付けても「記事内容に禁止タグが入力されています。 」というエラーが表示されて投稿できません。

でも、実は少し工夫するだけで、Twitterのツイートをアメブロの記事に貼り付けることが可能です。

この記事では、その方法についてご紹介したいと思います。

Twitterのツイートをアメブロの記事に貼り付ける方法

アメブロの記事にTwitterのツイートを貼り付けるには、フリープラグインと記事の両方を利用します。

フリープラグインに必要なコードを追加しておく

まず、事前準備として、以下のタグをアメブロのフリープラグインに追加して下さい。

<script async src="//platform.twitter.com/widgets.js"></script>

事前準備ですので、最初に一回だけやっておけば大丈夫です。

ツイートを貼り付けるたびに行う必要はありません。

また、フリープラグインを初めて利用する場合は、配置設定で、フリープラグインを「使用する機能」に入れることも必要ですのでお忘れなく。

なお、もしも既にTwitterのタイムラインなど他のTwitterのパーツ(ウィジェット)を貼り付けている場合は、既にこのコードか或いは、これの別の記述方法のコードがフリープラグインに存在するかも知れません。

別の記述方法のコードとは以下の様なものです。

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

もし、既にこれらの何れかが存在する場合は、もう一度このコードを貼り付ける必要はありませんので、このステップはパスして下さい。

ツイートをアメブロ記事に貼り付ける

次はいよいよ実際にツイートをアメブロの記事に貼り付けます。

./image/entry/QBlog/20140915-1-01.png

まずは、アメブロに貼り付けたいツイートの「・・・その他」という箇所をクリックし、表示される小窓内の項目「ツイートをサイトに埋め込む」をクリックして下さい。




./image/entry/QBlog/20140915-1-02.png

すると、画面に貼り付け用のコードが表示されますので、これを選択してコピーし、ひとまずアメブロの記事に貼り付けましょう。

HTMLタグですので、タグを貼り付けできるモードで行って下さい。




./image/entry/QBlog/20140915-1-03.png

アメブロの記事にコードを貼り付けできたら、貼り付けたコードを良く見ながら、上の画像で赤枠で囲ってある部分、つまり・・・、

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

という部分を削除します。




./image/entry/QBlog/20140915-1-04.png

これで完了です。

記事を投稿して、Twitterのツイートが記事に貼り付けられていることを確認してみてください。




アメブロに貼り付けたツイートのスマホでの見た目を改善する方法

さて、これでTwitterのツイートをアメブロの記事に貼り付けることができましたが、残念ながら、この貼付けはPC版アメブロのみで有効で、スマホ版では、次の画像のようにあまりにもシンプルすぎる表示になります。

./image/entry/QBlog/20140915-1-05.png

さすがにこれではツイートであることもわかりませんので、せめて囲みでもつけて、記事本文とは区別したいと思いませんか?

↓例えばこんなふうに。
./image/entry/QBlog/20140915-1-06.png

もしスマホでの表示をこのようにするには、上記のアメブロの記事へTwitterの貼り付けタグを貼り付けた時点で、もう少しだけタグを加工すれば可能です。

具体的には、貼り付けタグの最初のタグ

<blockquote class="twitter-tweet" lang="ja">

に、以下のようにスタイル(赤文字部分)を追加してやればOKです。

<blockquote style="margin:5px;padding:15px;border:1px solid #aaa;border-radius:10px;box-shadow:2px 2px 3px #ddd;" class="twitter-tweet" lang="ja">

以上、Twitterのツイートをアメブロの記事に貼り付ける方法と、スマホでの表示の改善方法をご紹介しました。

よかったらお試し下さい。

    最新の更新 RSS