By LateNightDesigner on
So, I had the need to place social sharing buttons in a block and came up with this code:
<?php
if (!preg_match('/<meta property="og:image" content="(.*?)"/', $content, $match_image)) {
preg_match_all('/<img src="(.*?)"/', $content, $match_images);
}
$img_source = $match_image[1];
?>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: '<?php echo $head_title ?>',
link: '<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; echo $url; ?>',
picture: '<?php if(!empty($img_source)) {echo '<img src="' . $img_source . '" />';}?>',
caption: '<?php echo $title ?>'
},
function(response) {
if (response && response.post_id) {
alert('Your share has been posted!');
}
}
);
});
});
</script>
<style type="text/css">
#sidebar-right #block-block-22 h2.block-title {text-align:center;}
#sidebar-right #block-block-22 .block-content-inner {margin-left:30px;}
</style>
<div style="height:100px; width:250px;">
<div style="float:left; padding: 0px 5px; width:50px; position:relative;"><div class="fb-like" data-send="false" data-layout="box_count" data-width="30" data-show-faces="false"></div><br /><img src="/image/fbShareBtn.gif id="#share_button" /></div>
<div style="float:left; padding: 0px 5px; width:50px; position:relative;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="michaelbernoff">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div style="float:left; padding: 0px 5px; width:50px; position:relative;">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></div>
<div style="float:left; padding: 0px 10px; width:50px; position:relative;">
<div class="g-plusone" data-annotation="none"></div></div>
</div>
I have set the block as php and enabled it for all users.
Everything works except for the Share button I had to cobble together using FB.ui
The button works when I am logged in as admin, but does not work as an anonymous user.
Is this an issue with the variables? do I need to do that global thing?
Thanks.
P.S. Feel free to take my block. It works :)