素人がWordPressでソーシャルボタンを手動設置した際に参考にした記事

 /  Tech

Self Snitch
photo credit: Poster Boy NYC via photopin cc

 この記事について:WordPressの素人が自力でソーシャルボタンを手動設置するには結構根気がいりますが、要所を押さえればなんとかなるものです。

スポンサーリンク

はじめに

今やソーシャルボタン、共有ボタンをサイトで見ない時ってほとんどありませんよね。今回はソーシャルボタンを設置できるWordPressのプラグインやその他ツールは使わずに自力でやってみたいと思ったので挑戦してみました。

いざ自分で設置してみようと思うとなかなか手こずるものです。
参考にさせて頂いたブログ記事と合わせながら、素人がソーシャルボタンを自力で設置するための道しるべをご紹介します。

素人にとっては根気のいる作業だがポイントを押さえればなんとかなる

WordPress素人にとってはソーシャルボタンの手動設置は根気がいりますが、次の8つのポイントを押さえながら各記事を参考に進めていくとなんとかなりました。

1. ソーシャルボタンの手動設置の流れを知っておく

まずは、何のボタンを設置するのかということと設置までの流れをつかんでおきましょう。

2年前の記事なので情報が古い場合もありますが、これほどの種類のソーシャルボタンの設置を丁寧に解説しているのはすごいですね。
この記事を基本軸として、不明分や不足分を補うように情報収集するのがおすすめです。

2. 具体的なHTMLの書き方をイメージしておく

設置したいソーシャルボタンと設置までの流れがつかめたら、具体的にどういうHTMLを書く必要があるのかというおおよその設置イメージをつかんでおきましょう。ただし、紹介されているソースはそのままコピペして使わないように注意です。

3. ソーシャルボタンを設置するためのHTMLソースを取得する

ここまで進んだら、1で紹介されている記事に戻って取得したいソーシャルボタンのHTMLソース取得に進みましょう。
参考までにFacebook、Twitter、はてな、Google、Pocketのボタンのソースは下記リンクから取得できます。

Facebook

Twitter

はてな

Google

Pocket

4. 特にFacebookでは避けて通れないOGP設定、WordPressの場合はプラグインで対応可能

特にFacebookの場合は避けて通れないのがOGP設定。1で紹介されている記事にも記載がありますね。
WordPressの場合はプラグインで対応可能です。

5. Facebook IDでつまづいたら

OGP設定の際にFacebook IDが必要になるのですが、4で紹介されている記事にも確認の方法が書いてあります。
もし、それでもFacebook IDでつまづいてしまった時にはこちらが参考になると思います。

6. OGP設定でmetaタグに夢中になると忘れるのがhtmlタグ

OGP設定に夢中になっていると忘れるのがhtmlタグです。
1で紹介されている記事にもあるようにOGPが正しく設置されているかどうか確認できるのですが、htmlタグの修正を忘れるとエラーばかりが表示され、かなり焦るので要注意です。その時は落ち着いてhtmlタグを修正しましょう。

7. ソーシャルボタンは読み込みに時間がかかる

ソーシャルボタンがどうにか動くようになると気になるのが、読み込みに時間がかかるということです。
そんな時にはいくつか解決策がありますので、できそうなものからやってみましょう。

8. いざという時はあきらめてプラグインを入れるという選択肢もある

手動設置という挑戦は素晴らしいです。しかし、どうにもうまくいかないという場合はプラグインを入れるというのもひとつの方法です。

おわりに

なんとか自力でプラグインに頼らず手動でソーシャルボタンの設置ができたのですが、やり始めたらあっという間に数時間が経過しました。

自力でやりたいくせに、何でそこまでして自分でやりたがるのかと思ったりもするのですが、「理解したい」というのと「興味がある」というのでやっぱりやってみたくなるんです。

こうやって一つ一つ吸収していくものですよね。

 タグ:

スポンサーリンク
スポンサーリンク
Ads by Amazon