Social Sharing Button Code – Facebook showing up out of alignment

  • knbs

    #9072

    I generated our social media code through utilizing the developer buttons on twitter, facebook and linkedin as recommended by Social Media Examiner article: http://www.socialmediaexaminer.com/customized-social-share-buttons/

    I can not get the facebook to line up with the other two buttons even with resizing.

    Any “easy” advice?

    Here is the website: http://www.podsretailkiosk.com/

    Here is the code:

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script><div class="fb-share-button" data-width="47" data-type="button_count"></div>
    <a href="https://twitter.com/share">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    <script src="//platform.linkedin.com/in.js" type="text/javascript">
    lang: en_US
    </script>

    <script type=”IN/Share”></script>

    Prasanna SP

    #42711

    Add this to Custom CSS,

    .fb-share-button {
    vertical-align: top;
    }

    Put code in between backtick (

    Code:
    `

    ) characters. It’s usually located above the Tab key on your keyboard.

    knbs

    #42712

    I just tried to add it this way is the CSS and it did not work.

    .fb-share-button {vertical-align: top;}

    I also tried:

    .fb-share-button {
    vertical-align: top;
    }

    I greatly appreciate any other ideas.

    Prasanna SP

    #42713

    Try vertical-align: top !important;

    knbs

    #42714

    I do not think I am entering it into the CSS correctly. Exactly how would is look and be entered into the code for the Graphene Social Sharing buttons? Please show me where and how it would look by typing it into the current code below.

    Thank you for your help.

    <meta property=“og:title” content=“This is the Title of the Page”/><div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script><div class="fb-share-button" data-width="47" data-type="button_count"></div>
    <a href="https://twitter.com/share">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    <script src="//platform.linkedin.com/in.js" type="text/javascript">
    lang: en_US
    </script>
    <script type="IN/Share"></script>
    Mod

    Kenneth John Odle

    #42715

    Put code in between backtick (

    Code:
    `

    ) characters. It’s usually located above the Tab key on your keyboard. I have fixed this for you, but the code you entered may have been mangled already.

    Prasanna SP

    #42716

    Go to Graphene Options –> Display –> Custom CSS and put the code there.

    Put code in between backtick (

    Code:
    `

    ) characters. It’s usually located above the Tab key on your keyboard.

    Mod

    Kenneth John Odle

    #42717
    Quote:
    Add this to Custom CSS,

    Graphene Options >> Display Options >> Custom CSS

    knbs

    #42718

    I enter it into the custom CSS style space, which was currently empty, in the following ways and none worked.

    .fb-share-button {vertical-align: top !important;}

    .fb-share-button vertical-align: top !important;

    vertical-align: top !important

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.