Accessing the FB Page plugin directly within the app browser

Utilizing the Facebook page plugin in a hybrid app created with worklight (6.2.01) looks like this:

<div id="facebook-toc-feed" className="toc-feed">
    <iframe id="fb-feed" src={"https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F" + constants.FB_TOC_FEEDS_URL + "&width="+ this.wWidth +"&height=" + this.wHeight + "&colorscheme=light&show_faces=false&header=false&stream=true&show_border=false&appId=" + constants.FB_APP_ID}></iframe>
</div>

The implementation is carried out using JSX. I'm curious if it's feasible to have links within the FB plugin open in the browser instead of the app itself. Currently, clicking on any link within the plugin (post link, page name) opens it within the app and getting back to the app becomes impossible.

P.S. It's worth noting that only the iframe displays the plugin strangely. The iframe itself is contained in a radio type tab:

<div className="social-wrapper full-content">
    <div className="content-tabs no-shadow">
        <input
            type="radio"
            id="social-radio-facebook"
            name="social-radio"
            value="facebook"
            defaultChecked="true"
        ></input>
        <label htmlFor="social-radio-facebook" onClick={this.showFB}>
            <div className="social-icon facebook">
                <div>{Messages.facebook}</div>
            </div>
        </label>
        <input
            type="radio"
            id="social-radio-twitter"
            name="social-radio"
            value="twitter"
        />
        <label htmlFor="social-radio-twitter" onClick={this.showTwitter}>
            <div className="social-icon twitter">
                <div>{Messages.twitter}</div>
            </div>
        </label>
    </div>

    <div id="facebook-toc-feed" className="toc-feed">
        <iframe
            id="fb-feed"
            src={
                "https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F" +
                constants.FB_TOC_FEEDS_URL +
                "&width=" +
                this.wWidth +
                "&height=" +
                this.wHeight +
                "&colorscheme=light&show_faces=false&header=false&stream=true&show_border=false&appId=" +
                constants.FB_APP_ID
            }
        ></iframe>
    </div>

    <div id="twitter-toc-feed" className="toc-feed">
        <div
            id="twitter-toc-feed-widget"
            className="twitter-timeline"
            data-chrome="nofooter transparent"
            data-widget-id={constants.TWITTER_WIDGET_ID}
        />
    </div>
</div>

If the plugin needs to be implemented in another tag aside from iframe, please take note of the information provided above.

Answer №1

If you're looking to open a browser window, the Cordova InAppBrowser plug-in is a great option. You can also choose to open the external browser directly.

const reference = window.open('http://example.com', '_blank');

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

Transmitting information after a delay when using ng-keyup in AngularJS

In my Angular app, I am using ng-keyup to search data from my backend. However, the issue is that it sends a request to the server with every key press. Is there a way to configure it to send a post request only after the user has paused or stopped typing? ...

How can you calculate the number of elements in a jQuery array and iterate through each of them?

After extracting a string from a mySQL query with PHP, my AJAX script comes into play. This string is then dissected and placed into a jQuery array. The results are displayed on the screen using .html() The length of this array can range from zero items t ...

Displaying numerous images in React-Native

I have been working on displaying multiple images from the Marvel API. For instance, here is a sample: "images": [ { "path": "http://i.annihil.us/u/prod/marvel/i/mg/e/00/52264475c3499", "extension": "jpg" }, ...

The instance does not have a definition for the property or method "names" that is being referenced during rendering

Currently, I'm working on developing a CRUD application using Vue.js and Firebase. However, I've encountered an error that I can't seem to resolve: [Vue warn]: Property or method "names" is not defined on the instance but referenced during r ...

What is the method for implementing a timeout in axios when utilizing the proxy option?

When using Axios with the proxy option, I wanted to verify bad proxies by setting a timeout on my GET request. Here is the code snippet: let res = await axios.get(`http://somedomain.com`, { timeout: 1500, proxy: { ...

Issues with hover functionality in Javascript, CSS, and HTML

Seeking assistance with my JavaScript, HTML, and CSS development, I ran into an issue while trying to create a hovering function for my webpage. Despite my efforts, the links are not displaying anything when hovered over, and the divs meant for specific ho ...

Preventing the (click) function from being activated during dragging in Angular 10

My div contains an openlayers map setup as shown below: <div id="map" (click)="getInfo($event)" class="map"></div> Whenever I drag my mouse to move around the map, the getInfo function is triggered. Is there a way to make it trigger only when ...

transform PDFs containing completed form fields into images

Despite numerous attempts and trials, I have been unable to find a way to automatically create an image from a PDF file that includes filled form fields. While some libraries do generate an image, the filled form fields always appear blank. Does anyone kn ...

Steps for eliminating double quotes from the start and end of a numbered value within a list

I currently have the following data: let str = "1,2,3,4" My goal is to convert it into an array like this: arr = [1,2,3,4] ...

Transform the words in a string into an array

I'm scratching my head trying to find a solution on Stack Overflow, but nothing seems like the right fit. Can anyone provide some guidance? I need a regex that will enable me to use JavaScript split to break a string into an array. The test case is: ...

The dimensions of the body are set to 100vh in height and width. However, the div inside this body has a width of either 100vh or 100%, but it is not

I am trying to create a div element that has a width equal to the viewport of the browser. However, I am encountering issues when applying the CSS property width:100vh to the body element. Here is my code snippet: body { font-family: Staatliches; fo ...

Creating a fresh array in JavaScript

Attempting to create a new array with specified values. Scenario 1: var x = new Array(3).map(()=>1); At this point, x equals [undefined * 3] Scenario 2: var x = [...new Array(3)].map(()=>1); Now x is [1,1,1] Can anyone provide assistance on wh ...

Why does including a URL string variable in a conditional 'gotoIf' statement in Selenium IDE cause a Syntax error?

I have a task of storing the current URL ( in a variable and then comparing it with another string as a condition within the gotoIf command (part of the gotoIf extension.js): storeLocation || url gotoIf || ${url}=="http://example.com" || label Ho ...

Do not initiate a variable before populating it

Important Note: This query pertains more to design patterns rather than a specific case study. Allow me to illustrate with an example for better clarity: var newArray = []; for(var key in object) newArray.push(object[key]); Is there a way to ...

display the array of arrays as an image using React

Just starting out with react js and I'm working with some data that looks like this: The 'data' variable is an array containing elements, one of which is data[22] with the following structure: data[22] elements. images [4]: 1 ...

Do JavaScript Promises operate asynchronously?

Can we clarify if JavaScript Promise is asynchronous? I've been researching Promise and async programming, particularly with ajax requests. If Promise isn't inherently async, how can we make it so? For instance, consider a function that encapsul ...

What purpose does the dollar sign symbol serve in the JavaScript programming language?

I've been diving into JavaScript and trying to understand the significance of the $ symbol beyond just its use in regular expressions. Despite my research efforts, I haven't been able to uncover much information on this topic. If anyone has any r ...

Creating a dynamic select functionality in Drupal forms

Being more focused on backend development, I am facing a challenge that may be simple for jQuery experts. In Drupal, I have two arrays - one containing names of views and the other having displays for each view. To populate these arrays, here is the code s ...

How can I dynamically update the content of the right side of the side navbar by clicking on navbar links?

I have a side-navigation bar with content on the right side. How can I display specific content on the right side when clicking on a navigation link? For example, only show the name when clicking on the name link and only show the password field when click ...

What is the best way to transfer information (specifically the length of an array of books) from one component to another in Vue

I am currently working on a single page that is responsible for showcasing Books (child component) on the Dashboard (Parent-component). In the DisplayBooks component, the data is fetched from the backend and stored in a books array. I then iterate through ...