BuddyPress bbPress Social Media Share Button code

[AITpro Admin]

This code adds the Social Media Sharing button links that you see in this Forum’s Replies.  This is lightweight outgoing HTML code that uses the bbPress bbp_theme_before_reply_admin_links hook. Uses a CSS Image Sprite.  The code is not fancy and is instead very simple at this point, but will probably be “tricked out” a bit more at a later time.  The most important thing is loading the Social Media buttons/links per Reply does not use up any significant website resources since these are outgoing Share links.

Note:  All Social Media sites have AJAX / Asynchronous JavaScript and XML Share button code available on their help pages so if you want to get that code you would replace this simple HTML code with that fancier AJAX code.

Add this code to your Theme’s functions.php file.

<?php
add_action( 'bbp_theme_before_reply_admin_links', 'aitpro_social_media_buttons' );

// Social Media buttons for Individual Replies
function aitpro_social_media_buttons() { ?>
<!-- Start Social Buttons -->
<span style="margin:0px;padding:22px;">
<ul id="social-links">
 <li id="google"><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="Google+"></a></li>
 <li id="facebook"><a href="https://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="_blank" rel="nofollow" title="facebook"></a></li>
 <li id="twitter"><a href="https://twitter.com/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Twitter"></a></li>
 <li id="reddit"><a href="https://www.reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="reddit"></a></li>
 <li id="linkedin"><a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="LinkedIn"></a></li>
 <li id="pinterest"><a href="https://www.pinterest.com/pin/create/bookmarklet/?media=https://www.ait-pro.com/wp-content/uploads/2009/10/bps-pro-logo.gif&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="Pinterest"></a></li>
 <li id="digg"><a href="https://www.digg.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="Digg"></a></li>
 <li id="tumblr"><a href="https://www.tumblr.com/share" target="_blank" rel="nofollow" title="Tumblr"></a></li>
 <li id="stumbleupon"><a href="https://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="StumbleUpon"></a></li>
 <li id="delicious"><a href="#" onclick="window.open('https://delicious.com/save?v=5&provider=AITpro&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;" title="Delicious"></a></li>
 <li id="myspace"><a href="https://www.myspace.com/Modules/PostTo/Pages/?c=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Myspace"></a></li>
 <li id="email"><a href="mailto:?subject=<?php the_title(); ?>&body=Hello%20I%20thought%20this%20might%20interest%20you%20<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Email"></a></li>
</ul>
</span>
<!-- End Social Buttons -->
<?php }

Add this CSS code in your Theme’s style.css file:

/* Social Media CSS Sprite button links */
#social-links {position:relative;}
#social-links li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
#social-links li, #social-links a {height:22px;display:block;}
li#google {left:0px;width:22px;background:url('images/spritesheet.png') 0 0;}
li#facebook {left:26px;width:22px;background: url('images/spritesheet.png') -26px 0;}
li#twitter {left:50px;width:22px;background:url('images/spritesheet.png') -50px 0;}
li#reddit {left:74px;width:22px;background:url('images/spritesheet.png') -74px 0;}
li#linkedin {left:98px;width:22px;background:url('images/spritesheet.png') -98px 0;}
li#pinterest {left:122px;width:22px;background:url('images/spritesheet.png') -122px 0;}
li#digg {left:146px;width:22px;background:url('images/spritesheet.png') -146px 0;}
li#tumblr {left:170px;width:22px;background:url('images/spritesheet.png') -170px 0;}
li#stumbleupon {left:194px;width:22px;background:url('images/spritesheet.png') -194px 0;}
li#delicious {left:218px;width:22px;background:url('images/spritesheet.png') -218px 0;}
li#myspace {left:242px;width:22px;background:url('images/spritesheet.png') -242px 0;}
li#email {left:266px;width:22px;background:url('images/spritesheet.png') -266px 0;}

Download this CSS Sprite Image file by right mouse clicking, choose “Save Image as…” and put it in your Theme’s /images folder:

[Eric Handel]

Hi there,

I really like the idea of this, but I’m am really a beginner when it comes to code. Thus, I have a few questions.

1) When you say the code should go in the functions.php, are you referring to bbpress functions php file? If possible, could you type out the full name of the functions php file you are referring to?

2) Once I find the right file to paste the code, where (location-wise) should I place the code in the file?

Thanks for all your help! Like I said, I’m very new at this

[AITpro Admin]

BuddyPress and bbPress are designed in the same way that WordPress is designed, where instead of ever having to modify Core code you can instead hook into Core code with actions and filters to change the output/result to what you want.  The functions.php file would be your particular Theme’s functions.php file.  You would add this action hook/code in your Theme’s functions.php file.

http://codex.buddypress.org/themes/functions-php/

[Eric Handel]

Thanks!!!!!

[moses]

hi, great work thanks for the codes. i tried it on localhost its working fine, but when i do it on the live host then the icons dont appear, im on bluehost. please any advice? thanks once again for your effort!

[AITpro Admin]

Double check that you have created all the necessary things:  theme functions.php code, theme style CSS code and uploaded the CSS Sprite image file.

[moses]

well, when i hover around where the images are suppose to appear, i see the sign by a hover message, even when clicked it shares the post alright. but the problem is the display.

[AITpro Admin]

Ok well try and fix/change the CSS code I guess?  Not really sure. 😉

[JavSil]

Hi f371905 your code looks really useful and I would like to add it to my bbpress forum. I pasted it in the function.php but I got a blank page. I deleted the open and close php tag but It still no works… May you help me? Thanks.

[AITpro Admin]

@ Javsil – The details about how and where to add the code, CSS, image file etc. are all explained above so not sure what else I can tell you.  Double check that you are doing all the setup steps correctly.

[JavSil]

when I use a function within <?php I get a blank page. All the function I have in my function.php start without the open php tag… therefore I wonder how should I paste your function without the php tags?

For example, like this (Did I miss anything?):

add_action( 'bbp_theme_before_reply_admin_links', 'aitpro_social_media_buttons' );

// Social Media buttons for Individual Replies
function aitpro_social_media_buttons() { ?>
<!-- Start Social Buttons -->
<span style="margin:0px;padding:22px;">
<ul id="social-links">
 <li id="google"><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="Google+"></a></li>
 <li id="facebook"><a href="https://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="_blank" rel="nofollow" title="facebook"></a></li>
 <li id="twitter"><a href="https://twitter.com/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Twitter"></a></li>
 <li id="reddit"><a href="https://www.reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="reddit"></a></li>
 <li id="linkedin"><a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="LinkedIn"></a></li>
 <li id="pinterest"><a href="https://www.pinterest.com/pin/create/bookmarklet/?media=https://www.ait-pro.com/wp-content/uploads/2009/10/bps-pro-logo.gif&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="Pinterest"></a></li>
 <li id="digg"><a href="https://www.digg.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="Digg"></a></li>
 <li id="tumblr"><a href="https://www.tumblr.com/share" target="_blank" rel="nofollow" title="Tumblr"></a></li>
 <li id="stumbleupon"><a href="https://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" title="StumbleUpon"></a></li>
 <li id="delicious"><a href="#" onclick="window.open('https://delicious.com/save?v=5&provider=AITpro&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;" title="Delicious"></a></li>
 <li id="myspace"><a href="https://www.myspace.com/Modules/PostTo/Pages/?c=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Myspace"></a></li>
 <li id="email"><a href="mailto:?subject=<?php the_title(); ?>&body=Hello%20I%20thought%20this%20might%20interest%20you%20<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Email"></a></li>
</ul>
</span>
<!-- End Social Buttons -->
}

Thanks for your help 😉

[AITpro Admin]

PHP Code starts at the beginning php tag and ends at the php closing tag, everything inbetween that is not php code needs to outside of any php tags.  My guess is that that you are not adding a new beginning tag after the HTML code that is not php code.

Example:
<?php is the php beginning tag in your functions.php file.
function aitpro_social_media_buttons() { ?> is a closing php tag.
HTML code is here that is not php code
<?php } is probably what you are missing since you need to add a beginning php tag since this is php code.

[John]

Hello.
Please I need your help.
We’ve been able to install the social share buttons but when a particular post is shared, it would be nice that the when the shared post link is shared, a visitor lands on that reply/post within a thread rather than at the top of the thread, I’m hoping you’d agree with me on this. So how can one achieve this result please?
Thank you.
JD

[AITpro Admin]

@ John – We have tried adding the bbPress Reply ID before and it is stripped out of the Twitter share posting window/box.  Example code:  <li id="twitter"><a href="http://twitter.com/share?url=<?php echo the_permalink(). '#post-' .bbp_get_reply_id(); ?>" target="_blank" rel="nofollow" title="Twitter"></a></li>.

The URL in the Browser Address bar shows the complete URL including the Anchor Tag #. Example: #post-0000. There is no workaround solution for Twitter because Anchor Tags and Hash Tags that Twitter uses conflict with each other. An Anchor Tag on Twitter is converted to a Twitter Hash Tag.

[romox]

Hello,  first of all thank you to try to give us a solution to “reply sharing” issues, but unfortunately it didn’t work for me. I’m using oceanwp theme, last bbpress & wordpress version, I’ve followed your steps adding the snippets to functions.php and to styles.css, but it didn’t work.

• The first problem is that the sharing buttons are not displaying at all. But when you pass with your mousse over them in the place they supposed to be, you can see that the buttons are there and you can click on them.

I’ve tried changing this address: (‘images/spritesheet.png’), because my theme didn’t have that folder images. I’ve created a folder called images. I’ve also uploaded the spritesheet.png to my own media files in order to provide an accurate URL. But it didn’t work. The css code was added in the correct place (styles.css of my child-theme) because without him, we cannot even make click over the buttons.

• The second problem and maybe the most important is that, after clicking the “invisible” buttons they will share to the social networks only the main page or topic, but not the users replies or posts itself for sharing on social networks. I noticed that the code need to pick up the number followed with the # in order to share the reply/post precisely.

Another detail, can we replace G+ with Whatsapp? Because G+ is not available anymore.

This functionality it’s very important for my website and I’ll really appreciate if you can give me the solutions. I don’t know nothing of code, but I’m always trying to learn and understand. I wish to make it work like this beautiful example on your site!

Thank you in advance for your answers!

[Author]

Posts