# FAN (Facebook Audience Network)

## 직접 설정

* fan\_native\_ad\_unit\_layout.xml 샘플

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fan_ad_unit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <com.facebook.ads.MediaView
            android:id="@+id/fan_native_ad_icon"
            android:layout_width="35dp"
            android:layout_height="35dp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="5dp"
            android:paddingRight="5dp">

            <TextView
                android:id="@+id/fan_native_ad_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textColor="@android:color/black"
                android:textSize="15sp" />

            <TextView
                android:id="@+id/fan_native_ad_sponsored_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textColor="@android:color/darker_gray"
                android:textSize="12sp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/fan_ad_choices_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="end"
            android:orientation="horizontal" />

    </LinearLayout>

    <com.facebook.ads.MediaView
        android:id="@+id/fan_native_ad_media"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:orientation="vertical">

            <TextView
                android:id="@+id/fan_native_ad_social_context"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textColor="@android:color/darker_gray"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/fan_native_ad_body"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center_vertical"
                android:lines="2"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

        </LinearLayout>

        <Button
            android:id="@+id/fan_native_ad_call_to_action"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:background="#4286F4"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:textColor="@android:color/white"
            android:textSize="12sp"
            android:visibility="gone" />

    </LinearLayout>

</LinearLayout>
```

xml에서 생성한 ui component를 sdk에서 제공하는 <mark style="color:red;">`setFacebookAudienceViewBinder`</mark> API를 이용해 아래와 같이 설정해 줍니다.

```java
FacebookViewBinder facebookViewBinder 
	= new FacebookViewBinder.Builder(R.id.fan_native_ad_view, R.layout.fan_native_ad_unit_layout)
        .adIconViewId(R.id.fan_native_ad_icon)
        .adChoicesLayoutId(R.id.fan_ad_choices_container)
        .callToActionId(R.id.fan_native_ad_call_to_action)
        .adBodyViewId(R.id.fan_native_ad_body)
        .mediaViewId(R.id.fan_native_ad_media)
        .sponsoredViewId(R.id.fan_native_ad_sponsored_label)
        .titleViewId(R.id.fan_native_ad_title)
        .socialContextId(R.id.fan_native_ad_social_context)
        .build();

adPopcornSSPNativeAd.setFacebookAudienceViewBinder(facebookViewBinder);
```

{% hint style="danger" %}
FacebookViewBinder Builder 생성 시, <mark style="color:red;">`view id(R.id.fan_native_ad_view)`</mark>와 <mark style="color:red;">`layout id(R.layout.fan_native_ad_unit_layout)`</mark>는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.
{% endhint %}

{% hint style="info" %}
자세한 사항은 아래 링크의 FAN 네이티브 가이드 참고바랍니다.

<https://developers.facebook.com/docs/audience-network/android-native/>
{% endhint %}
