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

2019-02-11OtherSNS, プラグイン不要

 

 

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

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

 

Instagram埋め込み

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

 

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の様々なボタンなどを作成しコードを取得できます。