Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Smart SharingプラグインでWordPressにフローティングシェアボックスを追加する

WordPressサイトにフローティングシェアボックスを作るにはどうしたらいいかという問い合わせのメールを大量に受け取っていた。プラグインが必要なのでしょうか?私たちのチームと協力した結果、個々のメールに返信するよりも、無料のプラグインを作成した方が効率的だと判断しました。

このスマート共有プラグインは何をするのですか?

スマートシェアリングは、個別投稿にのみソーシャルメディアボタンのあるフローティングボックスを追加します。初期設定では、retweet、facebook、digg、stumbleuponから選択できます。しかし、独自のカスタマイザーコードを追加する設定もあるので、これらの選択肢に限定されることはありません。

このプラグインの利点は何ですか?

このプラグインはB.Fスキナーの正の強化理論をソーシャルメディアマーケティングに応用したものです。通常、ボタンは投稿の上部か下部に配置されます。どちらの位置でも問題ありませんが、ベストではありません。投稿の一番下に配置する場合、ユーザーが下まですべて読んでくれることを期待していることになる。投稿を気に入ったユーザーが記事全体を読まないこともある。それでも、ポジティブな補強があれば、あなたの投稿をシェアしてくれるだろう。このプラグインは、ユーザーと一緒にスクロールダウンする小さなフローティングボックスを追加するので、ユーザーはいつでも投票することができる。

このプラグインについてもっと読んでダウンロードする

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

100件のコメント

  1. BijanGhorbani

    i fixed the probleme by removing this :

    <script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2′></script>

    It was called twice.

    Thanks for your quick answer anyway. :)

  2. wpbeginner

    @BijanGhorbani There are various lightbox scripts. One has to be above or below the other. If the SmartSharing scripts are above it, then they will cause the issue.

  3. BijanGhorbani

    @wpbeginner So how do you suggest it would be best to place the JS codes ?

  4. wpbeginner

    @BijanGhorbani The problem is probably the placement of the JS codes.

  5. BijanGhorbani

    I installed this plugin and it works fine but it has disabled all the lightbox effects in my posts, which is really bad. What is conflicting with the lightbox effect in this plugin please ?

  6. AbanoubWahied

    Hi, i just installed this great plugin and all went smooth, my problem is that the plugin isn’t floating like the one on this page, it just sticks at a distance from the top of the page and when you scroll down it doesn’t go down with you.

  7. rdempsey

    @wpbeginner will do. I installed Sharebar as a temporary solution, so I’ll switch them back later on and send a screenshot.

    Thanks!

  8. wpbeginner

    @rdempsey Rob, shoot over an email, so I can see what is going wrong. Please include a link to your site as well.

  9. rdempsey

    @wpbeginner this is the first time I installed the plugin. Just signed up, downloaded, and installed today.

  10. wpbeginner

    @rdempsey Disable the old version of the plugin.

  11. rdempsey

    Downloaded, installed and activated the plugin. Only issue is that two bars are showing up – one static and the other dynamically following the content. I’m on WP 3.1.3 using Genesis 1.6 with a child theme. Any guesses? Thanks!

  12. Dom

    the plugin isn’t working with twentyten theme, wordpress version 3.1.2. How come?

    • Editorial Staff

      Just tried it with Twenty Ten theme, and it seems to work fine.

      • Dom

        !! It does work! I just hadn’t realized there was a separate settings button in the side panel. Nonetheless, the Retweet and Facebook buttons should be check by default IMHO. Anyway, you guys are great! Thanks for the reply.

  13. Mike

    Like wpbeginner.com’s share bar it is not attached to the browser edge as such, so to make it a little better for various screen resolutions just make it fixed to the content and this way the share box will just be cut off when the browser window is resized!

    I replaced the php code for the share box css (in the plugin’s .php file) for static css:

    .sharepost{float:left; border:1px solid #E8E8E8; margin-right:10px; position:fixed; background:#FFF; margin-left:-100px; width:60px; z-index:0}

    .sharer{padding:5px; border-bottom:1px solid #e8e8e8}

    This will get you started, but you’ll have to do all future adjustments from your wordpress plugin editor in the .php file!

  14. Pitchers Hit Eighth

    What changes did you make to the plugin to get it to be invisible on your site in mobile browsers?

    When I load my site on my mobile, the plugin overlaps the content.

    If you could share here, that would be very helpful. Thanks!

    • Editorial Staff

      We do not know why WP Tap is showing the default theme content. Our plugin should only display on the theme because we are adding the code into wp_footer hook.

  15. dan

    I have installed the plugin on a wordpress 3.01 installation and although the installation went through ok and I set up the options, nothing appears on my blog posts.

    Would you be able to take a look at it? The site is linked to me name

    thanks.

    • Editorial Staff

      The plugin is not able to register itself to the footer. You might have to check that function out. A lot of users had this issue when running on Thesis. We are working on a new version of this plugin, which will be kick ass.

  16. Techlook

    is there any this type of script which i can use html site??

    • Editorial Staff

      You can add this on a static site, but you won’t have any backend feature, so everything has to be static. Just add the CSS from this plugin…

  17. Chris

    This plugin worked fine until I upgraded to wordpress 3.0, now its telling me that the plugin causes a fatal error.

    What can I do about this?

    • Editorial Staff

      Just checked the plugin with 3.0 (it works fine). It must have been a problem working with another plugin. Can you please email us the details about your site (site name), the plugins you are using etc, so we can further assist you.

  18. Talk Binary

    I have it installed on my website but unfortunately the StumbleUpon icon isn’t working appropriately. If you click on Stumble, it tries to stumble a certain page, for lots of posts.

    How do I fix this?

    • Editorial Staff

      thats a wp_query error on your site. There is a query running without being resetted.

  19. Nabeel

    Really light weight and nice plugin. (will advice you to make it more lighter :) – and never use jquery with it)

    however, like many people here, i was not able to make the plugin work with my theme too (using thesis 1.7) however i’ve solved the issue by making change in the code by replacing your get_footer to wp_footer. hopefully it will make some changes in your next release :)

    for those who need to fix the issue that the slider is not shown at all after activating the plugin, i’ve explained the steps here: http://nabtron.com/smart-sharing-plugin-now-showing-on-thesis-1-7-theme-solved/2653/

  20. Udegbunam Chukwudi

    The code ain’t working. I just added to my page template and it doesn’t show up @ all.

    Is there a particular place in the page template where it needs to be added?

    Hope to hear from you soon. Cheers ;-)

  21. Udegbunam Chukwudi

    Thanks for an awesome plug-in. I’ve been searching the worldwideweb over for something like this. ;-)

  22. Naren Ubi

    In this very page, I see that the retweet and Fshare thingy disappears for lower resolutions (for 1024×768 and 800×600). How do I achieve this? It’s such a nice plugin, but doesn’t look good when it floats over page text when in the aforementioned resolutions.

    • Editorial Staff

      You would have to disable the auto addition, and then add the function manually where you want to call it. We are working on expanding the options of this plugin.

      • Naren Ubi

        Thanks for the reply! Any idea when you might be releasing an updated version of this plugin?

  23. Vincent

    Thx for this plugin. Got a problem. My facebok share button, when i publish it cant show the name of the article anymore? And not the picture either? Can I solve this?

  24. Jordan

    I have activated this plugin and its not showing up on my page? Not sure whats going on here but i’m pretty sure I’ve done everything correct.

    • Editorial Staff

      Your theme is not compatible. You would need to add the function add_smartsharing(); in your single.php

  25. Michelle

    I just uploaded the plugin and I love it, but I’m getting a 404 error with tweet meme. Tweet meme worked just fine when I had the individual button installed. I only need to enter my twitter name, right? I deactivated the original meme I had installed, and cleared my cache, but it still shows up with a question mark. Help?

  26. izzy

    It’s not showing up on my website, Don’t know why or even how to begin troubleshooting

    • Editorial Staff

      It does not work automatically with all themes. You would need to add the following function in your single.php file add_smartsharing(); << remember to wrap it around with PHP and it will work.

  27. MrGroove

    Nice plug-in. Was looking for something similar to mashables and I think you have the best so far short of my creating my own.

    Thnx for the custom code info.

  28. Social Media Master

    THank you so much for this! I saw this on mashable.com and have been wanting it for my new social media blog. I didn’t know the name of the plugin, thank you so much. Great website by the way! How many social sites can be on this plugin at once?

  29. Pedro

    Hi

    I’ve just downloaded and installed your plugin, and it works like a charm… except for one small detail.

    The captcha dialog is a real turnoff, especially since the words are not always that legible. How can I get rid of it? I already looked into the plugin code, but I couldn’t find anything that looked like it.

    Could you please point me in the right direction?

    Many thanks and congrats for your work.

  30. christian

    This is like the hottest social media network plugin in the world! :) I really love it but I hope you could make it as awesome as the one in Mashable :)

  31. Steo

    I’m wondering why the box is attached to my browser edge instead of my content just like you have here…in this way works fine, but in mine it overlap the content for resolutions smaller than 1024px….please help me! :)

    • Editorial Staff

      The reason why it is attach to the browser screen is because it is the easiest and simplest way to add it. By doing it this way, we can make this plugin usable for most themes. You can see the CSS of this plugin, and then apply it manually on your site if you want. It is a simple position:fixed tag. The only thing is, you will not get any of the admin panel functions by doing it that way.

      You can modify the plugin file a little bit. Change the CSS properties to your needs, and then change the auto add filter. Then add the plugin function add_smartsharing() manually in your single.php file next to your content div. But that is a lot of work and only users with experience with PHP and HTML/CSS will be able to do it.

      • Diana Freedman

        Can you please create a blog post with instructions for how to make this modification (or even how to add that additional functionality Mashable has where the share buttons snap to above the content when the browser is reduced to a certain width)? Or email me. I’ll donate! ;-)

        • Editorial Staff

          No we will not be publicly providing any tutorials on how to customize the CSS. This plugin is released as-is and we will not be providing any free support.

  32. Will

    Are you guys going to implement Facebook’s new “Like Button” into this plugin instead?

    Seems like it’ll be a lot more “stickier”

  33. Will

    Thanks for the plugin! I’ve been searching high and low for this Mashable style sharing widget.

    Was thinking of the Meebo bar.. but this is PERFECT!

  34. Sascha

    First off! Awesoem plugin!

    I have installed it and it works fine ;)

    I just have a small problem if i click on retweet i always been redirect to tweetmeme :( How cna i get it workin that the useer who clicks on retweet gets redirect direct to our tweeter account ?

    Many thanks

    Sascha

    • Editorial Staff

      This is a tweetmeme issue. Not everyone gets redirected there, only some people do. Don’t know why, but they do. The easiest way is to get rid of it and use an alternative script by adding it in the custom codes.

      • Sascha

        Many thanks for the fast replay !
        Is there any chance that you tell me how the script has to look for the custom codes area?

  35. Patrick Braswell

    Thanks for the help! Is there anyway to get the floating sharebox on the home page?

    • Editorial Staff

      NO because homepage has more than one post. If your homepage only has one post then sure, otherwise no.

  36. Pat

    Hello,

    How do you align the floating share bar to the content and not the edge of the browser? I see that your’s aligns to the content but the plugin does not. Any help would be great.

    Thanks!

    • Editorial Staff

      That is possible only if you add the function manually and modify the css to fit your needs. You need to understand the css fixed property and add it in your single.php.

      Here is how you can do it. First activate the plugin, then open your theme’s function.php file. Add the following line:

      remove_action( 'get_footer', 'add_smartsharing' );

      By doing this, you just removed the automatic function. Then you can place this code in your single.php file to call the function manually where you like.

      function add_smartsharing()..

      You would also have to edit the CSS file to match your needs. The plugin by default will not add it next to the content.

      Remember to make sure to edit the CSS to fit your needs. The defau

      • Diana Freedman

        Hello! Can you please elaborate on how to edit the CSS? It seems that your reply here was cut off.

        Thanks!
        Diana

  37. Kyle

    I’m trying to implement a floating share toolbar like the one mashable uses on a tumblr blog, is there anyway CSS, HTML or jquery version of this could be derived from this plugin? And if so how hard/easy would it be?

    • Editorial Staff

      This plugin is solely for WordPress. You can use the codes from this plugin if you want to implement on your site as long as you give us credit.

  38. Sigurfreyr

    I uploaded the sharesmart plugin to my wordpress site and every thing went well. My site is however not in English (yes guess what, it is true there is a whole world out there that doesn´t read or speak English). Is there any way to change for example ,,Share”, “shares” into another language?

    • Editorial Staff

      Unless stumbleupon, facebook, and tweetmeme has that option. It is not in our control. Those are 3rd party javascripts.

  39. Vanesa

    Hello Syed!
    I love your plugin. I’ve installed and worked perfect. But now that I’ve changed the theme, it disappeared. I also tried to uninstall and install again, but still nothing appear.
    Thanks a lot for your help!

    • Editorial Staff

      Don’t know what could be the issue. We would have to look at it. So please email us with more details using our contact form.

  40. Diana Freedman

    You guys are awesome. I’ve been looking like something like this for a while now, and it works perfectly on my blog.

    I tried installing the code for the original Facebook Share button (http://www.facebook.com/facebook-widgets/share.php), but this doesn’t seem to work with this plugin (every page refresh would reset the counter). So it’s a shame that I have to lose my share count, but worth it to integrate this awesome functionality.

    Also, can you please direct me to a where I can find the code for a Google Buzz button with the counter?

    Thanks so much for an awesome plugin!

    • Editorial Staff

      You don’t have to lose your share counts? fshare will show the same count that facebook share button will. For google button please read this article on Balkhis about Google Buzz count .

      After reading that page, you would see why it is not right to displaying the buzz count at this moment. But if you still think that you want to deceive your audience with a manipulatable count, then use this tutorial (Link )

      • Diana Freedman

        Hello! I didn’t lose my share counts for most of my articles, but I definitely did for my most recent blog post at the time of installation; I had 27 Facebook shares, but it reset to 0. However, it seems that the share count carried over on the rest of my blog posts.

        Also, is there a way to display this plugin on the homepage as well as individual posts?

        Much thanks! :-)

        • Editorial Staff

          No, this plugin will not display on the homepage unless you add the function in your theme. Although we do not recommended adding this to the homepage. Your homepage has numerous posts, which post will this plugin share?

          Here is the function if you want to call it anywhere else add_smartsharing()

        • Diana Freedman

          Well, you see how Mashable has the Tweetmeme, Facebook Share, etc. buttons on each post on the homepage, and then has the floating share box within each post? I’d ultimately like to do that as well. Though if I can’t it’s the end of the world; my homepage load time is much faster now.

          Thanks again! :-)

        • Editorial Staff

          O ok. That can be controlled via another function. We would have to look into adding that in a future release.

    • Editorial Staff

      You can add the code by yourself in the custom code section, but it is not added by default.

  41. gifer

    thanks a lot dear, i was looking for a plugin like that :)

  42. Scott

    I’ve been trying the plugin on multiple sites and it won’t show up anywhere.

    • Editorial Staff

      Please contact us using the contact form, so we can look at it. It will only show on single posts pages.

  43. Steven

    Entered e-mail and clicked Download, but never got a link to download.

    • Editorial Staff

      Did you get a confirmation email that asked you to confirm the email? If so, right after that email you should have received a welcome email. Please check your SPAM. If not then contact us via the contact form.

  44. Chuck Reynolds

    You know… not as cool as Mashable’s version but it’s a good start. I think some simple jquery tweaking and some css positioning would make it act more like I’m looking for.
    Strong work tho, nice plugin.

    • Editorial Staff

      Chuck,

      This is the first version of this plugin. The reason why we can’t use the jQuery version in a generic plugin release because you need to have a specific place to insert the plugin. Mashable has it right by the post. Each theme has different post classes. This would make it very hard to release jQuery version for the public end. If you have any suggestions, we are open for it. (Note: coding a jQuery box that floats is not hard. Adding it into WordPress using a plugin is the hard part). The only thing that may work is adding it within the post content. We would have to try that. If you have other suggestions please let us know.

      • Chuck Reynolds

        oh understood. I appreciate the work and you guys releasing it, and your time in responding to me. So my initial issue with this one is on smaller screen resolutions this one will cover the content, mashable’s hides itself from the left and turns into a horizontal section right above the post content. THAT is amazing lol.
        I know your intent wasn’t to create what they did but that’s got some polish you’ve gotta admit! :)

        Do you guys have a roadmap or ideas for improving this current plugin?

        • Editorial Staff

          Chuck,

          You are correct that mashable is doing it that way. But as we mentioned that it is something that we are considering on adding to this plugin. No future release date has been finalized yet. We are still trying to see whether it would work with all themes.

          Each theme works differently and that is something custom. They have the horizontal width specified. But we don’t know what is the horizontal width on other themes. So for themes with smaller content area, it would break the theme.

          If you are a developer, then you should understand exactly what we are talking about.

          No doubt, that Mashable’s plugin is a more polished version, and we will add something like that on WPBeginner soon, but we think it is more of a custom solution rather than a generic one.

        • jeh

          This is great, but I find it interfering with my text at 1024. Even without having it transform to a horizontal option, how can I have it disappear into the left margin as it does here, when the window is too small? Thanks.

        • jeh

          I found the answer farther down in the comments. Feel free to delete. Thanks.

  45. Filip

    hello…i was curious about this plugin…i`ve download it, and tryed to install it locally…(i am using xampp – don`t think it has anything to do with it)…and i get this error:

    Parse error: syntax error, unexpected $end in C:\xampp\htdocs\blog\wp-content\plugins\smartsharing\smart-sharing.php on line 507

    have any ideea?

    anyway, thanks for sharing

    • Editorial Staff

      Don’t know what could be causing it. The developer said it is working fine on their WAMP.

  46. Alexander maxham

    I downloaded the Floating Share Box plugin and activated on my wordpress blog but it isn’t appearing on the post pages. Does it conflict with any other plugins?

    • Editorial Staff

      Not that we know of. Just uploaded it to a site that has over 30+ plugins running, and it is working. Alex you want us to take a look to see what is going on ? Please email us with your info.

      • Alexander maxham

        I got the plugin to work, but what I was wondering is, how hard would it be for me to add a “google Buzz” button to the floating share box?

        • Editorial Staff

          Look in the customization tab of the plugin page. You can add anything in the custom codes section. Just use the div settings we mentioned in that article.