こんにちは、
氷河期世代クリエイターのYOHEIです。
前回の記事ではワードプレスブログのアクセス数アップに欠かせないTwitterの始め方を紹介しましたが、今回はさらに連携度をアップさせるために、Twitterタイムラインの埋め込み方法についてわかりやすく紹介します。
Twitterは始めたけど、ブログにどうやってTwitterを埋め込むのかわからず悩んでいる方は、是非記事をご覧ください！
本記事では、こういったワードプレス初心者のお悩み解決に役立つ情報として、ブログのアクセス数アップに欠かせないTwitterの埋め込み方法についてYOHEIの実体験をもとに紹介します。
【本記事の埋め込み方法について】
ブログサイトにTwitterタイムラインを埋め込みする方法はいろいろあり、JavaScriptやHTMLを利用できるブログやウェブサイトであれば表示することができます。本ブログサイトYOHEI LOGでは、ワードプレスのテーマにAFFINGER5（アフィンガー5）を使用してTwitterを埋め込み（設置）しています。Twitterの埋め込み方法はお使いのテーマ等によって異なります。
なので本記事ではAFFINGER5（アフィンガー5）を使用した内容となっていますが、違うテーマをご使用の場合は参考にしていただけたらと思います。
ちなみにワードプレステーマAFFINGER5（アフィンガー5）は「稼ぐ」に特化したアフィリエイトテーマで、初心者でも使いやすいのでおすすめです。興味がある方はこちらの記事で紹介していますので、ぜひ記事をご覧ください。
-
-
初心者できた!ワードプレスブログ始め方Step4【テーマインストール編】
こんにちは、 氷河期世代クリエイターのYOHEIです。 前回にひきつづき、 初心者できた!ワードプレスブログ始め方Step4【テーマインストール編】です。 （全9回に分けて解説しています） 今回は、前 ...
続きを見る
本記事の内容
もくじ
本記事の信頼性
この記事を書いている私は、広告・デザイン業界歴20年ほどです。
ワードプレスブログ初心者の方に、本ブログのTwitter運用を実体験をもとにできるだけわかりやすく紹介したいと思います。少なくとも本ブログと同じように運営することは可能です。
ブログを始めたけどTwitterと連携して運営していない方は、是非記事を参考にトライしてみてください。
（・o・）/
先に本記事の結論です。
AFFINGER5だとTwitterをブログに埋め込みするのは超簡単！
1. ワードプレスブログにTwitterを埋め込みすることは効果的な運用に必要？
結論：ブログとTwitterをより効果的に連携させるために埋め込みしましょう！
今回は、前回記事で紹介した内容からさらにブログとTwitterを効果的に運用するために、ブログサイトにTwitterを埋め込み連携度をアップさせます。
前回はブログの運用にTwitterを連携させるメリットとして
● Twitter経由で読者が増える（Twitterプロフィールに記載のブログURLからアクセス）
ブログサイトを知らない人が、Twitter経由でブログを知り読者になることもあります。
● ブログサイト以外の窓口ができる
ブログサイトを知られていなくてもTwitter経由でお問い合わせや仕事の依頼が来ることもあるので、ブログサイト運営だけより縁が広がる可能性があります。
と紹介しました。
ちなみに前回の記事は、こちらをご覧ください。
-
-
ワードプレスブログするならTwitterもセットで!【始め方手順】
こんにちは、 氷河期世代クリエイターのYOHEIです。 今回はワードプレスブログのアクセス数アップに欠かせないTwitterの始め方について、わかりやすく紹介します。 ブログを始めて一段落し、次のステ ...
続きを見る
ではブログにTwitterを埋め込みすることで、さらにどんなメリットがあるかというと
Twitter埋め込みのメリット
● Twitterをブログサイトに埋め込みすることで、ブログサイトとしての完成度がアップする
Twitterという別の情報源が加わるので、必然的にブログサイトの内容も充実することになります。
● ブログ記事の投稿以外の情報をブログサイトで簡単かつタイムリーに発信できる
ちょっとした情報や今すぐ発信したいことをTwitterでツイートし、ブログサイトに表示させることができます。
● Twitterユーザの生の声がブログサイトにも表示でき、客観性・信憑性がアップする
他者のツイートを表示させたり自分のいいねが多いツイートを表示させることで、記事に客観性を持たせたり、信憑性をアピールすることができます。また信頼性の高い人のツイートを引用し、サイトに表示させることも簡単にできます。
● ブログサイトの滞在時間が伸びる
当然ブログにTwitterという情報が増える分、ユーザーのサイト滞在時間が増える可能性がアップします。
Twitter埋め込みのデメリット
● ブログサイトが重くなる
当然ブログにTwitterという情報が増える分、サイトの読み込み速度が遅くなる可能性があります。タイムラインの表示サイズを必要以上に大きくしないことが望ましいです。
● 著作権に気をつける
Twitterは全世界に閲覧が承諾されていますが、著名人のアカウントなどで無断転載NGと明記されている場合もあります。どうしても転載したい場合は、事前に確認して転載するようにしましょう。
ということで、Twitterを埋め込みするメリット・デメリットをまとめると
Twitter埋め込みメリット
・Twitterをブログサイトに埋め込みすることで、ブログサイトとしての完成度がアップする
・ブログ記事の投稿以外の情報をブログサイトでも簡単かつタイムリーに発信できる
・Twitterユーザの生の声がブログサイトにも表示でき、客観性・信憑性がアップする
・ブログサイトのユーザー滞在時間が伸びる
Twitter埋め込みデメリット
・ブログサイトが重くなる
・著作権に気をつける
デメリットも少しありますがメリットを考えたら、Twitterの埋め込みをしない手はないですね。
では具体的な埋め込み方法を見てみましょう！
2. AFFINGER5の「Twitter」埋め込み方法【ワードプレスブログと連携】
結論：Twitterの埋め込み手順はたった2ステップ
Step1. TwitterパブリッシュサイトでHTMLコード作成
Step2. AFFINGER5のウィジェットにHTMLコードをペーストする
では詳しく見てみましょう！
Step1. TwitterパブリッシュサイトでHTMLコード作成
まず、Twitterのパブリッシュサイトにアクセスします。
What would you like to embed?（何を埋め込みたいですか？）と表示されいるので、ご自身のTwitterアカウントURLを入力します。
「https://twitter.com/●●●●」を入力。
次の画面では「Twiterタイムライン」か「Twitterボタン」のどちらを埋め込みするのか聞いてくるので、左のタイムライン表示を選択します。
すると、埋め込み用のHTMLコードが表示されます。
このままHTMLコードをコピーする前に、タイムラインのサイズ・表示を調整します。
コードの上に記載の「set customization options」をクリックします。
すると、
・ Twitterタイムラインの縦・横のサイズ
・ 背景色
・ 表示言語
を入力・選択する画面が表示されます。
本サイトYOHEI LOG の場合、縦のサイズは 480px にしていますが、ご自身のサイトに合わせて見やすい長さに調整ください。横はデフォルト（そのまま）でOKです。
背景色は「Light（白）」か「Dark（黒）」のどちらかをサイトに合わせて選べます。
YOHEI LOGは全体的に白色基調なので、黒にするとTwitterがページ内で目立ちすぎバランスが悪くなります。なので「Light（白）」にしています。画像は黒にした見え方です。ご自身のサイトデザインや好みに合わせて選択してください。
言語はデフォルトの「Automatic」で問題ありませんが、表示させたい言語がある場合はプルダウンメニューから選択ください。
最後に「Update」ボタンをクリック。一つ前の画面に戻り、調整されたタイムラインのHTMLコードが表示されます。
「Copy Code」をクリック。HTMLコードがコピーされます。
↓
Step2. AFFINGER5のウィジェットにHTMLコードをペーストする
コピーしたHTMLコードをブログサイトにペーストして埋め込みます。
ワードプレスの左メニュー「外観」→「ウィジェット」をクリックします。
Twitterタイムラインをサイドバーに埋め込みするので、ウィジェット画面左列の「利用できるウィジェット」の「カスタムHTML」を右側の「サイドバーウィジェット」にドラッグします。
ドラッグしたカスタムHTMLにタイトルを付け（ここではTwitter）、前のステップでコピーしたHTMLコードをペーストして保存します。
ブログサイトのトップページを表示し、うまく埋め込みできているか確認してみましょう。
確認してタイムラインの表示サイズを変更したい場合は、Twitterパブリッシュで調整し直し、HTMLコードを再制作してください。再制作したコードをワードプレスにペーストすれば、表示が変更されます。
Twitterフォローボタンの埋め込みカスタマイズ
ブログ読者にTwitterアカウントをフォローしてもらいやすくするために、フォローボタンを埋め込みします。
フォローボタンの埋め込みコードを作成するために、Twitterのパブリッシュサイトにアクセスします。
ご自身のTwitterアカウントURLを入力します。次に右側の「Twitter Buttons」を選びクリックします。
次にTwitterボタン内の表示内容を選びます。
・「Follow」 → 「＠●●●●さんをフォロー」となります。
・「＠Mention」 → 「＠●●●●さんへツイートする」となります。
YOHEI LOGでは左側の「Follow」ボタンを使用しています。
このままでも良いですが、もう一段階カスタマイズします。
コードの上に記載の「set customization options」をクリックします。
カスタマイズ画面が表示されます。
・Hide Username : ユーザーネームの非表示
・Large Button : ボタンを大きいタイプにする
・What language would you like to display this in? : 表示言語
3項目を選択する画面が表示されます。
ユーザーネームの非表示の「Hide Username」にチェックを入れると「＠●●●●さんをフォロー」 → 「フォローする」という表示のボタンになります。
ボタンサイズでは「Large Button」にチェックを入れると表示されるフォローボタンが大きくなります。
画像はユーザーネームの表示・非表示とボタンサイズの比較のために、ボタンを二つ並べています。
言語はデフォルトで基本OKです。最後に「Update」ボタンをクリック。一つ前の画面に戻り、調整されたフォローボタンのHTMLコードが表示されます。
「Copy Code」をクリック。HTMLコードがコピーされます。
タイムラインの埋め込みと同様に、ワードプレスの表示させたいウィジェットにHTMLコードをペーストします。
YOHEI LOGではTwitterタイムラインのすぐ下に表示させるために、先ほどペーストしたタイムラインのHTMLコードに続けてペーストしています。
保存してブログサイトのトップページを確認してみましょう。
Twitterタイムラインの下にフォローボタンが表示されていますね。
3. Twitterをブログに埋め込みすることで連携度がアップし、より効果的に運用できます！
今回はワードプレスブログとセットで活用すべき、Twitterのブログサイトへの埋め込み方法を紹介させていただきました。
Twitterはブログのアクセス数をアップさせるために欠かせません。
そしてTwitterとブログを効果的に運用していくために、ブログサイトにTwitterを埋め込むことも欠かせません。
Twitterを始めることも、Twitterをブログサイトに埋め込みすることも、とっても簡単なので、ブログを運営していてTwitterを使っていない方は試してみることをおすすめします！
今回の記事は以上です。
最後に今回の内容をおさらいしましょう！
次回はブログ記事のツイートに欠かせない、AFFINGER5の「Twitterカード」機能を紹介します。
Do it! ではでは。
（・o・）/
本ブログサイトでは、これからもワードプレスブログに役立つ情報や、デザイン・キャッチコピーなどのクリエイティブに関することをたくさん発信していきたいと思っていますので、応援よろしくお願いします！
《人気関連記事》ワードプレスブログのグーグルアドセンス始め方【登録～開始の4手順】
《人気関連記事》転職スカウトサービス登録はコロナ時代のマストスキル【おすすめ転職サイト15選】
《人気関連記事》稼いで身軽に！ヤフオク!のすぐできる出品方法【初心者向】