WordPressブログにTwitterを埋め込む方法【2018】Follow・Motionボタンの設まで

WordPressで作ったブログに、Twitterのタイムラインを埋め込む方法をく解説していきます(^^)!

とっても簡単で、10分もあれば設置完了します☆

【Twitter】複数アカウント取得方法・2018!切り替え方まで解説~

設定方法

設定は大きく分けると、Twitterコードを取得して、ブログの好きなところに貼り付ける作業になります。

まずは、Twitter URLが必要になります。

Twitter URLは【https://twitter.com/ユーザー名(@以降の部分)】になっているかと思いますが、分からない方は下記の手順から調べましょう。

コードの取得

下記Twitterボタンをクリックしてログインし、あなたのTwitter URLを調べます。

Twitter

■ 検索窓の横にある自分の顔のアイコンをクリック

 

⏬このような表示が出るので『設定とプライバシー』を選択

 

ユーザー情報の中から、ユーザー名の下にある『Twitter URL』をコピーします。

 

次に設定画面を開くため、下のボタンをクリック下ください⏬

https://publish.twitter.com/#

 

■ 【Enter a Twitter URL】の部分に先程コピーした自分のTwitter URLを貼り付け、【→】をクリック。

 

カスタマイズ

表示オプションが選択できるので、『埋め込みタイムライン』を選択。

※コードをコピーして貼り付ければよいのですが、このままではかなり長~い状態で表示されてしまうので、カスタマイズをしていきましょう!

 

■ 【カスタマイズオプションを設定する】をクリック。

※【Twitterボタン】の説明は後ほど(^^)!

 

 

カスタマイズを設定できる画面に移ります⏬

サイズ選択

①Height(px)縦の長さの設定

②Width(px)横の長さの設定

私の場合は、縦500✕横350に設定しています(^^)

 

色の選択

③ プルダウンメニューから『光』と『ダーク』が選択できます。

上『光』/下『ダーク』

 

 

④ リンク先URLの色を選択できます。

赤の部分の色を変える事ができます☆

 

 

⑤言語の選択ができます。

日本語、または自動でOKです。

 

最後に忘れず【更新】ボタンを選択しましょう。

【コードをコピーする】をクリックすると『コピーされました!』と案内がでます☆

 

ブログへ埋め込む

では、コードをブログへ埋め込みましょう!

あなたのブログの好きな場所に埋め込みます。

私の場合はサイドバーに表示しています。

 

その場合は

■ ウィジェット ⇒ テキストをサイドバーに移動 ⇒ テキストモードにコピーしたコードを貼り付ける ⇒ 保存

これでタイムラインの設置は完了です☆

これだけでも随分変化したと思いますが、最後にTwitterボタンも設置しては如何でしょうか(^^)!

 

Twitterボタンの設置

Twitterボタンとは私のブログでいうと、この部分です⏬

 

Followボタンの設置

あなたのTwitterをフォローするボタンの設置です。

コードをコピーしたページで、上部へスクロールすると『表示オプション画面』がありますね。次はTwitterrボタンを選択します。

 

【Followボタン】を選択すると、表示種類や大きさをカスタマイズできます。

カスタマイズが完了したら、【コードをコピーする】をクリックし、タイムライン同様、お好きな場所に貼り付けます。

私の場合はサイドバーのタイムラインの下に表示されていますね(^^)

タイムラインコードを設置した下に、今コピーしたコードを貼り付けます。

 

Motionボタンの設置

【Motionボタン】はあなたへTweetするボタンになります。

『Tweetテキスト』を入力すると定型文を入力する事ができ、アカウントの推薦も可能です。

カスタマイズ後は、これまで同様コードをコピーして好きなところに貼り付けましょう。

 

センタリング出来ない場合は⏬

<div align=center>この部分にコピーしたコード</div>

にすればOKです!!

お疲れ様でした!以上となります。

 

Instagramを表示したい方はコチラをどうぞ⏬

⇒WordPressにInstagramを埋め込む方法~プラグイン【Instagram Feed】のカスタマイズ詳細あり!

 

 

Rimのプロフィールはこちら

1 Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です