【Wordpress】TwitterやInstagramウィジェットをワードプレスに埋め込む方法 Part.1「Twitter編」
Wordpressでブログを始めた or やってる方、
「ブログとSNSをうまく連携させたい」
今の時代の当然の願望ですよね。
ちょっと前、生徒さんでWordpressにTwitterのツイートやInstagramの写真なんかを埋め込みたいという方がいたのでご案内しました。
すごく簡単ですが一応記事にして少し解説しておきます。
WordpressではなくHTMLが埋め込めるブログツールであればはてなブログ等でも応用効くので是非ご参考ください。
Twitterタイムラインをサイトに埋め込む方法
Wordpressにはウィジェットというサイドバーやヘッダー/フッターなど色んな場所に任意のパーツを配置できる機能があります。
このウィジェットにまずはTwitterの最新ツィートウィジェットを埋め込んでみましょう。
↓実は公式でウィジェット提供されていてヘルプに詳しく掲載しています
- https://publish.twitter.com/に移動します。
- 埋め込みたいタイムラインまたはモーメントのリンクを入力します。
- ウェブサイトに合った高さやテーマ（明るいか暗いか）を指定して、デザインをカスタマイズします。
- コードをコピーし、自分のウェブサイトのHTML上で、タイムラインを表示したい場所にペーストします。
- これで完了です。
公式の手順通りで簡単に出来ちゃいます。
↑このページで以下のような入力画面になるので、埋め込みたいツィッターのタイムラインのURLを入力します。通常自分のツィートのタイムラインであれば赤枠の部分にアカウントの＠○○○○○のアットマーク以降を入力してみてください。
すると画面がスーッと下に移動してタイムラインの埋め込みかボタンの埋め込みかを尋ねられます。
タイムラインであれば左をクリックして選択します。
そうするともうウィジェットが完成！プレビューが表示されます。
ここで「set customization options.」をクリックすると幅や高さ、見た目の色の調整なんかが出来ます。
問題なければそのまま表示されているコードをコピーしましょう。
あとはWordpressの場合は管理画面へログインして
メニュー「外観＞ウィジェット」の画面から
カスタムHTMLのウィジェットを任意の場所に追加しましょう。
カスタムHTMLのウィジェットの内容にHTMLコードを直接入力できるので、先ほどコピーしたコードを貼り付けて保存を押せば完成！
モザイクかけてなんのこっちゃわからなかったので公式Twitterアカウントさんのタイムラインを張り付けてみました。
うまくサイドバーに表示されてますね！
Wordpress以外の方でもコピーしたコードを任意の表示箇所へHTMLとして貼り付けられれば埋め込めると思います。是非お試しあれ。
次はInstagramも実装してみたいと思います。
リンク
リンク
