web-dev-qa-db-ja.com

カスタムのFacebook共有ボタン、カスタムタイトル、URL、ワードプレスの画像

私のすべての投稿ページには共有ボタンがあります（ AddThisプラグインを介して ）。

私がFacebookで共有するためにクリックすると、それはURLとタイトルを取りますが、画像は他の何かを示しています。 例えば 。

下のカスタム共有ボタンを作成しようとしましたが、クリックしても何も起こりません。

  <?php
    $title = the_title();
    $url= the_permalink();
    $summary=urlencode('Custom message that summarizes what your tab is about,  or just a simple message to tell people to check out your tab.');
    $image= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),  'single-post-thumbnail' );
  ?>
    <a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image[0];?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" target="_parent" href="javascript: void(0)">
        Custom Share on Facebook page!
    </a>

また、header.php内の<head>タグの間に Open Graph タグを追加しました。

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<meta property="og:title" content="<?php the_title(); ?>" /> 
<meta property="og:description" content="" />  
<meta property="og:image" content="<?php echo $image[0]; ?>" /> 
<meta property="og:video" content="" /> 
<meta property="og:video:width" content="560" />  
<meta property="og:video:height" content="340" />  
<meta property="og:video:type" content="application/x-shockwave-flash" />

私のウェブサイトからの私の投稿はすべて、そのURL、タイトル、画像、および説明とともに、FacebookおよびTwitterで共有できるはずです。 これは実用的な参照リンクです 。

customizationfacebook
1
user3209031

あちこちであちこちで私は上記のための解決策を見つける：

上記のmetaタグをbelowに置き換えました

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );  ?>

<?php if($image[0] != "" ){ ?>

<meta property="og:image" content="<?php echo $image[0]; ?>"  >

<?php } else { ?>

<meta property="og:image" content="logo.png"  >

<?php } ?>


<meta property="og:image:width" content="3523" >

<meta property="og:image:height" content="2372" >

<meta property="og:url" content="<?php echo the_permalink(); ?>"  >

<meta property="og:title" content="<?php echo the_title(); ?>"  > 

<meta property="og:site_name" content="Thefansworld" />

<meta property="og:description" content="" >  

<meta property="fb:app_id" content="3668661019" >

<meta property="fb:admins" content="" >

 <?php endwhile; wp_reset_query(); ?>

それでもPOSTの中には間違った画像を表示するものがあり、いくつかの調査の結果、私が見つけたものは：

URLからWebページを取得するとき、Facebookは後でそのコンテンツをキャッシュします。つまり、Facebookが一度あなたのサイトからデータを引っ張って、あなたのサイトが変更される（例えばあなたのog：imageタグが変更される）と、Facebookは画像を変更しません。

Facebook Debugger pageにアクセスして、Facebookが「見る」ことを確認してください。このツールを使用すると、Facebookは指定されたURLからデータを更新するように強制されます。これはそれをデバッグするための最良の方法です。

Facebookが適切なog：imageタグを「認識」していることを確認したら、og：image内の画像が適切な最小の幅/高さであることを確認します（これはすべてfbデバッガで説明されています）。

それがFBの基準を満たさない場合、Facebookはog：imageからの画像を使用しません。 FBであなたのサイトのコンテンツに問題があるときはいつでも私はこのツールを強くお勧めします。

これはいくつかのone.Andに役立つことを願っています私は間違っている場合はどこか私に知らせてください:)

1
user3209031

u varを使用してURLを共有し、FacebookにOpengraphタグを使用してコンテンツを取得させることはどうですか。

このようなもの

<a onClick="window.open('http://www.facebook.com/sharer.php?u=<?php echo $url; ?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" target="_parent" href="javascript: void(0)">Custom Share on Facebook page!</a>
0
Carlos Faria