• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 581
  • Last Modified:

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

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
rafaelrgl
Asked:
rafaelrgl
1 Solution
 
APoPhySptCommented:
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
 
rafaelrglAuthor Commented:
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
 
Rose BabuSenior Team ManagerCommented:
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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now