wordpress：TwitterやFacebookで記事をシェアさせたいが挙動がおかしい。

Question

何度もすみません。仕事でどうしても来週までに素人ながらサイトを作らないといけないので質問させて頂いております。

wordpressの個別投稿ページでTwitterやFacebookのシェアをボタンを設置しました。

しかし、実際記事を作り、表示させてTwitterやFacebookのシェアをさせようとすると、

下記のようなページが出てツイートさせると思うのですが、リンクが記事ページのリンクではなく

トップページのリンクになってしまいます。

20個ほど記事を作ってみましたがどれも同じ現象が起きてしまいます。

何か解決方法はありますでしょうか。

「起きている現象」
Facebookは記事に画像があるのにシェア画面に画像が評されません。
Twitterはそもそも画像の通りです。

「Facebook」

「Twitter」

「シェアボタンの設置コード」

<!-- shareBox -->
<div class="shareBox">
<div class="twBox"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div><div class="fb-share-button" data-href="http://tokyo-times.jp/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Ftokyo-times.jp%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">シェア</a></div>
</div>
<!-- shareBox -->	

「試したこと」

all in one seoというプラグインをインストールして使っているのですが、

設定画面をみてみましたが、記事のリンクを設定する画面はなかったように思います。

OGPタグをヘッダーに設定してみたがかわらなかった。

<?php if( is_single() ) { ?>
<meta property="og:type" content="article">
<?php } else { ?>
<meta property="og:type" content="website">
<?php } ?>
<?php if( ( is_single() || is_page() ) && has_post_thumbnail() ) { ?>
<meta property="og:image" content="<?php the_post_thumbnail_url( 'full' ); ?>">
<?php } else { ?>
<meta property="og:image" content="<?php echo esc_url( get_template_directory_uri() ); ?>/images/facebook_1200x630.png">
<?php } ?>
<meta property="og:url" content="<?php echo ( 'http://' . $_SERVER[ 'HTTP_HOST' ] . $_SERVER[ 'REQUEST_URI' ] ); ?>">

Comments

[退会済みユーザー]

シェアボタンの設置方法を質問文に追記してください。

[退会済みユーザー]

わかりました。すぐ設置します。

[退会済みユーザー]

追加いたしました。

Answer 1

TwitterなどのシェアボタンはボタンのHTMLコード内にシェアしたいページのURLが含まれています。
提示されたコードの場合はdata-hrefとhrefのあたりです。
ここを、各ページのパーマリンクになるように修正してください。

また、この手のシェアボタンは頻繁に形式が変わります。
そのため、検索して調べる際は新しい情報を参照するようにし、公式サイトの情報も参照するようにしてください。
http://www.promeshi.com/archives/2845
https://publish.twitter.com/

---

既に確認済みかもしれませんが、以下を追記します。

フェイスブックの公式情報
https://developers.facebook.com/docs/plugins/share-button/

Comments

[退会済みユーザー]

ありがとうございます。TwitterってAPIの申請も厳しくなりましたし、注視していこうと思います。試してみてできたらベストアンサーにさせていただきます。ご回答助かります。

[退会済みユーザー]

Twitterはうまくいきました。ありがとうございます。Facebookはかわらずなので自分でもうちょっと調べてみます。

[退会済みユーザー]

公式情報をもとにOpen Graphオブジェクトデバッガーでみてみたところ、og:imageが設定されているのにもかかわらずFacebookでは認識していないようでした。
「http://xxxxxx.jp/」の「website」タイプのオブジェクトは複数のOG URLを指定しているため無効なものです: http://xxxxx.jp/, http://xxxxxx.jp/
こう表示されました。
複数設定した記憶はないのですが、all in one seoというプラグインを使っているのでそちらが影響してないかも含めて調べてみます。

[退会済みユーザー]

なおりました。<meta property="og:url" content="http://xxxxxxx.jp/" />をヘッダーから消したら直りました。多分プラグインの影響で複数ついてしまったようです。ありがとうございました。