【WordPress(ワードプレス)】ブログにTwitterのタイムライン・フォローボタン埋め込み方法

ブログからTwitterフォローしてもらえるようにしたいんだけどどうやってやるの?

ブログにTwitterのタイムラインを載せたい!!

WordPressでブログを運営しているとTwitterと連動させたい、Twitterのアカウントをサイトに埋め込みたいと思っていらっしゃる方は多いのではないでしょうか。

 

今回は、そんな方のためにブログへTwitterのアカウント・タイムラインを埋め込む方法を紹介していきます。

埋め込み用Twitterフォローボタンのコード発行方法

それでは、埋め込み用フォローボタンのコードを発行していきます。

 

https://publish.twitter.com/#」 へアクセスします。

 

検索枠が表示されますので、検索枠に自身のTwitterアカウントのURLを入力します。

 

※TwitterアカウントのURL確認方法は以下です。

Twitterにアクセスします。

https://twitter.com/

自身のアカウントの画像をクリックすると、URLの後半が自身のアカウントIDを追加したURLとなりますのでそのままコピーします。

(例)
https://twitter.com/あなたのTwitterID

 

自身のTwitterアカウントのURLをコピーしましたら、先ほどの検索枠にペーストし、「Enter」を押します。

 

すると、画面が下に移行し、アカウントボタンのコード発行かタイムラインのコード発行か選択を迫られますので右(Twitter Buttons)を選択します。

 

ボタンの種類が2つありますので好みのボタンデザインを選択します。

今回は、右のデザインを選択します。

 

コードが発行されますので「Copy Code」よりコードをコピーします。

フォローボタンの発行手順はこれにて完了です。

 

埋め込む方法は、以降で紹介していきますので合わせて確認してみてください。

埋め込み用Twitterタイムラインのコード発行方法

先ほどのアカウントボタンを発行した手順同様に「https://publish.twitter.com/#」 へアクセスします。

 

今回は、検索枠にTwitterのアカウントURLを入力後、左の「Embedded Timeline」を選択します。

すると、Twitterのタイムラインのコードが作成されます。

 

「Copy Code」をクリックして頂き、コードをコピーしてください。

 

※なお、タイムラインの表示サイズを変更したい場合、「set customization options.」よりサイズ変更することが可能です。

 

サイズは、自分の好みで設定してみてください。個人的には、400×250くらいが丁度いいかなと思います。

WordPress上へコードを埋め込む方法

埋め込み用のコードの発行が完了しましたので実際にサイトへコードを埋め込んでいきましょう。

 

埋め込みパターンとして、サイドバーに埋め込むことが多いと思いますので今回はサイドバーへの埋め込み方法を例に紹介します。

 

WordPress上へ移行します。

 

「外観」→「カスタマイズ」→「ウィジェット」より「サイドバーエリア」を選択します。

「ウィジェットを追加」より「テキスト」を選択します。

 

先ほど発行したアカウントボタンのコードもしくはタイムラインのコードをペーストします。

 

これでサイドバーエリア上にTwitterのフォローボタン&タイムラインが表示されるようになりました。

 

最後に ブログとTwitterを連動させてフォロワーを増やそう!!

いかがだったでしょうか。

今回は、Twitterのフォローボタンとタイムラインの埋め込み方法を紹介しました。

Twitterとブログ(サイト)を連動させることでアクセス数・収益アップにつながりますので是非試してみてはいかがでしょうか。

完全無料!!】未経験からエンジニアになりたい人向けのITスクールProEngineer

未経験からIT業界に転職したい

プログラマーになってフリーで活躍したい

エンジニアになりたいけどスクールに通うお金がない

安心・安全なスクールで学びたい

こんな希望を叶えてくれるのがProEngineer

◆特徴

全て無料(受講料、テキスト代等)

途中で辞めたとしてもOK

インフラ、プログラミング好きな方を選択できる(エンジニアカレッジ・プログラマカレッジ)

最短2ヵ月でエンジニアになれる

資格が取れる(条件付)

手厚い就職支援付き


 

ProEngineer(エンジニアカレッジ・プログラマカレッジ)の公式サイトはこちら

この記事がいいな!と思ったらフォローどうぞ!!