122

数十または数百の投稿を含むページがあり、それぞれにソーシャル ボタンがあります。各 URL のすべてのボタンを生成することはできません: 遅すぎます (facebook、g+、twitter、pinterest など、何百ものリンクに対して)。そのため、Facebook の共有ボタンをオンザフライで生成する代わりに、単純な img を使用します。

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 ボタンを使わせようとしないでください、ありがとう。

4

7 に答える 7

185

標準の 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 ボタン プロジェクトをご覧ください。

于 2012-06-26T16:52:11.257 に答える
83

ピン留めボタンの代わりに簡単なハイパーリンクを作成したい場合は、

これを変える：

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>

于 2013-08-21T02:31:03.147 に答える
4

そのような場合、 Share Link Generatorが非常に便利であることがわかりました。これは、Facebook、Google+、Twitter、Pinterest、LinkedIn の共有ボタンを作成するのに役立ちます。

于 2015-08-06T08:52:50.297 に答える
2

ボタンをインストールせずにボタンをピン留めするコードが必要ですか? その場合は、ピン留めしているページの 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)})());

于 2012-08-16T08:35:36.697 に答える
2

wordpressのコードを見つけました：

 <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>
于 2012-08-06T15:20:19.263 に答える