「いいね！」ボタンが表示されないのはAD表示が原因か / アメブロ24時

「ソーシャルボタン」 は何のため

「ソーシャルボタン」は、今ではブログの定型飾りの様なもので、使う人が居ようが居まいが、とにかくそこに在る事になってますね。 私は今までコイツを押した事がなかったのですが、少し気になる事があり調べました。

 気になる事 その❶ 

アメブロを開設するとデフォルトで付いて来る「ソーシャルボタン」は「B!ブックマーク」（はてなブックマーク）「ツイッター」「フェースブック」の3種です。 これらのボタン、ホントに役にたつのか？ これが最初の疑問でした。

日頃訪れるブログページで、付属のカウントは「0」しか見た事がなく、カウンターが動かないのかもと考え、ユーザーが集まるアイドル系のページを探してみました。

下は「ももいろクローバーZ」のページで、さすが 1000を超える「いいね！」が集まるブログで、「フェイスブック」のシェアにも「5」がカウントされていました。

「映画レビュー」の人気があるブログで、「B!ブックマーク」がたまに押されているのを見つけました。 この記事はシェアも押されています。

「ツイート」はカウンター表示が無いのですが、動作はしています。 とはいえ「ソーシャルボタン」のカウント数が「0」のブログが殆どで、閲覧者によって押される事は、かなり少ない気がします。

簡単に言えば「ソーシャルボタン」は、各SNSのユーザーがアメブロ記事のリンクを作るための機能です。「はてB！」は少し趣が違いますが、ボタンがあればリンクが作り易いだけで、無くても外部のSNSやブログからリンクを貼れます。

これらの「ソーシャルボタン」は、たまには有効かも知れないと考えて置いているユーザーが多いと思います。 でも余計と思うなら、下のブログの「基本設定」画面で「非表示」に出来ます。 ただし、この設定は3種ボタン全てが「表示 / 非表示」になり、選択表示ができません。

　　　　　● ブログ基本設定  

 気になる事 その❷

これらのボタンが「いいね！ボタン」の表示を妨げる事はないのか？ これが、一番気になっていた事です。 調査のために以下の簡単な試験スタイルを作りました。

「適用先」：「 https://ameblo.jp/ 」

「Code」：　ソーシャルボタンの優先的表示 試験スタイル

/* ソーシャルボタンの優先的表示 試験スタイル */

body {
    font-family: Meiryo; }

/* コロナ表示を削除 */
._o9-E3nNj {
    display: none; }

[data-uranus-layout="columnA"] [data-uranus-layout="main"] {
    position: relative;
    z-index: 1; }

/* 新タイプスキン */
[data-uranus-component="entryFooter"] {
    position: fixed;
    z-index: 1;
    top: -200px; }

[data-uranus-component="entryAction"] {
    position: fixed;
    z-index: 10;
    top: 60px;
    left: 20px;
    width: 500px;
    background: #fff;
    height: 120px;
    padding: 15px 20px 10px;
    border: 2px solid #000; }

[data-uranus-component="feedbacks"] {
    position: fixed;
    z-index: 10;
    top: 130px;
    left: 22px;
    text-align: center;
    width: 520px;
    background: #fff;
    padding: 10px 10px 45px; }

[data-uranus-component="entryShare"] {
    position: fixed;
    z-index: 10;
    top: 165px;
    left: 20px;
    width: 520px; }

/* 旧タイプスキン */
#exLinkBtn {
    position: fixed;
    z-index: 10;
    top: 155px;
    left: 20px;
    width: 520px;
    background: none; }

/* 旧タイプスキン */
.skinArticleFooter {
    position: fixed;
    z-index: 10;
    top: -200px; }

.skinArticleFooter .articleExLinkArea {
    position: fixed;
    z-index: 10;
    top: 155px;
    left: 20px;
    width: 520px; }

このCSSコードを「Stylus」に登録して、アメブロの各ページをテストします。 このスタイルは、「ソーシャルボタン」をページのブログヘッダー部に表示します。 興味がある方はテスト登録して試してください。

◎ 新タイプスキンの場合は、ページを開くと上図の「ソーシャルボタン」のパネルが表示されます。

◎ 旧タイプスキンの場合は、「LazyLoad」の関係で、本来のボタン位置までスクロールしないと、全てのボタンが揃わない事があります。

試験スタイルの適用で気付いた事 

新タイプスキンでのテストですが、この試験スタイルを適用すると、「いいね！ボタン」が欠損することが、非常に少なくなる事に気付きました。

試験スタイルを適用すると、20回のリロードで「いいね！ボタン」が100%表示され、適用を止めて、リロード後に手動でボタン位置にスクロールする方法では、20回のリロードでボタンが全く表示されないという、極端な結果になった事があります。 殆ど差が判らない場合もありますが、試験スタイル適用時は非適用時より「いいね！ボタン」が表示される確率が確かに高いのです。

「いいね！ボタン」が「非表示」になるのは、複数の原因があり、ページの表示内容、テストした時間帯（通信の混み具合）なども関係する様に感じています。 しかし、この試験スタイルの適用から、最も推測される原因は「AD表示」の影響です。

試験スタイル適用時の先の図では、ADが画面内に全く表示されていません。 しかし非適用の場合は、下方にスクロールするとADが表示され、「いいね！ボタン」の位置では下の様にADが勢ぞろいします。

特に、ブログ記事下部のADの読込み（左側のAD）は、青枠の「ソーシャルボタン」や「いいね！ボタン」の読込みとタイミングが重なります。 読込みにはそれぞれに通信が伴います。 試験スタイルの適用時はAD読込みが無く、「いいね！ボタン」の読込みが邪魔されないと推測できます。

「ソーシャルボタン」は邪魔をするのか？ 

「ソーシャルボタン」の影響を調べるつもりが、思わぬ「AD」の影響の方向に考えが進んだのですが、ここで「Let's Iine」を使ったテストをして見ました。

「Let's Iine」   は上記の試験スタイル適用とは違い、自動スクロールで「いいね！ボタン」を表示させます。 その表示の仕方は日常のページ表示に近いものです。 このツールを使うと、「AD」「ソーシャルボタン」「いいね！ボタン」が読み込まれる瞬間を、「Alt+F5」を押す度に見る事ができます。

これを詳しく観察すると、読込まれる順番にある程度の規則がある事が判りました。

◯「ツイッター」

❶「B!ブックマーク」

❷「AD」

❸「いいね！ボタン」

❹「フェイスブック」

「ツイッター」ボタンは単なる「a要素」のリンクで、これは通信の必要がなく、最も早く表示されます。

次に ❶「B!ブックマーク」が読込まれ、残り ❷ ❸ ❹ は、キャッシュや通信状態によって順番が変化します。 ただし ❹「フェイスブック」は殆どの場合に最後です。

「いいね！ボタン」が「非表示」になるのは、この ❷ ❸ ❹ の通信時で、やはり ❷「AD」の読込みが関係する様に思えます。 ちなみに「ソーシャルボタン」を非表示に設定して ❶「B!ブックマーク」❹「フェイスブック」の読込みが無い状態をテストしましたが、特に「いいね！ボタン」が表示され易くなる事はありません。 つまり、「ソーシャルボタン」は「いいね！ボタン」の読込みの成否には影響しないと、私は判断しました。

以上は私の環境でのテストで、全てのユーザーが同じ結果になるとは限りません。 興味のある方は、各自の環境でテストされ、「いいね！ボタン」の障害の原因を調べて戴けたらと思います。