Improve company productivity with a Business Account.Sign Up

x
?
Solved

create an button style as facebook like button, google + button

Posted on 2013-05-15
3
Medium Priority
?
583 Views
Last Modified: 2013-05-16
hi, i want to create an button to show a number just like the facebook like button or the google plus button, what the best way to accomplish this and be the same look as those buttons, size and style.
0
Comment
Question by:rafaelrgl
3 Comments
 
LVL 6

Expert Comment

by:APoPhySpt
ID: 39170908
It may not even be what you are looking for, but your post reminded me of this page, I accidentely opened couple days ago:
https://www.inboundnow.com/apps/facebook-like-button-generator/
0
 
LVL 1

Author Comment

by:rafaelrgl
ID: 39170981
it's a good page, but it's not what i mean.  Do you know the like or the google + button, it's small, and have an blank balloon with the numbers of likes on the side. that's what i want,
0
 
LVL 16

Accepted Solution

by:
Rose Babu earned 2000 total points
ID: 39171274
if you like jquery to display the count next to button with balloon popup then try the below sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/css/document.css"
        rel="stylesheet" type="text/css" />
    <link href="http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/css/jquery-bubble-popup-v3.css"
        rel="stylesheet" type="text/css" />

    <script src="http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/scripts/jquery-1.7.2.min.js"
        type="text/javascript"></script>

    <script src="http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/scripts/jquery-bubble-popup-v3.min.js"
        type="text/javascript"></script>

    <script type="text/javascript">
<!--
        $(document).ready(function() {

            //create bubble popups for <DIV> elements
            $('.button').CreateBubblePopup({
                innerHtml: '25K',
                position: 'right',
                align: 'middle',
                innerHtmlStyle: {
                    color: '#333333',
                    'text-align': 'center'
                },

                themeName: 'orange',
                themePath: 'jquerybubblepopup-themes'
            });

            //show bubble popup of button #1
            $('#button1').ShowBubblePopup();

            //freezing method causes the bubble popup to not respond on events (click, mouseover, mouseout, ...)
            $('#button1').FreezeBubblePopup();

        });
//-->
    </script>

</head>
<body>
    <div class="content">
        <table style="border-collapse: separate; border-spacing: 20px;">
            <tbody>
                <tr>
                    <td>
                        <div id="button1" class="button">
                            button #1</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Open in new window

Reference:

http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/position-align.html

http://www.maxvergelli.com/jquery-bubble-popup/documentation/

this will be suit well for your need.

and you can load the count asynchronously. have a look on the below link and integrate it in the above sample

http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/load-asynchronous-content.html

Hope this will help you a lot
0

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question