BuddyPress bbPress Social Media Share Button code

Home Forums BulletProof Security Pro BuddyPress bbPress Social Media Share Button code

This topic contains 15 replies, has 6 voices, and was last updated by  AITpro Admin 2 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #13060

    AITpro Admin
    Keymaster

    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:
    CSS Social Media Image Sprite

    #15282

    Eric Handel
    Participant

    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

    #15285

    AITpro Admin
    Keymaster

    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/

    #15297

    Eric Handel
    Participant

    Thanks!!!!!

    #33602

    moses
    Participant

    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!

    #33603

    AITpro Admin
    Keymaster

    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.

    #33604

    moses
    Participant

    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.

    #33606

    AITpro Admin
    Keymaster

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

    #33955

    JavSil
    Participant

    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.

    #33956

    AITpro Admin
    Keymaster

    @ 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.

    #33957

    JavSil
    Participant

    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 😉

    #33958

    AITpro Admin
    Keymaster

    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.

    #35251

    John
    Participant

    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

    #35252

    AITpro Admin
    Keymaster

    @ 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.

    #37751

    romox
    Participant

    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!

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.