Solved

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

Posted on 2013-05-15
3
552 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 500 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

Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Find out what you should include to make the best professional email signature for your organization.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

770 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