placement of facebook and twitter plugins

I am curious to know if there would be any issue if I were to utilize these two scripts on the same page:

<a class="twitter-timeline" width="200" height="440" href="https://twitter.com/smth" data-widget-id="347786415695880192"></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>

and this one:

<a class="fb-like-box" data-href="http://www.facebook.com/pages/smth/12345328620951" data-width="282" data-height="430" data-show-faces="true" data-stream="true" data-header="true"></a>


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

As both contain variables with the same name and I have encountered an issue where setting them in the same CSS position results in them not appearing at the same coordinates. Specifically, the Facebook plugin's position seems to be influenced by where the line is written, causing it to affect all page coordinates.

Thank you!

Answer №1

Include

style="width:282px; position:absolute; left:-162px;"

Incorporate <a class="fb-like-box"...

By doing this, the box will align vertically with the Twitter widget and then shift it to the left so as not to overlap with the magazine.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to position a small square box over each td element containing text using css?

Currently, I am in the process of developing an HTML table where I would like to incorporate a square box around each td element using CSS <tr> <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php e ...

What is the best way to horizontally center my HTML tables and ensure that they all have uniform widths?

I'm currently facing an issue where I'd like to center align all tables similar to the 'Ruby Table.' However, I'm unsure of how to achieve this. You may also observe that some tables have varying widths. What CSS rule can I apply ...

What potential issues could arise from utilizing a numerical value as an identifier or class in an HTML4, XHTML, or HTML5 webpage?

I am hesitant about using elements with either id="12" or class="12", as the title suggests. Although it is allowed by the specifications, particularly in HTML5, have you faced any issues when doing so? In my specific scenario, I have <li> elements ...

Guide on displaying content in two different tabbable ID's when one tab is selected in a Rails 3.2 App using Twitter Bootstrap's Tabbable Tabs

My implementation using Twitter Bootstrap's bootstrap-tab.js includes: <ul class="tabnavcenter" id="myTab"> <li class="active"><a href="#home" data-toggle="tab">about</a></li> <li><a href="#tab2" data-togg ...

Converting blobs to strings and vice versa in Javascript

After successfully converting a blob to a string using FileReader, the challenge now is to convert it back: var reader = new window.FileReader(); reader.readAsDataURL(blob); reader.onloadend = function() { base64data = reader.result; var blobToSend ...

Guide on aligning text to the center in the navigation bar

I am currently experimenting with a dropdown navigation bar using pure CSS. However, I am facing issues with text alignment as it only aligns the dropdown text. Setting left: 50% and right: 50% does center the text, but it doesn't cover the width of m ...

Revitalize Your Preact SSR with Live Reload and Rebuilding

I'm currently exploring the option of implementing automatic browser refreshing in my preact ssr build development environment. package.json "scripts": { "test": "echo \"Error: no test specified\" &am ...

In JavaScript, ensure to directly use the value of a variable when defining an asynchronous function, rather than by reference

Hello there, Let me paint you a picture: for (j = 0; j < btnArr.length; j++) { var btn = document.createElement("button"); btn.addEventListener("click", function() { press(this, j) }, false); div.appendChild(btn); } The issue at hand is t ...

Guide on retrieving the mouse button press from a command event using XUL

There appears to be a difference between the XUL command and click events. While my function is called when using the command event, the event object does not include the button property. I'm trying to figure out: how can I determine which mouse but ...

Is there a way to track the number of visits by a 'user' to a website?

Looking to hide certain parts of my website from users who have visited more than a specified number of times. The NY Times site has something similar. Utilizing react & firebase for this project. Considered using IP addresses, but it seems to identify l ...

NodeJS Fork - React each instance a new line is detected from the child process

I am currently working on creating a NodeJS function (on Windows7) that listens to a subprocess and handles each newline sent through the subprocess in Node. The following example demonstrates this: var express = require('express'); var app = ex ...

Trigger an Angular2 component function from an HTML element by simply clicking a button

I'm just starting out with TypeScript and Angular2 and encountering an issue when trying to call a component function by clicking on an HTML button. When I use the **onclick="locateHotelOnMap()"** attribute on the HTML button element, I receive this ...

Retrieve the Response object when an ASP.NET Button is clicked

Within my ASP.NET Webform, I have a server-side Button with an Onclick event registered on it. <asp:Button ID="UploadButton" CssClass="btn add btn-primary" runat="server" Text="Upload File" OnClick="UploadBut ...

aligning content that has exceeded the boundaries

I have a list of dynamically created <a> tags without text, to which I apply background images. These icons are displayed within a <div> container using the float: left; style. As the row of icons becomes too long, it overflows and starts a ne ...

Leveraging URL parameters to automatically enable the initial selection in a linked dropdown menu and trigger an OnChange event

Project Description: I have successfully implemented a search form with 5 dependent drop-down menus that are crucial for filtering data. The first dropdown, labeled dim_id, is chosen on the product_request page and triggers an OnChange event which sends th ...

Retrieving the variable value instead of a reference using Ajax in ASP

After spending nearly two days trying to figure out this code and researching every possible solution, I still haven't been able to get it to work properly. It's likely that I'm implementing it incorrectly or missing something, so I've ...

Looking for a straightforward way to share content on your Facebook fan page using PHP but encountering an error?

When attempting to create a post on my Facebook page, I encountered an error. Below is the PHP code snippet I used: <?php $page_access_token = $token; $page_id = $pageid; $data['picture'] = "http://www.example.com/image.jpg"; $data[ ...

Looking for assistance with importing OBJ and MTL files into Three.js?

I'm encountering a strange issue while attempting to load an OBJ and MTL file in Three.js using the OBJMTLLoader() function and am unable to find a solution online. My project structure includes an index.html file and a js folder with all the necessar ...

Tips for arranging two divs from a single column to display side by side on smaller screens instead of stacked on top of each other

My knowledge of CSS, HTML, and bootstrap is quite limited. I'm trying to figure out how to split a single column on a large screen into two columns on a smaller screen so that the content in two divs appears side by side instead of stacked on top of ...

I can't seem to figure out why this isn't functioning properly

Upon examining the script, you'll notice the interval() function at the very bottom. The issue arises from bc-(AEfficiency*100)/5; monz+((AEfficiency*100)/5)((AFluencyAProduct)/100); For some reason, "bc" and "monz" remain unchanged. Why is that so? T ...