書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】SNSでたくさんシャアされている記事を取得する

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

今回の記事は、プラグイン「SNS Count Cache」を使いシェア数が多い記事を取得しよう!という内容です。

使い方が分からない方は

https://naifix.com/sns-count-cache/

を参照して下さい。

私のブログではツィッターで多くシェアされている記事を取得し表示しております。

完成系はこんな感じ。

そんなに難しいことはないので、早速カスタマイズしていきましょう。

トップページに記事取得エリアを作成しよう

今回は、トップページのヘッダー下に記事一覧を表示したいと思います。

SNS記事の取得は別のテンプレートに書くので、トップページにはテンプレートを呼び出すロジックのみを追加します。

イメージ的には以下のようにサイドバーと記事一覧の上にくるようしたいので、

「home.php」で使われているタグをそれぞれの場所に配置してみます。

ふむ。

とりあえず、<div id=”content” class=”clearfix”>と<div id=”contentInner”>の間に入れれば問題なさそうですね。

ということで、3行目と4行目の間に以下を追記

「snscount-post.php」というテンプレートを呼び出すことにしました。

追加後はこうなります。

2~8行目が追記した箇所ですね。

これで記事取得する準備は整いましたので、実際にSNS記事を作成してくれるテンプレートを作成しましょう。

※「snscount-post.php」のファイルを作成してからでないと、エラーになりますので注意

かきてぃー
何も書いていない空ファイルでもいいので、「snscount-post.php」を子テーマに作成しておきましょう。

カスタムフィールドを使ってSNSカウント数を取得

新規投稿追加画面にて「表示オプション」→「カスタムフィールド」のチェックを有効にするとカスタムフィールドの内容が確認出来るのはご存知でしょうか?

カスタムフィールドにはキャッシュ情報や投稿時間など、記事毎の情報を保存しておけるようになっています。

https://kakitare.info/web/amazonad/

もカスタムフィールドを用いた方法でしたね。

今回のSNSシェア数を取得するのもカスタムフィールドを使います。

プラグイン「SNS Count Cache」を有効にし、キャッシュが完了するとカスタムフィールドにシェア数やフォロー数の情報が反映されます。

  • scc_share_count_twitter
  • scc_share_count_facebook

などの情報がカスタムフィールドに存在すれば、反映されています。

※これが存在しないと、シェア数は取得されないので注意して下さい。

カスタムフィールドにシェア数などの情報を確認出来たら、テンプレートを作成していきます。

先ほど、「home.php」に追記した「snscount-post.php」を作成します。

「snscount-post.php」(新規ファイル)の作成

手順としては

  1. 情報(個別記事・公開済み・シェア数・ソート条件・取得数)を設定
  2. 出力したい情報を記述
  3. 記事を出力

この3つですね。

これを踏まえた上でソースを書くと…

になります。各所にコメントを入れると…

となります。

5,7,15,34行目は好みでカスタマズが可能です。

  • 5行目…取得したいSNSの種類(カスタムフィールドに沿う)フェイスブックなら「scc_share_count_facebook」となる。
  • 7行目…表示したい記事数(現在は6記事の設定)
  • 15行目…全体に対しての見出し(シェア数ランキング や フェイスブック人気記事)のタイトルが分かりやすいですね。
  • 34行目…5行目の設定に合わせて34行目も変更して下さい。(scc_share_count_twitterの箇所を変更します。)

ご自身のサイトデザインに合うように設定して下さい^^

SNSのカウント数やアイコン等が不要でしたら37~36行目を削除すれば、記事タイトルとサムネイルだけ取得できるようになります。

確認してみる

サムネイルは大きすぎるし、デザインは壊れているけど、求めている情報は取得出来ていますね!

次はCSSを設定してオシャレなデザインに整えていきましょう

CSS設定して横並び+サムネイルの上にタイトル

今の設定ではサムネイルは大きいし、縦並びになっているし、タイトルはサムネイル外にあるので全てを修正していきます。

これを有効にすると…

かきてぃー
ん~「書きタレ」のブログに反映するとアイコン2つ出てきたり、サイズが微妙に違ったり…気になる箇所がいくつか出てきます。。

こういう時は、googleのデベロッパーツールで自分のサイトに合わせたカスタマイズをしていきます。

カスタマイズ方法は後ほどご説明致します。

完成版がこちら!

なかなかいい感じですね!「SNS Count Cache」が有効になっていなかったり、正常にキャッシュ出来ていないと0件でランダム表示になりますので、上手く反映されていない方は「SNS Count Cache」を確認してみましょう。

Googleデベロッパーツールで自分のサイトに合わせてカスタマイズ

「書きタレ」ブログはAFFINGERではない為、そのままコピペとはいきませんでした…。

そこで便利なのがGoogleデベロッパーツール

画面上のココはどんなロジックが使われていて、どんなCSSが有効なのか。を表示してくれます。

かきてぃー
サイトをカスタマイズするならば、絶対に覚えておきたい機能ですね。

Google Chromeの画面上で「F12」を押すと、デベロッパーツールが起動します。

のようなアイコンをクリックすると、画面上が選択できるようになるので、2つ被っているツィッターのアイコンをクリックします。

すると、

  • どこのロジックか
  • どんなcssが有効になっているか(右側)

が分かります。

今回の場合、<i class=”fa fa-twitter”></i>が不要だったようです。(divのclassでアイコンを取得しているテンプレートだったので。)

デベロッパー上でdeleteボタンを押し削除してみると…

見事に削除されました。

つまり、「snscount-post.php」をもう一度カスタマイズする必要がありますね。

24~26行目の

のように修正。

見事にアイコン重複を修正できました。

こんな感じで、他の2つも修正。

おっし。理想のデザインになりました。

スポンサーリンク

完成系

「home.php」

「snscount-post.php」

「CSS」

「書きタレ」ブログの場合…

「snscount-post.php」

「CSS」

かきてぃー
サイトに合わせてCSSはカスタマイズする必要があるので多少の技術力はいるかもしれませんね。
今回はtwitterのシェア数で記事を取得しましたが、フェイスブックやRSS、feedlyでも作成出来ますのでチャレンジしてみて下さい。
かきてぃー
それでは、本日もお疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.