[Pin It] ボタンを使用できるようにしようとしていますが、ページから URL と画像が自動的に取得されません。ボタンを PHP で動的に設定するにはどうすればよいですか?
この例に似ていますが、Genesis フレームワークは使用していません。
また、動的に入力される Pinterest ボタンを作成することも検討していたので、これをまとめました。simpleHTMLDom パーサーを使用して、ページの最初の画像 (画像用) とページの最初の段落 (説明用) を取得します。これらのセレクターを変更して、正しい画像/テキストを取得できます。詳細については、simpleHTMLDom のドキュメントを参照してください。
<?php
// Include our dom parser
include('simple_html_dom.php');
// Get the current page URL
function curPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}
$thispage = curPageURL();
// Grab our data
$html = file_get_html($thispage);
$imgtag = $html->find('img', 0)->src;
$desc = $html->find('p', 0)->plaintext;
// Build the URL
$pinURL = 'http://pinterest.com/pin/create/button/?url=' . $thispage . '&media=' . $imgtag . '&description=' . $desc . '';
$html->clear();
unset($html);
?>
次に、その新しい URL をボタン リンクに単純にエコーします。
<a href="<?php echo $pinURL ?>" class="pin-it-button" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
http://pinterest.com/about/goodies/を見ると、URL をエンコードしているか、少なくとも「://」などを「%3A%2F%2F」に置き換えているように見えますが、上記の例はどちらもこのパターンに従っていません。 urlencode を使用します。
試行錯誤が必要だと思います。
これは、Pin It ボタン用に Pinterest から作成されたコードです。
php タグが含まれていることに注意してください。そこに独自の php コードを配置して、url、media、および description パラメーターを設定します。終わり。
<a href="http://pinterest.com/pin/create/button/?url=<?php echo url_php_function(); ?>&media=<?php echo media_php_function(); ?>&description=<?php echo description_php_function(); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a>
ニュース アグリゲーターの機能メソッドのコード スニペットを次に示します。simpleHTMLDom で画像を見つけることができれば、取り上げられた投稿に Pin It ボタンが表示されます。
// Pinterest
/*
Pinterest requires two bits of code, something like this:
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.muschamp.ca%2F&media=http%3A%2F%2Fwww.muschamp.ca%2Fimage.jpg&description=whatever" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
Where you want the button ie here, and
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
directly after the body tag just like Facebook's new style button
*/
// I definitely miss how I did things in my previous code base, if there is no image should not be able to pin...
if(($image != NULL) && ( ! strpos($image->src, '+')) && ( ! strpos($image->src, '%'))
&& (preg_match('|^http?://[a-z0-9-]+(.[a-z0-9-]+)*(:[0-9]+)?(/.*)?$|i', $image->src)))
{
// If I don't display a valid image, no sense in showing a Pin It button
$html .= '<li>'; // Opening <li>
// May want a more elaborate description...
$html .= '<a href="http://pinterest.com/pin/create/button/?url=' . $item->get_permalink() . '&media=' . $image->src . '&description=' . $item->get_title() . '" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li>';
}
特定の有効な URL が Pinterest の JavaScript によって有効として受け入れられない可能性があるため、テストで必要であることが判明した場合は、少なくともそれがテストで発見したものでした。「%」と「+」の文字が特に厄介なようです。Pinterest では、小さな画像や非常に大きな画像をピン留めすることはできませんが、PHP を使用してニュース アグリゲーターで画像のサイズを変更したので、ここではテストしませんが、Pinterest をあなたの応用。