Question

I have been tasked with rebuilding a WordPress site… I am comfortable with PHP but WordPress seems to hold a few surprises, but I am learning.

However, the site that I am working on wants me to move their social media buttons from the bottom of the sidebar to the top, and wants the buttons to be more functional… currently, they are only linking to their profiles.

I went ahead and grabbed the official twitter buttons, as well as facebook and linkedin… I grabbed both major buttons (like and share) from each site.

After dropping all of these buttons into the proper position… NONE of them appear. I have had some of them appear from time to time, but it appears sporadic and unpredictable; of them, the worst of the bunch appears to be LinkedIn.

Code is listed below, an is currently hosted at techbuildersgroup.com/GO/GO.html for those that would prefer to see the code in a live environment. (please, I know its ugly, its beta… and yes, its a table, but WP wasn’t liking playing nice with my css… it will get better).

At this point, I am not even sure what is causing these not to appear, they seem to generally be iframes, and when I grab the link for them, they open perfectly fine directly in browser, but when embedded into the page they fail… could this be a WordPress issue? Any way around it? Anyone else see this happen before?

Thank you in advance for anyone able to help with this… it has been driving me nuts.

<!-- Social Media Buttons -->

<table style="border:0px;margin:0px;padding:0px;" cellpadding=0 cellspacing=0>
    <tr style="padding:0px;margin:0px">
        <td  style="width:150px;border:0px;padding:0px;margin:0px;">
            <h3>Follow Us!</h3>
        </td>
        <td  style="width:120px;border:0px;padding:0px;margin:0px;">
            <h3><span style="text-align:right">Share Us!</span></h3>
        </td>
    </tr>
</table>
<!-- Twitter -->
<table style="border:0px;margin:0px;padding:0px;" cellpadding=0 cellspacing=0>
    <tr>
        <td style="width:150px;border:0px;padding:0px;margin:0px;">
            <iframe allowtransparency="true" frameborder="0" scrolling="no"
  src="http://platform.twitter.com/widgets/follow_button.html?screen_name=gonetworkstl&show_screen_name=false"
  style="width:150px; height:20px;display:inline;padding:0px;margin:0px;">
                    </iframe>
        </td>
        <td style="width:120px;border:0px;padding:0px;margin:0px;stackoverflow.com09<iframe allowtransparency="true" frameborder="0" scrolling="no"
        src="http://platform.twitter.com/widgets/tweet_button.html?url=http://gonetworkstl.com"
        style="width:130px; height:20px;padding:0px;margin:0px;"></iframe>
        </td>
    </tr>
</table>
<!-- FaceBook -->
<table style="border:0px;margin:0px;padding:0px;" cellpadding=0 cellspacing=0>
    <tr>
        <td style="width:150px;border:0px;padding:0px;margin:0px;">
            <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgonetworkstl.com&amp;send=false&amp;layout=button_count&amp;width=150&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:20px;display:inline;padding:0px;margin:0px;" allowTransparency="true"></iframe>
        </td>
        <td style="width:120px;border:0px;padding:0px;margin:0px;">
            <a name="fb_share"></a> 
                    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
                    </script>
        </td>
    </tr>
</table>
<!-- LinkedIn -->
<table style="border:0px;margin:0px;padding:0px;" cellpadding=0 cellspacing=0>
    <tr>
        <td style="width:150px;border:0px;">
            <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
            <script type="IN/FollowCompany" data-id="2229259" data-counter="right"></script>
        </td>
        <td style="width:120px;border:0px;">
            <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
            <script type="IN/Share" data-url="http://gonetworkstl.com" data-counter="right"></script>
        </td>
    </tr>
</table>

Answer 1

Try this code, you can style them with DIV’s in your CSS stylesheet.

replace XYZ with your URL

<head>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<!-- Facebook-->
<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/all.js#xfbml=1&appId=187567691292898";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Linkedin -->    
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

</head>

<body>
<div id="facebook">
    <div class="fb-like" data-href="XYZ" data-send="false" data-layout="button_count" data-width="70" data-show-faces="false"></div>
</div>

<div id="linkedin">
    <script type="IN/Share" data-url="XYZ" data-counter="right"></script>
</div>

<div id="twitter">
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="XYZ" data-lang="en" data-dnt="true">Tweet</a>
</div>
</body>