ogp設定
ヘッダーのところに書く
まずこれ
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
つぎにこれ
<!-- BEGIN:OGP --> <?php if (is_single() || is_page()) { ?> <?php while (have_posts()) : the_post(); ?> <meta property="og:title" content="<?php the_title(); ?>|<?php bloginfo('name'); ?>" /> <meta property="og:type" content="article" /> <meta property="og:description" content="<?php $summary = strip_tags($post->post_content); $summary = preg_replace("/[[a-z,/]*]|n|r/", "", $summary); $summary = mb_substr($summary, 0, 80). "…"; echo $summary; ?>" /> <meta property="og:image" content="<?php if (has_post_thumbnail()) { $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); echo $thumbnail[0]; } else { echo 'ここにダミー用画像の場所を絶対パスで'; } ?>" /> <meta property="og:url" content="<?php the_permalink(); ?>" /> <?php endwhile; ?> <?php } elseif (is_home()) { ?> <meta property="og:title" content="<?php bloginfo('name'); ?>" /> <meta property="og:type" content="blog" /> <meta property="og:url" content="<?php bloginfo('url'); ?>" /> <meta property="og:description" content="<?php bloginfo('description'); ?>" /> <?php } else { ?> <meta property="og:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>" /> <meta property="og:type" content="article" /> <meta property="og:image" content="<meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/ogp_default.jpg">" /> <meta property="og:url" content="<?php echo get_bloginfo('url').$_SERVER['REQUEST_URI']; ?>" /> <meta property="og:description" content="<?php bloginfo('description'); ?>" /> <?php } ?> <meta property="og:site_name" content="<?php bloginfo('name'); ?>" /> <meta property="fb:app_id" content="XXXXXXXXX"> <!-- END:OGP -->
いいね!ボタン設置用のjs(body直下に置く)
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=XXXXXXXXX"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
ソーシャルボタン用のソース:小さいボタンサイズ
<div class="social_btn"> <ul> <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> </li> <li> <div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="72" data-show-faces="false" data-font="lucida grande"></div></li> <li><iframe title='plus' src='https://plusone.google.com/u/0/_/+1/fastbutton?count=true&size=medium&url=<?php the_permalink(); ?>' frameborder='0' scrolling='no' width='60' height='20' >g+1</iframe></li> <li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </li> </ul> </div>
並べる用css
/*social_btn*/ .social_btn { margin-top: 10px; } .social_btn li { float: right; margin-left: 5px; max-width: 80px; }