Return to Support

Social Sharing Button Code – Facebook showing up out of alignment

Home Forums Graphene WordPress theme Support Social Sharing Button Code – Facebook showing up out of alignment

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #9072
    knbs
    Member

    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>

    #42711
    Prasanna SP
    Member

    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.

    #42712
    knbs
    Member

    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.

    #42713
    Prasanna SP
    Member

    Try vertical-align: top !important;

    #42714
    knbs
    Member

    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>

    #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.

    #42716
    Prasanna SP
    Member

    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.

    #42717
    Quote:
    Add this to Custom CSS,

    Graphene Options >> Display Options >> Custom CSS

    #42718
    knbs
    Member

    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.