トップページ > 記事閲覧
【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2018/11/16(Fri) 23:04
投稿者 Yujiro
参照先
facebookにHAIKページのURLを投稿すると、そのページの冒頭画像がfacebookページに表示される。

その画像は・・・

1)アイキャッチのバックグランド画像
2)それがない場合はとにかくページで最初に現れる画像

すると、これらの画像はfacebookへの投稿を念頭に置いてデザインされるべき。

ところが、ページデザインと投稿用画像がデザイン的に両立しないことがある。

そこで結論としては Open Graph Protocol タグを #beforescript で強制的に書けば
自由に画像を指定できる。

必要なHAIKページの冒頭に以下を挿入

#beforescript{{
<meta property="og:image" content="facebookに表示したい画像のURL" />
}}

ただし、これを書くことはページのソース上では property="og:image"の二重定義になる。
(HAIK設定>ソーシャル連携>Open Graph Protocol タグを有効にする(ON)のとき)

これだと、自分で書き込んだ#beforescriptの内容が先に来て、規定値のオリジナル状態の物が後に来ることに
なっている。

どうやらfacebook側では先に定義された property="og:image を優先して取るようだ。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2019/05/20(Mon) 00:33
投稿者 Yujiro
参照先
うみほしさん

情報ありがとうございます。

このあたりのこと、諸条件はどうでしょう?

例えば、HAIK側で・・・

テーマ編集の中でのアイキャッチ設定有無
各ページ専用の#eyecatch使用の有無

なお、私が提示している#beforescriptは、どのような画像でもそのURLを書けば
facebookの投稿にその画像をサムネールとして表示できると言うもの。投稿したい該
当ページ内にその画僧が貼り付けられている必要すらありません。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2019/05/19(Sun) 18:06
投稿者 うみほし
参照先 https://umihoshi.com
最近Facebookの仕様変更があったようです。
昨日,#beforescriptの記述のないブログのリンクをFacebookに貼り付けたところ,サムネイル画像が選べるようになっていました。
もちろん一発でサムネイルを拾ってくれないことも多いのですが,「画像を選べる」というのは大幅な進歩ですね。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2019/01/09(Wed) 21:31
投稿者 Yujiro
参照先
トントンさん、詳細情報ありがとうございます。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2019/01/09(Wed) 15:49
投稿者 トントン
参照先 https://kimono.tontonhouse.com/
【続き】

流れで投稿してしまいましたが、別のスレッドを立てるべきでしたね。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2019/01/09(Wed) 15:46
投稿者 トントン
参照先 https://kimono.tontonhouse.com/
【続き】

1の"カード種類"は"summary"(QBlogのリスト表示のようなカード)または"summary_large_image"(QBlogのサムネイル表示のようなカード)のどちらかを記入
2の"@ユーザー名"はツイッターのアカウント名
1,2を"設定 > サイト情報の設定 > その他のタグ"に書き込みます。



これで設定完了です。TwitterでURLを書き込むと、自動でTwitterカードが挿入されます。

IFTTTやdlvr.itなどの自動連携ツールを使えば、QBlogの更新を自動でTwitterにカード付きで投稿できるようになりました。
https://twitter.com/kiyomi_tonton

情報ありがとうございます。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2019/01/09(Wed) 15:44
投稿者 トントン
参照先 https://kimono.tontonhouse.com/
Twitterを検証しました。Twitterカードを使用する方法もできましたので、ご報告です。

【必要なheadタグ】
1.<meta name="twitter:card" content="カード種類" />
2.<meta name="twitter:site" content="@ユーザー名" />
3.<meta property="og:url" content="記事のURL" />
4.<meta property="og:title" content="記事のタイトル" />
5.<meta property="og:description" content="ディスクリプション" />
6.<meta property="og:image" content="画像のURL" />

3,4,6は、"設定 > ソーシャル連携 > Open Graph Protocol タグを有効にする”にチェックを入れればOK
5は、"Open Graph Protocol 設定 > サイトの説明”に記載するとディスクリプションが挿入されます。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2018/12/25(Tue) 02:35
投稿者 Yujiro
参照先
ちょっとTwitterの方の裏技。

Twitterに画像付きページのURLを投稿すると、HAIKのデフォではページの
画像が小さいサムネール形式で表示。

この画像を大きい表示するには、以下の記述を「サイト情報の設定>その他のタグ」に

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

これでHAIKのどのページも大きい画像で投稿されます。

ちなみに、個別ページのみに適用したい時は、そのページに#beforescriptで
前述の一行を追加。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2018/11/19(Mon) 00:09
投稿者 Yujiro
参照先
うみほしさん

あのfacebookシェアデバッガーはどうもわからん時があります。
HAIKではないのですが、ある無料ブログの画像がシェデバッガーの表示と
実際の投稿がどうしても合わないままということも。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2018/11/18(Sun) 17:41
投稿者 うみほし
参照先
Facebookのシェアを試してみました。
シェアデバッガーで改めて情報を取り直すと,サムネイルが指定したとおりになりました!
これでサムネイルを指定したいときにはなんとかなりますね。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2018/11/18(Sun) 12:31
投稿者 Yujiro
参照先
HAIK側のページのデザイン、使用している画像と、facebook、TwitterなどのSNSに投稿される画像
になぜこだわるかと言えば。

商用サイトの集客では、SNSに投稿される画像によって反応が全く異なることがわかっているからで
す。

良い反応を示す物はシェア、リツイートが多く起こりバズり易いのです。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2018/11/18(Sun) 12:18
投稿者 Yujiro
参照先
Twitterの方も解決。
Twitter専用のOGPをそのページに無理やり書き込むだけ。

facebook、Twitter総合的には以下の通りに

#beforescript{{
<meta property="og:image" content="facebookに表示したい画像のURL" />
<meta name="twitter:image" content="Twitterに表示したい画像のURL" />
}}

1行目がfacebook他一般
2行目がTwitter専用

普通なら1行目のみでOKと思われるが、Twitterの方はなぜか専用行が必要な様子。

ちなみに、Twitterの方では一度投稿したページのサムネールをやり直すには以下のページへ行って画像取り直し。

https://cards-dev.twitter.com/validator
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2018/11/18(Sun) 11:31
投稿者 Yujiro
参照先
この方法は今の所Twitterの方はダメなようです。画像なしで投稿されてしまいます。
ううむ、です。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2018/11/17(Sat) 21:46
投稿者 Yujiro
参照先
追記

facebookに投稿して一度表示されてしまった画像を他の物に変えたい時、
とりあえずHAIKの方をいじりますが、facebook側でも操作が必要。
それは簡単。

1)facebookの該当記事の「日時」をクリック
2)画面右上に「・・・」のマーク出現、それをクリック。
3)出てきたリストの最下部「シェアした添付ファイルを更新」を選択。
記事編集 編集
Re: 【雑談】facebook投稿時の画像を差し替える裏技
投稿日 : 2018/11/16(Fri) 23:08
投稿者 Yujiro
参照先
Twitterの方ではどうなのか、未検証。もしかしたらダメかもなので要注意。
記事編集 編集
件名 スレッドをトップへソート
名前
メールアドレス
URL
画像添付


暗証キー
画像認証 (右画像の数字を入力) 投稿キー
コメント

- WEB PATIO -