[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2013-05-15
3
Medium Priority
?
579 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

830 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