こんばんは！よつ葉です。
はてなブログのサイドバーや記事内にTwitterのタイムラインが埋め込まれている記事を見かけた事はありませんか？
何を隠そう（隠してないけど）、私のこのブログのサイドバーにも埋め込んでいます。
私も導入する際は先人の方々の記事を参考に埋め込んだのですが、実際やった時にTwitterの仕様が変わっていて皆さんの記事通りにいかず戸惑いました。
そこで今回は2017最新版！Twitterをブログへ埋め込む方法をご紹介したいと思います。
ブログ用のTwitterアカウントを持っている方はぜひ参考にしてみてください。
サイドバーへTwitterを埋め込む方法
1.Twitter側の手順
まずTwitterにアクセスします。
自分のアイコンをクリックし、設定とプライバシーをクリック。
次に左メニューのウィジェットをクリック。
真ん中にウィジェットメニューが出てきますので、新規作成→リストをクリック。
急に全英語のブルー画面が出てきますので、Enter a Twitter URLというところに自分のユーザー名を入力し、Enterを押す。
例えば私よつ葉の場合は、@fourleaf14125と入れます。
Embedded Timelineをクリック。
これで以下のプレビューの形で一旦完成です。
(ちょうど星野源のおげんさんといっしょを見ながらツイートした内容が見えてますね。笑)
Copy Codeをクリックしてコードをコピーしブログへ貼り付けても良いのですが、このデフォルトのままだと、ものすごーく縦長のタイムラインがそのまま表示されてしまいますので、もうひと手間加えましょう。
set customization optionsをクリック。
オプションの画面が出てきますので、Height(縦の長さ)とWidth(横の幅)に数字を入れて調整します。
ここは皆さんブログの形式が違いますのでそれぞれと思いますので、自分のブログにあったサイズにしましょう。
あと他の項目についてはお好みで使ってみてください。
ちなみに私はHeightを1000、Widthを300とし、それ以外の項目は触っていません。
設定後、Updateをクリック。
スリムになったTimelineが出てきたと思います。
これで良ければ、Copy Codeをクリック。
これでTwitter側の手順は完了です。続いてはてなブログへ組み込みます。
2.はてなブログ側の手順
はてなブログの管理画面の左側メニュー内にあるデザインをクリック。
左側メニュー内の設定マークをクリックし、サイドバーをクリック、モジュールの追加をクリック。
出てきたウィンドウ左側のHTMLをクリック、右側に入力欄が出てきますので、
上に好きなモジュール名を入力、下へ先ほどTwitter手順でコピーしたコードを貼り付けます。
そして適用をクリック。
これで無事サイドバーに設置完了！！
記事内へTwitterを埋め込む方法
これは比較的簡単です。
まず先程の『サイドバーへTwitterを埋め込む方法』の1.Twitter側の手順でコードを取得し、記事作成画面で編集メニューをHTML編集にして任意のところで貼り付けるだけ。
↓↓↓以下のようになります↓↓↓
まとめ
いかがだったでしょうか。
Twitterも上手に活用する事ではてなブログ⇔Twitterの相互アクセスアップにつながります。
アクセス数は記事を書く上での大きな大きなモチベーションになりますから、アクセス数が増えるのは嬉しいですよね。
みなさんもぜひ試してみてください。
さいごに
読者登録していただけると励みになりますのでよろしければ・・・(*^-^*)(笑)
以上、よつ葉でした。
