簡単!Twitter・Facebook・Instagramの埋め込み方法

記事内に個別ツイッターを貼ったり、サイドバーなどにツイッターのタイムラインや、Facebook、Instagramを埋め込むのに、プラグインなどは必要ありません。

それぞれに用意されたウィジェットを使って簡単に作成でき、コードを取得しサイトに貼り付けるだけでOKです。

 


 

Instagram埋め込み

Instagramをサイドバーに埋め込む方法は以下をご覧ください。

簡単!Instagram埋め込みウィジェット プラグイン不要
WebサイトにTwitterのタイムラインやFacebookと同じように、Instagramを埋め込むための無料ツールのご紹介です。 追記 Insta Widget(インスタウィジェット)はサービス終了。 代替策は以下を Teitter・F...

 

YouTube埋め込み

YouTubeを埋め込む方法は以下をご覧ください。

簡単!ブログ・TwitterなどにYouTubeを埋め込む方法とレスポンシブ対応
YouTubeの動画は、自サイト内やTwitter、Facebookなどに簡単に埋め込む事が出来ます。非常に簡単なのでサクッと。 以下のように様々なサイトに「ワンクリック」で埋め込み可能です。 赤枠に囲った矢印を押すと更に表示されます。 例...

 

Twitterの埋め込み

ツイッターの機能や、用意されているウィジェットで簡単に行えます。

 

埋め込みやリンクをなどを行いたいツイートの右上の ∨ マークをクリックします。

 

記事などに個別ツイートを埋め込む

ツイートへのリンクをコピー

 

クリップボードにコピーされるので、そのまま記事内に貼り付けます。

 

表示結果

 

 

ツイートをサイトに埋め込む

 

表示されたコードをコピーし、記事内に貼り付けます。
表示結果

 

 

サイドバーなどにタイムラインを埋め込む

 

ウィジェットを作成する

publish.twitter.com

上記リンクからパブリッシュツイッターへ。

タイムラインを埋め込みたいツイッターURLを入力します。
【例】 https://twitter.com/ayaito11
矢印(→)ボタンを押します。

 

「Embedded Timeline(タイムライン埋め込み)」を選択します。

 

「set customization option(オプション設定)」をクリックします。

 

 

高さ、幅、言語を指定して「update」ボタンを押します。

※色などは好みでカスタマイズ

 

「Copy Code」ボタンを押し、コードをコピーします。

 

あとはサイト内のサイドバーなど、すきな場所へコードを貼り付ければ完了です。

WordPressなら出したい場所に「カスタムHTML」ウィジェットなどを追加してコードを貼付けです。

 

ツイッターボタンを貼る

publish.twitter.com

上記リンクからパブリッシュツイッターへ。

タイムラインを埋め込みたいツイッターURLを入力します。
【例】 https://twitter.com/ayaito11
矢印(→)ボタンを押します。

 

「Twitter Buttons」を選択します。

 

 

フォローボタンの場合

「Follow Button」を選択します。

 

 

「Copy Code」ボタンを押してコードをコピーします。

 

 

コピーしたコードをサイト内の好きな場所に貼ります。

 

表示結果

 

ツイートボタンの場合

 

「Mention Button」を選択します。

「Copy Code」ボタンを押してコードをコピーします。

 

 

コピーしたコードをサイト内の好きな場所に貼ります。

 

表示結果

 

 

プロフィールに固定表示する

サイト埋め込みとは関係ありませんが、ツイッターついでに。

自身のすべてのツイートの中から1つ、プロフィールに固定表示する事ができます。

 

 

既に固定ツイートがある場合は「変更します」と出ます。

 

 

表示結果

 

プロフィール下に「固定されたツイート」として表示されます。

 

 

固定表示解除もこの固定ツイートの 右上の ∨ マークで行えます。

 

 

 

 

 

Facebook埋め込み

 

ページプラグインをサイドバーなどに埋め込む

 

 

Facebook ページプラグイン

上記URLから簡単にウィジェット作成できます。

URL、幅、高さを指定します。

その他のオプションはお好みで設定します。

チェックを入れたり、外したりするたびに、下にプレビュー画面が表示されるので、どう表示されるかを見ながら選択できます。

下へスクロールすると、プレビューの下に「コードを取得」ボタンがあります。

 

あとはサイト内のサイドバーなど、すきな場所へコードを貼り付ければ完了です。

 

シェアボタンを貼る

シェアボタン

上記リンクから作成できます。

下へスクロールすると設定項目があります。

URLを入力し、デザインを選択し、「コードを取得」ボタンを押します。

 

アプリID、言語を選択し、コードを2つコピーします。

 

あとはサイト内のサイドバーなど、すきな場所へコードを貼り付ければ完了です。

 

その他のボタン等

ソーシャルプラグイン
上記リンクから、Facebookの様々なボタンなどを作成しコードを取得できます。

 

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています