react-nativeiframefacebook-iframereact-native-webview

Facebook like button iframe appears very small on react-native webview

I want to show the Facebook Like button on my react-native app to allow users to like the app's Facebook page such that they can receive updates from the app posted on Facebook. I thought of using the Like button iFrame from Facebook on a WebView to avoid integrating the SDK just to have a Like button on the app and I want to add similar buttons for other social media also such as Twitter and YouTube. I created a Like button iFrame on Facebook and used following component to show the iFrame.

import React, { Component } from 'react'
import { SafeAreaView } from 'react-native'
import { WebView } from 'react-native-webview'

class SocialMediaLinksScreen extends Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <WebView
          source={{
            html:
              '<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FGalarmApp%2F&width=200&layout=standard&action=like&size=large&share=false&height=35&appId=1010058565805776" width="600" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>'
          }}
        />
      </SafeAreaView>
    )
  }
}

export default SocialMediaLinksScreen

Below is how it appears: enter image description here

As you can see the button is really small. I have tried different styles and also tried to changed the height and width in the button iFrame but didn't make any difference. Why is the button so small and how can I make it bigger?

Thanks!

Solution

  • You can set the scalesPageToFit to false like this. Setting width and height to "100%" lets the iframe to take in as much space available.

    <SafeAreaView style={{flex: 1}}>
        <WebView
          source={{
            html:
              '<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FGalarmApp%2F&width=200&layout=standard&action=like&size=large&share=false&height=35&appId=1010058565805776" width="100%" height="100%" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>'
          }}
          scalesPageToFit={false}
        />
      </SafeAreaView>