はてなブログでtwitterをサイドバーや記事内に埋め込む方法
こんにちは、てつです。今日は、はてなブログ×twitterについての記事を。
はてなブログでtwitterのタイムラインが表示されているブログや、記事内にツイートが埋め込まれているブログを見かけたことはありませんか？
今回は、はてなブログとtwitterを上手に組み合わせる方法について解説したいと思います。
紹介する内容は、
- はてなブログのサイドバーにtwitterのタイムラインを表示する方法
- はてなブログの記事内にツイートを埋め込む方法
- はてなブログで記事公開と同時にtwitterに自動投稿する方法
この3つを紹介していきます。
ブログ用のtwitterアカウントを開設しているけど、イマイチ連携できていないという人は参考にしてみてください。
はてなブログのサイドバーにtwitterのタイムラインを埋め込む
それではまず、はてなブログのサイドバーにタイムラインを埋め込む方法から。
今回、前提条件としてすでにtwitterアカウントを開設しているものと仮定します。
色々な方法があるみたいですが、今回はシンプルな方法を紹介していきます。
それではさっそく、下記twitterの公式サイトにアクセスします。
https://twitter.com/settings/widgets/new/user
パソコンでログインをしていない人は、ログイン画面が
すでにログインしている人なら下記画面が表示されると思います。
URLは自分が使っているtwitterのアカウントURLが自動で挿入されていると思います。
もし、入力されていない人は手動で入力してください。
https://twitter.com/@マーク以下の英字
となります。twitterの画面でいうと、下記画像の部分ですね。
次に画面下にスクロールし、左側のEmbedded Timelineを選択します。
copy codeをクリックしコードをコピペします、、、が！！
このままのコードだとたくさんのツイートが反映されており、縦長なタイムラインがそのまま挿入されてしまいます。
気にしない人はOKですが、ある程度縦幅や横幅などデザインを調整したい方はここで少しカスタマイズしましょう。
copy code上にある、set custimzation optionsをクリックします。
ここで縦幅や横幅などが調整することができます。ここは各ブログのスタイルに合わせて調整してみてください。
自分は縦幅700 横幅280で調整してみました。
値を入力したらupdateをクリックします。
はてなブログ側のサイドバーに反映させる
次にコピペしたコードをそのままはてなブログのサイドバーウィジェットに配置します。
サイドバーにウィジェットを追加する方法は、
管理画面のデザイン＞カスタマイズ＞サイドバーに遷移します。
サイドバーの下側にある『+モジュールを追加』を選択し、HTMLを選択後コードをコピペします。適用ボタンを忘れずにクリック。
すると、こんな感じでTwitterのタイムラインがサイドバーに挿入されます。
もちろん本文でも使えます。
はてなブログ記事内に特定のツイートを埋め込む
次に特定のツイートをはてなブログ内に埋め込む方法を。
グルメブロガーや旅ブロガーの人などは旅先でツイートした内容をそのまま記事に使えますね。
まず自分のTwitter画面にアクセスします。過去のツイートの中から任意のものを選択し、ツイート下部にある『…』＞ツイートをサイトに埋め込むをクリックします。
するとソースコードが表示されるので、これをコピペしそのまま記事内に貼り付けます。※貼り付ける際はHTML編集から貼り付けてください。
味噌ラーメンを食す
— てつ@mutant (@mutant_tetsu) 2016年6月20日
午後もがんばろ pic.twitter.com/vke3fTMGC9
するとこんな感じでツイートが埋め込まれました。自分で確認する時はプレビューから確認するとチェックできます。
今回は自分のツイートを埋め込みましたが、他ユーザーのツイートも同じ方法で埋め込むことができます。ただ、もめる原因にもなるので他人のツイートを埋め込む場合は許可取りましょうね！
はてなブログの記事公開と同時にtwitterに自動投稿する
これは多分知っている人がほとんどだと思いますが、一応念のため。
はてなブログの記事公開と同時にTwitterに自動投稿する方法です。方法と言ってもとても簡単です。
記事作成画面の右側にある歯車アイコン(編集オプション)から予約投稿をし、矢印のある箇所にチェックを入れるだけです。
『指定日時で予約投稿する』にチェックを入れると、『公開と同時にシェアする』が表示されます。
なお、「はてなブログに投稿しました」の文言は自由に変更することも可能です。
まとめ
いかがでしたでしょうか。
はてなブログのサイドバーや記事内にTwitterを表示させる方法を紹介しました。
Twitterを全然使いこなせてない自分が言うのも何ですが、フォロワーさんが増えるとsnsからの流入も多くなってきます。
何よりsnsと連携させて他のブロガーさんと交流できるのもブログの醍醐味かなと思います。
先でインスタグラムをサイドバーに挿入する方法とかも紹介できたらなと思います。それでは今日はこの辺で。
おすすめ記事
