SNS間の連携について

https://creaone.jp/digital-marketing/sns-marketing/how-to-link-sns-and-service/#gsc.tab=0


Jetpack socila

Jetpack socialは月に30回のみ無料で使える

https://tohaz.com/jetpack-social-free-sharing/

https://rccrawlers.net/blog/jetpack-snap/

無料版は30回シェアに制限して、無制限で使いたい場合は有料版を使ってということですね。

今月は記事を12回投稿して、Facebook と Twitter に共有しているんで SNS への投稿が24回。さらに予約投稿を1回しておいたから26回シェアするところで今回のメールが届いたようです。

お金を払うほど Facebook と Twitter から人は集まっていないので無料範囲内での利用にします。

月が変わって更新

無料分を使い切った翌月、共有が2個増えました。予約投稿で SNS も自動更新できるのは便利です。

Jetpack ソーシャル 自動共有の解除方法

ダッシュボード左メニューの[Jetpack]内[設定]を押します。

上タブ[共有]内[Jetpack ソーシャル連携]の[投稿をソーシャルネットワークに自動共有]スイッチを切ると自動共有が解除できます。

Jetpack ソーシャル 自動共有の解除方法

投稿から自動共有の解除方法

投稿ページ右上の[Jetpack]を押します。

Jetpack メニューが開くので[この投稿を共有]を開いて[公開時に共有]スイッチを切ると自動共有が解除できます。

個別スイッチから SNS ごとの投稿を選択することも可能です。


Buffer

https://buffer.com/

ブラウザの管理画面からおこなう。無料プランは3つのSNSまで紐づけ可能。

https://ferret-plus.com/7933

New ChannelからSNSアカウントを紐づける

Publishing→Create postから投稿。各SNSのアカウントを選択して一括投稿可能。

記事を作って、各チャンネルから share Now ボタンをおすとそのチャンネルのSNS先へpostされる。

インスタとfacebook twitterの自動投稿連携

instagramから一括でtwitterとfacebookへ同時には投稿できない。

instagram→ twitter +facebook  ×
instagram → twitter ×
instagram → facebook 〇

twitter

イーロンマスクに買収されてからtwitterが他のアプリとの連携を停止しているので出来ないようだ

facebook

3:30~

※携帯からのみのうようだ PCでは出来ない

instagramのプロフィール画面から右上のバーガーメニュー→設定→アカウント→

他のアプリへのシェア→facebookを選ぶ→既存ページをリンク→リンクするfacebookページを選ぶ

【投稿時】
投稿する時にシェア先として上記で選んだfacebookページを選ぶことが出来るので選ぶとfacebookページ側にも投稿される。

【これで大丈夫!】 どうやってもfacebookにアイキャッチでogpが出力されない時! wordpress facebook

現段階では jetpackを使い、このやりかたでやっていく。

All in One SEOのソーシャルメディア機能は使わない!(facebookのogpが上手くいかないから。)

 

e-genjin-infoにて実装中

ishiura-informationにて実装中

 

プラグイン「All in One SEO」の設定とかでog:imageの設定をしてるとうまく反映されないので注意(マジで) All in one seoのソーシャルメディア機能ははずしておく

 

https://qiita.com/sola-msr/items/e73204bed06e9ab1da3a


下記の手順で行うと大丈夫。

まず、All in One SEOは使わないので、facebook for developersでアプリを作ったりアプリIDやユーザーIDを調べる必要がない。

 

※facebookページのページ名変更とtwitterのアカウント名変更は事前にしておいた方が良いとおもう。

①functions.phpへの記載

 

functions.php

//facebookとtwitterのOGP用

// URLからドメイン部分を削除したURLを返す
function delete_domain_from_url( $url ) {
if ( preg_match( ‘/^http(s)?:\/\/[^\/\s]+(.*)$/’, $url, $match ) ) {
$url = $match[2];
}
return $url;
}

 

②header.phpへの記述

header.php

head内に表記

<!–facebook用のOGP アイキャッチで表示–>
<?php if ( is_single() && has_post_thumbnail() ) : ?>
<!– 記事に設定されているアイキャッチ画像のOGP –>
<meta property=”og:image” content=”<?php echo home_url() . delete_domain_from_url(wp_get_attachment_image_src( get_post_thumbnail_id(), ‘full’ )[0]); ?>”>
<?php else : ?>
<!– デフォルトOGP –>
<meta property=”og:image” content=”https://e-genjin.jp/image/ogp.png“>
<?php endif; ?>

<!–twitter用のOGP アイキャッチで表示–>
<?php if ( is_single() && has_post_thumbnail() ) : ?>
<!– 記事に設定されているアイキャッチ画像のOGP –>
<meta name=”twitter:image” content=”<?php echo home_url() . delete_domain_from_url(wp_get_attachment_image_src( get_post_thumbnail_id(), ‘full’ )[0]); ?>”>
<?php else : ?>
<meta name=”twitter:image” content=”https://e-genjin.jp/image/ogp.png“>
<?php endif; ?>

※青い箇所はアイキャッチや投稿画像がない場合にデフォルトopg画像

<meta name=”twitter:card” content=”summary_large_image” />

<meta property=”og:title” content=”エネル原人 インフォメーション” />

※緑の箇所はtwitter用のカード設定とタイトル設定。これ表記するとアイキャッチがtwitterでも表示されるから必ず表記すること。なので↓の打ち消し線の状況を回避できる。

しかし、twitterにはデフォルトOGPが入らない。だからかならず投稿画像は入れてもらうようにした方がよい

※facebookへやアイキャッチからogpが挿入されたが、twitterには表示されなかった。twitterは投稿画像をアップするとそれがogpになった。facebookには投稿画像はogpにはならなかった。

 

 

以上これで下記の状態になる。↓

③表示結果

投稿画像→ twitterのみ
アイキャッチ→ facebookとtwitter
投稿画像なし アイキャッチなし → facebook  twitterにデフォルトOGP表示

 

 

【2020年版】Twitterカードとは?使い方と設定方法まとめ

 

 

 

OGPのサイズ

 

クライアントへのOGPのアイキャッチアップ方法のマニュアルはnew-ishiura/ドキュメント/インフォメーション編集方法.aiに記載

 

jetpackとの連携設定

 

SSL(https)化してないWordPressからFacebookに自動投稿したいなら「Jetpack」を使おう!

注意

admin以外のユーザーではfacebookへはpostが流れない。アカウントを別ユーザーでログインしてやろうとすると facebook共有箇所がでない。この投稿を共有かしょでアカウントに接続とでるが、wordpressCOMに接続になってしまう。わからない。多分ジェットパックを設定する何かと関連あるんだろうがわからない。

adminで対応してもらう。

 

twitter ビジネスアカウントとして共同管理

https://www.iscle.com/web-it/twitter-buisiness-account.html

Twitter では “個人アカウント” と “ビジネスアカウント(企業用アカウント)” という区別がありません。使用可能なメールアドレスか電話番号があれば、個人であろうと企業であろうと複数のアカウントを作成することができます。商用目的であっても利用料金のような費用はかかりません!

 

アカウント作成時、メールアドレスは必要となるが作ったIDとパスワードをビジネスアカウントとして共同で使ってもらったらよいと思う

Androidでoverflow autoが効かない対処

http://blog.majili.com/creative/unscrollable-bug-of-android/

 http://lab.informarc.co.jp/javascript/overflow_for_android.html

 

http://miso0nok.net/2014/03/web/android-2-3-scroll/

 

http://lv4.hateblo.jp/entry/2013/10/04/144345

 

http://yakinikunotare.boo.jp/orebase2/android_dev/display_iframe_on_android_browser

android2では出来ないみたい。ってゆうかわからない

twitterウィジェットのレスポンシブ

http://creatorclip.info/2014/03/social-service-responsive/

 

<div id=”twitterContainer”>
<a class=”twitter-timeline” width=”100%” height=”590″ href=”https://twitter.com/yogastudiounion” data-widget-id=”345815588221886464″>@yogastudiounion からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
</div>

 

■CSS

#twitterContainer {
float: none;
height: auto;
width: 100%;
margin-bottom: 20px;
}
#twitter-widget-0 {
width:100% !important;
}

 

 

 

twitterを埋め込むときの幅について

https://dev.twitter.com/ja/docs/embedded-timelines

カスタマイズ

現在設定画面で下記の2項目をカスタマイズできます。

  • 埋め込みタイムラインのテーマ(背景色)はライト、ダークのどちらかを選択できます。
  • 埋め込みタイムラインのリンクの色も指定できます。

埋め込みタイムラインをさらにカスタマイズするには、HTML側で下記の「サイズ」と「コード側で指定できるオプション」を参考に設定してください。

サイズ

埋め込みタイムラインは様々な高さや幅に合うように作られています。初期設定は520x600pxですが、サイト構成に合うようウィジェットのサイズが自動的に調整されます。例えばコードを幅300pxのdivに入れればタイムラインも自動的に幅300pxに調整されます。HTMLのwidthとheight属性で高さと幅を細かく設定することも可能です。

  1. <a class="twitter-timeline" width="300" height="500" href="https://twitter.com/TwitterDevJP" data-widget-id="YOUR-WIDGET-ID-HERE">@TwitterDevJP からのツイート</a>

タイムラインのサイズは幅最小180px、最大520px、高さは最小200pxです。

コード側で指定できるオプション

ウィジェット設定画面とは別に、埋め込み用のコードでカスタマイズできるオプションがあります。ウィジェット設定画面にもコード側でも設定できるオプションはコードの方が優先です。コード側での設定はすべて埋め込みコードにあるaタグの属性で設定できます。設定できるオプションは以下の通りです。

  • テーマ: data-theme="dark"またはdata-theme="light"
  • リンクの色: data-link-color="#cc0000"
  • 幅: 上記に書いてあった通りwidth属性で幅を設定できます(単位はpixels)
  • 高さ: 上記に書いてあった通りheight属性で高さを設定できます(単位はpixels)
  • インターフェース: data-chrome属性を使ってウィジェットのレイアウトやインターフェースをカスタマイズできます。スペース区切りで以下のオプションを指定してください。
    • noheader: タイムラインのヘッダーをなくします。自分のヘッダーを作る際、タイムラインのdisplay requirementsをご参照ください。
    • nofooter: タイムラインのフッターやツイートボックスをなくします。
    • noborders: ウィジェットの周りやツイートの間のボーダー(境界線)をなくします。
    • noscrollbar: タイムラインのスクロールバーが表示されないようにします。その影響でサイトのアクセシビリティが悪くなる場合があるので要注意です。
    • transparent: タイムラインの背景を透明にします。

    例えばdata-chrome="nofooter transparent"でフッターやツイートボックスのない透明背景タイムラインになります。

  • ボーダー(境界線)の色: data-border-color="#cc0000"
  • 言語: ウィジェットの言語はHTML上のlang属性から推測されます。埋め込みコードのlang属性でも設定できます。
  • ツイート数の固定: タイムラインのサイズを一定のツイート数に固定したい場合、data-tweet-limit="5"のようにツイート数(1から20まで)を指定してください。指定されている場合、そのツイート数が表示されて、ウィジェットの高さが全てのツイートがスクロールせずに見られるように調整されます。ウィジェットのサイズが固定になるので、ツイートが自動的に更新されません。
  • おすすめしたいユーザー: 返信、リツイート、お気に入り登録の際にユーザーにおすすめしたいユーザーを指定示できます。data-related="benward,endform"のようにユーザ名をコンマで区切りで指定してください。
  • ARIA politeness: ARIAは障害を持つ方のためのシステムです。詳細はこちら(英語)をご覧ください。埋め込みタイムラインの初期設定では最低限の設定となっています: aria-polite="polite"。埋め込みタイムラインをサイトの主なコンテンツソースとしている場合はdata-aria-polite="assertive"にすることをおすすめします。
  1. <a class="twitter-timeline" href="https://twitter.com/TwitterDevJP" data-widget-id="YOUR-WIDGET-ID-HERE" data-theme="dark" data-link-color="#cc0000" data-related="TwitterDevJP,twitter" data-aria-polite="assertive" width="300" height="500" lang="ja">@TwitterDevJP からのツイート</a>

インターフェースの表示を変更するその他の例を下記に掲載しています:

  1. <a class="twitter-timeline" href="https://twitter.com/TwitterDevJP" data-widget-id="YOUR-WIDGET-ID-HERE" data-chrome="nofooter noborders transparent" lang="ja">@TwitterDevJP からのツイート</a>

固定された3ツイートを表示したい場合:

  1. <a class="twitter-timeline" href="https://twitter.com/TwitterDevJP" data-widget-id="YOUR-WIDGET-ID-HERE" data-chrome="nofooter" data-tweet-limit="3" lang="ja">@TwitterDevJP からのツイート</a>

タイムライン選択

埋め込みタイムラインのウィジェットを使って、サイトにいろいろなタイムラインを表示することができます。例えば、SNSでユーザーのプロフィールページにそのユーザーのタイムラインを表示したり、ブログの各記事に作者のタイムラインを表示することができます。

まず、普段通り埋め込みタイムラインのウィジェットを設定してください。ウィジェット作成後、以下の属性を使って表示するページごとに設定を変えることができます:

  • ユーザー: data-screen-name属性、またはdata-user-id属性を使って、表示したいユーザーを指定できます。data-show-replies="true"を使って@ツイートを表示するかどうかも指定できます。
  • お気に入り: ユーザータイムラインと同様、data-favorites-screen-name属性、またはdata-favorites-user-id属性を使って、誰のお気に入りタイムラインを表示するかを指定できます。
  • リスト: data-list-owner-screen-name属性またはdata-list-owner-id属性を使ってリストの所有者、そして、data-list-id 属性またはdata-list-slug属性を使ってリストの識別子を指定できます。

万が一、ウィジェットが一時的に使用できなくなった時のために、埋め込みコードのhrefを変更した設定に合わせておいてください。

現状、検索クエリをページごとに変えることはできません。

例えばユーザーの最新のツイートを記事の横に表示したい場合、次のようにして特定のユーザーのタイムラインを表示することができます:

<a class="twitter-timeline" href="https://twitter.com/tatiana"
   data-widget-id="YOUR-WIDGET-ID-HERE"
   data-screen-name="tatiana" data-show-replies="false"
   data-tweet-limit="5">@tatiana からのツイート</a>

特定のリストタイムラインを表示する例:

<a class="twitter-timeline" href="https://twitter.com/brianellin/platform-products"
   data-widget-id="YOUR-WIDGET-ID-HERE"
   data-list-owner-screen-name="brianellin" data-list-slug="platform-products">
   Twitter platform team からのツイート.
</a>

モバイル

Twitter for Websitesの他の機能と同様に、埋め込みタイムラインはモバイルブラウザにも最適です。

  • ほとんどのスマートフォンのブラウザに対応しています。
  • 画面はタッチスクリーン対応です。
  • 高画質なディスプレイにも最適化されます。
  • モバイルに対応しているウェブインテントを使用しています。
  • モバイルデバイスには自動で変換されるためコードを書き換える必要はありません。

制限

埋め込みタイムラインは通常のTwitter API制限を受けず、サイトへのトラフィックや閲覧者の増加につれ自動的に調整されます。Twitterウィジェットを使用することにより、Twitterの Developer Rules of the Road に同意したとみなされます。

なお、旧TwitterウィジェットはAPI version 1.0のサポート終了とともに使用できなくなります。

 

 

twitterの返信表示について

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11109717971

 

Twitterの仕組みについてやや誤解されてるようなので解説します。

まず貴方がいつもメインに見ている画面「ホーム」画面(またはTLとも)で表示されるものは

・あなたがつぶやいたもの(あなたが誰かに送った返信も含む)
・あなたがリツイートをしたもの
・あなたがフォローしている人がつぶやいたもの(あなた宛への返信も含む)
・あなたがフォローしてりう人がリツイートしたもの

という構成になっています。

一方、ある人の「プロフィール画面」(アカウント画面とも)で表示されるものは
・その人がつぶやいたもの(他の誰か宛に書いた返信も含む)
・その人がリツイートしたもの

だけで構成されています。したがって、あなたが相手に返信したものが方のプロフィール画面では表示されていないのは正常な状態です。