数十または数百の投稿があるページがあり、それぞれにソーシャルボタンがあります。各URLのすべてのボタンを生成することはできません。遅すぎる(facebook、g +、Twitter、pinterest ...数百のリンク)。そのため、オンザフライで生成されるfacebook共有ボタンの代わりに、
https://www.facebook.com/sharer.php?u=${url_of_current_post}&t=
ユーザーがクリックすると、facebookによって生成されたコンテンツを含むポップアップウィンドウが開きます。
Pinterestでどうすればいいですか?私はボタンを生成するためのコードを見つけるだけですが、可能であればjsをまったく避けたいです。次のようなものはありますか?
http://pinterest.com/pinthis?url=${url_of_current_post}
おかげで、jsボタンを使用させないでください。
標準のPinterestボタンコード( ここで生成 )は、Pinterestボタンの<a>
をラップする<img>
タグです。
ページにpinit.js
スクリプトを含めない場合、この<a>
タグは「現状のまま」機能します。適切なサイズの新しいウィンドウを開くこれらのタグに独自のクリックハンドラを登録するか、少なくともtarget="_blank"
をタグに追加して、新しいウィンドウでクリックを開くことで、エクスペリエンスを改善できます。
タグの構文は次のようになります。
<a href="http://pinterest.com/pin/create/button/?url={URI-encoded URL of the page to pin}&media={URI-encoded URL of the image to pin}&description={optional URI-encoded description}" class="pin-it-button" count-layout="horizontal">
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>
JavaScriptバージョンの共有ボタンを使用してページの読み込み時間を台無しにしている場合は、非同期の読み込み方法を使用してサイトを改善できます。 Pinterestボタンでこれを行う例については、私の HTML5構文が改善されたGitHub Pinterestボタンプロジェクト をご覧ください。
ピン留めボタンの代わりに単純なハイパーリンクを作成する場合は、
これを変更:
http://pinterest.com/pin/create/button/?url=
これに:
http://pinterest.com/pin/create/link/?url=
したがって、完全なURLは次のようになります。
<a href="//pinterest.com/pin/create/link/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">Pin it</a>
同じ質問がありました。これはWordpressでうまく機能します!
<a href="//pinterest.com/pin/create/link/?url=<?php the_permalink();?>&description=<?php the_title();?>">Pin this</a>
そのような場合、 Share Link Generator が非常に便利で、Facebook、Google +、Twitter、Pinterest、LinkedInの共有ボタンの作成に役立ちます。
ワードプレスのコードを見つけました:
<script type="text/javascript">
function insert_pinterest($content) {
global $post;
$posturl = urlencode(get_permalink()); //Get the post URL
$pinspan = '<span class="pinterest-button">';
$pinurl = '';
$pinend = '</span>';
$pattern = '//i';
$replacement = $pinspan.$pinurl.'$2.$3'.$pindescription.$pinfinish.''.$pinend;
$content = preg_replace( $pattern, $replacement, $content );
//Fix the link problem
$newpattern = '/<span class="pinterest-button"><\/a><\/span><\/a>/i';
$replacement = '';
$content = preg_replace( $newpattern, $replacement, $content );
return $content;
}
add_filter( 'the_content', 'insert_pinterest' );
</script>
次に、以下をPHPに追加します。
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">Pin It</a>
それでは、ボタンをインストールせずに、ボタンを固定するためのコードが必要ですか?その場合は、このコードを固定元のページのURLの場所に貼り付けてください。ボタンのないピンイットボタンとして機能する必要があります。
javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());
説明に従ってカスタムリンクを作成できます here 小さなjQueryスクリプトを使用して
$('.linkPinIt').click(function(){
var url = $(this).attr('href');
var media = $(this).attr('data-image');
var desc = $(this).attr('data-desc');
window.open("//www.pinterest.com/pin/create/button/"+
"?url="+url+
"&media="+media+
"&description="+desc,"_blank","top=0,right=0,width=750,height=320");
return false;
});
これは、画像と説明がHTML 5データ属性data-image
およびdata-desc
に保存されているクラスlinkPinIt
を持つすべてのリンクで機能します
<a href="https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F"
data-image="https%3A%2F%2Fc4.staticflickr.com%2F8%2F7027%2F6851755809_df5b2051c9_b.jpg"
data-desc="Title for Pinterest Photo" class="linkPinIt">
Pin it!
</a>
こちらをご覧ください jfiddle example