mihoji ogp設定
ヘッダーのところに書く
まずこれ
[html]
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
[/html]
つぎにこれ
[html]
<!– 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 –>
[/html]
いいね！ボタン設置用のjs（body直下に置く）
[html]
<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>
[/html]
ソーシャルボタン用のソース：小さいボタンサイズ
[html]
<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>
[/html]
並べる用css
[html]
/*social_btn*/
.social_btn {
margin-top: 10px;
}
.social_btn li {
float: right;
margin-left: 5px;
max-width: 80px;
}
[/html]