Twitterで作ったプロフィールをブログやホームページに埋め込む方法

Twitterのプロフィールをホームページに貼る方法




Twitterで作ったプロフィールをブログやホームページに埋め込む方法です。

ツイッタープロフィール部分のブロックを抽出すればプロフィール自体を埋め込むことも可能だと思うのですが、今回は「埋め込みツイート」という方法で、Twitterで作ったプロフィールページを作りウェブサイトに貼る方法をご紹介します。

 

埋め込みが出来ると、リツイートやお気に入り登録の件数などもリアルタイムで貼り付けたページ上で表示されます。フォロー、返信、リツイート、お気に入り登録もページ上で直接行うことができます。

 

動画と一緒にご覧いただくことでスムーズに作業を進めていただけると思います。

 

 

 

 

 

 

Twitterで作ったプロフィールを貼るとこんな感じになります。

http://evahks.com/about/

に実際に貼り付けてプロフィールとして運用しています。(2016年2月14日現在)

 

 

 

 

 

Twitterで作ったプロフィールページをウェブサイトに貼る方法

 

①Twitterで自分のアカウントをひらいてツイートを作成

自分のアカウントを開いたら「ツイート」をクリックして、プロフィールに入れたい文章や写真を入れてツイートします。

ツイートに写真と文章を入れると、上の埋め込み画像のようになります。URLリンクも書くことができます。写真の他にも動画や概要などのメディアも追加できます。自分のプロフィールにぴったりのマルチメディアを作ろう!

 

Twitterに投稿する画像の推奨サイズ

縦横比が横2:縦1(1,024 x 512pxなど)

推奨される画像サイズは長辺1,024ピクセルです。横長 (4:3、3:2、16:9など)、正方形 (1:1)、縦長 (3:4、8:10など) のすべての写真にこのサイズが適用されます。アップロードできるファイルサイズは3MBまでです。/引用元:写真、動画、リンクの追加方法 | Media

スマートフォンで見ると「横2:縦1」だと画像の両端が表示されないので、注意してください。

 

 

 

②「ツイートをサイトに埋め込む」を選択

Twitterプロフィールページを埋め込む方法

「・・・」をクリックしたら、「ツイートをサイトに埋め込む」を選択します。出てきたソースコードをコピーします。コピーしたら、プロフィールを貼り付けたいサイトの移動します。

 

 

 

③ウェブサイトにソースコードを貼り付ける

先ほどコピーしたソースコードを、貼り付けたいサイトのページにHTML表示で記述します。

 

WordPressの場合
ビジュアルエディタではなく、テキストエディタに切り替えてから貼り付けます。コードを貼ったら、プレビューで貼れているかチェックしてみましょう。ツイートが表示されていたら成功です。

WordPressの場合、ツイートのURLをコピーして投稿に1行貼り付けるだけでも埋め込むことができます。埋め込みコードの挿入やツイートの表示といった必要な作業はWordPress側で処理されるようです。

 

 

 

埋め込みツイートの幅と高さ調整、配置、色の変更方法

 

幅と高さの調整

埋め込みツイートの高さは、ツイートの内容によって変化します。

埋め込みコードにwidth属性を追加することで、埋め込みツイートの初期設定の幅を上書きできます。

埋め込みツイートの幅は初期設定で500ピクセルですが、入っているページのセクションが幅狭い場合は、セクションに合わせて調整されます。

 

配置

ツイートの配置は、埋め込みコードのblockquote要素のalign属性を使って手動で設定できます。align="left"align="right"、またはalign="center"を追加することで、埋め込みツイートの位置を決定できます

 

 

テーマと色の変更方法

2つの方法があります。

 

⑴ data-link-color属性を使ってリンクの色を上書きします

(例: data-link-color="#ccbbcc")

 

 

⑵ <meta>タグを使うことで、埋め込みツイートと埋め込みタイムライン全ての色とテーマを一括で設定できます。

 

 




よく読まれている記事

Twitterのプロフィールをホームページに貼る方法

コメントを残す

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