21 Replies Latest reply: Oct 21, 2014 10:23 AM by FormUser RSS

    Need code for a strip of social share buttons

    FormUser Community Member

      I have put social share buttons side-by-side using code posted at developers’ pages https://developers.facebook.com/docs/plugins/share-button/

      https://developers.google.com/+/web/share/

      https://dev.twitter.com/web/tweet-button

      https://developer.linkedin.com/plugins/share-plugin-generator

       

      The result is an uneven look as each social network has its own button style, see http://www.ottawapatentagency.com/index2.html

       

      I would appreciate code for a strip of social share buttons, each button being square (about 24 pixels square) or at the very least of equal size and shape, for an even look, thanks!

        • 1. Re: Need code for a strip of social share buttons
          Ben Pleysier CommunityMVP

          I would use my own buttons and link them to the relevant page

          • 2. Re: Need code for a strip of social share buttons
            FormUser Community Member

            Thanks, Ben, but linking alone does not accomplish the sophisticated 'share' function which allows for selecting particular audiences at the particular social network (such as selected friends or selected community groups at that particular social network) as well as for tailoring the messages to be shared with those selected audiences.

             

            I think the issue is that each social network has its own script to perform the sophisticated 'share' function and with that script (and settings within that script) comes a limited selection of button sizes and styles. There is no coordination between the social networks as to button sizes and styles. Hence, if you put those social share buttons in a row, you get the uneven look.

             

            I think that a competent programmer would know how to write the code for achieving an even look, but I am unfortunately not a programmer. This is an often needed feature on websites, I hope that someone would share the code

            • 3. Re: Re: Need code for a strip of social share buttons
              Ben Pleysier CommunityMVP

              Copy and paste the following into a new document and view in a browser.

              <!doctype html>
              <html>
              <head>
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta charset="utf-8">
              <title>Untitled Document</title>
              <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
              <style>
              i.fa {
                  font-size: 28px;
                  color: blue;
              }
              i.fa span {
                  font-size: 12px;
                  padding: 2px;
                  border: 1px solid blue;
                  -moz-border-radius: 4px;
                  -webkit-border-radius: 4px;
                  border-radius: 4px;
                  -khtml-border-radius: 4px;
                  vertical-align: middle;
              }
              </style>
              </head>
              
              <body>
              <a href="https://www.linkedin.com/cws/share?url=http%3A%2F%2Fwww.ottawapatentagency.com%2Findex.html%23reaching_out&original_referer=http%3A%2F%2Fwww.ottawapatentagency.com%2Findex2.html&token=&isFramed=false&lang=en_US&_ts=1413338443298.8228" class="fa"><i class="fa fa-linkedin"> <span>share</span></i></a>
              </body>
              </html>
              

               

              The above will need a modal window to open the link into. The other icon can be made in a similar fashion

              • 4. Re: Re: Need code for a strip of social share buttons
                FormUser Community Member

                Thanks, Ben, but the code goes via a third party (cloudflare.com) which is something that I'd rather not do. I don't need any counts nor analytics.

                 

                Any code that does not go via a third party (i.e. code that goes only on the webpage itself and nowhere else) that gives me an even look for the strip of social share buttons?

                • 5. Re: Need code for a strip of social share buttons
                  osgood_ CommunityMVP

                  Maybe this will help, link below (It seems like to achieve the 'uniform' appearance you are looking for you will have to use some custom images)

                   

                  https://simplesharebuttons.com/html-share-buttons/

                  • 6. Re: Need code for a strip of social share buttons
                    FormUser Community Member

                    Well, it is the same 'third party' story (the code goes via simplesharebuttons.com in this case) which is something that I do not want. I want the code to go directly to the social networks and nowhere else. And achieve the even look when lining up the social share buttons.

                     

                    Is a user with the handle 'Preran' gaming the system, BTW? He is marking everything with 'helpful'. Or is 'Preran' a robot?

                    • 7. Re: Re: Need code for a strip of social share buttons
                      Ben Pleysier CommunityMVP

                      I don't believe that I am answering this in defense of Font-Awesome. I merely used the Cloudflare CDN as a means for you to view an example.

                       

                      If you want the Dreamweaver extension for Font-Awesome, have a look here http://www.dmxzone.com/go/22519/dmxzone-font-awesome/. That way you will not have to use a CDN

                      • 8. Re: Re: Need code for a strip of social share buttons
                        Ben Pleysier CommunityMVP

                        Preran is a very conscientious Adobe staff member that monitors what we do and say. He marks posts as HELPFUL when he considers this to be so. He will also escalate problems that we as users cannot find an answer to. He is definitely not a robot.

                        • 9. Re: Re: Need code for a strip of social share buttons
                          FormUser Community Member

                          Well, the dmxzone stuff leads to scalable icons, but not code for social share buttons. I am not putting down any of dmxzone, cloudflare, simplesharebuttons, it is just that none of them do what I need, which is, to say it once again, an even looking strip of social share buttons that go directly to the social networks and not anywhere else.

                           

                          No disrespect meant, but if there is no code forthcoming that does what I have precisely defined in the above underlined sentence, how can it be useful?

                           

                          (I do thank everyone who is trying to help, though, no question about that)

                           

                          I have been looking around quite extensively on the web these past few days, and all even looking strips of social share buttons go via third party websites. All rows of social share buttons that go directly to the social networks look uneven, and there are many, many websites that try to disguise the uneven look with layout tricks - with limited success, I should say.

                           

                          My hope of getting code that does the thing in the above underlined sentence is sinking, to be perfectly frank, but I better leave the issue open, just in case good luck comes knocking on the door. Perhaps the Dreamweaver designers at Adobe will come knocking on the door?

                          • 10. Re: Re: Need code for a strip of social share buttons
                            Ben Pleysier CommunityMVP

                            No disrespect meant, but if there is no code forthcoming that does what I have precisely defined in the above underlined sentence, how can it be useful?

                            What utter nonsense. I gave you an example that you did not like because of the CDN. I then gave you a link to an extension so that you would not have to use the CDN.

                             

                            Have you tried the example? Can you tell me what code has not been forthcoming?

                            • 11. Re: Need code for a strip of social share buttons
                              osgood_ CommunityMVP

                              FormUser wrote:

                               

                              Well, it is the same 'third party' story (the code goes via simplesharebuttons.com in this case) which is something that I do not want. I want the code to go directly to the social networks and nowhere else. And achieve the even look when lining up the social share buttons.

                               

                               

                               

                              It does in the example - read the page and it explains 'simply' how to alter the code. If you take the example code and paste it into a DW file and click on the images it does exactly the same as what your code does.

                              • 12. Re: Need code for a strip of social share buttons
                                FormUser Community Member

                                Folks, no harsh feelings.


                                I need code that does exactly what is already on the page http://www.ottawapatentagency.com/index2.html just that the strip of social share buttons at the bottom of that page should look even. The issue is thus not one of function, rather the issue is one of looks.


                                That’s the best I could do with all the code and advice received so far, i.e. the buttons already go directly to the social networks, but the strip looks uneven.


                                Any code that I can simply copy and paste? As I said, I am not a programmer.


                                Again, no harsh feelings, I am just looking for help.



                                • 13. Re: Need code for a strip of social share buttons
                                  FormUser Community Member

                                  After agonizing for almost week, I am going for what is now on the page http://www.ottawapatentagency.com (I took the index2 page down) I am still not quite happy with the uneven look of the strip of social share buttons at the bottom of the page, although the buttons work perfectly.

                                   

                                  If anyone can improve on the uneven look, I am all ears!

                                  • 14. Re: Need code for a strip of social share buttons
                                    Preran Employee Hosts

                                    Hi FormUser,

                                     

                                    Like Ben said, I am no robot (although sometimes I wish I were one ).

                                     

                                    For your consumption, this is the logic we moderators use when marking answers as Helpful or Correct:

                                     

                                    Helpful: Any answer that provides a lead to the user that has posted the question, or to any other user with a similar issue that will potentially visit this post at a later point in time.

                                     

                                    Correct: When we are sure that the answer provided is the closest possible solution to the posted question. Most times, we mark answers as correct after the user has confirmed the solution.

                                     

                                    Effective functioning of communities demands certain courtesies. Adobe Forums is among the post popular self help forums on the internet driven by the tireless work of Adobe's community of experts.  On Adobe forums, and even otherwise, I have personally found that my questions are answered best when I provide all details required to solve my issue, and I leave my emotions aside during the troubleshooting process.

                                     

                                    Thank you for using Adobe forums. I do hope that you find the answer you are looking for.

                                     

                                    Thanks,

                                    Preran

                                    • 15. Re: Need code for a strip of social share buttons
                                      FormUser Community Member

                                      Sorry, no, I am still not able to improve on the uneven look. When I pointed that out in spite of postings being marked ‘helpful’, I got abused “what utter nonsense”. I kept my composure, I wish everyone kept their composure.

                                      • 16. Re: Need code for a strip of social share buttons
                                        Ben Pleysier CommunityMVP

                                        I deeply regret that you feel abused by a statement that I made. But when you start a sentence with 'No disrespect meant', you already knew that it contained a form of disregard.

                                         

                                        The intended outcome of my statement was to carry a strong message that the icons is a matter of choice. Either you continue on the path of application supplied images or you go for the method that I suggested.

                                         

                                        You have chosen the former, which is your right. I would have chosen the latter where I have control over the icons.

                                        • 17. Re: Need code for a strip of social share buttons
                                          Ben Pleysier CommunityMVP

                                          You may like to see these errors caused by a combination of DOCTYP and social icons.

                                          • 18. Re: Need code for a strip of social share buttons
                                            Ben Pleysier CommunityMVP

                                            I thought I would have a look at what Adobe are using for this site as in

                                            mine.png

                                             

                                            They are using AddThis to do the heavy lifting. Smart move!

                                            • 19. Re: Need code for a strip of social share buttons
                                              FormUser Community Member

                                              Glad that we are moving past the unnice things.


                                              What I need is code, not advice on how to arrive at code. Code that I can simply copy and paste on the page http:www.ottawapatentagency.com and does exactly what the strip of social share buttons at the bottom of that page currently does, only that the strip should look more even.


                                              ‘does exactly what the strip currently does’ means going directly to the social networks, and not via third party websites such as AdThis or dmxzone, cloudflare, simplesharebuttons which have also been mentioned further above in this thread. Adobe may like going through a third party website, I and many, many others on the net do not.


                                              I have mentioned the need for code and what it should do and not do, several times by now. Let's post some code that I will copy and paste, and we'll hopefully see an even strip, thanks!

                                              • 20. Re: Need code for a strip of social share buttons
                                                Nancy O. CommunityMVP

                                                @FormUser,

                                                Frankly your presumptuous expectation that we are here to serve you is a little hard to take.  This is a user-to-user forum.  NOBODY here gets PAID to answer your questions.  So far you have received two very good solutions.  If you chose not to use them, that's your prerogative.   If want custom code, I suggest you hire an experienced web developer to help you.

                                                 

                                                 

                                                Nancy O.

                                                • 21. Re: Need code for a strip of social share buttons
                                                  FormUser Community Member

                                                  This is a user self-help forum, isn’t it? Expecting precisely defined help here is not a ‘presumptuous expectation’.


                                                  As to custom code, I suggested myself further above that Dreamweaver designers at Adobe could provide custom code for this often needed feature. But hearing just now that Adobe itself goes via a third party website, I don’t think that custom code is realistic for me (I am much smaller than Adobe)

                                                   

                                                  I think I better give this topic a rest for now, this is going nowhere at the moment. Will pick up this topic at a better time. Thanks nonetheless for all comments received!