comsa/facebook-bundle

连接到 Facebook API 并获取用户动态。

维护者

详细信息

gitlab.com/comsa/packages/comsa-facebook-bundle

源代码

问题

安装: 41

依赖项: 0

建议者: 0

安全: 0

星标: 0

分支: 0

类型:sulu-bundle

3.1.1 2022-07-20 14:58 UTC

Requires

MIT a88be1313306884c9d7c2dcf421943e2b9468def

  • Tommy Rooryck <tommy.woop@comsa.be>

This package is auto-updated.

Last update: 2024-09-20 19:35:22 UTC

README

composer require comsa/facebook-bundle

设置

  1. 在 .env.local 中创建以下参数
COMSA_FACEBOOK_BUNDLE_API_URL=https://graph.facebook.com
COMSA_FACEBOOK_BUNDLE_PAGE_ID=YOUR-PAGE-ID
COMSA_FACEBOOK_BUNDLE_INSTAGRAM_ID=YOUR-INSTAGRAM-USER-ID
COMSA_FACEBOOK_BUNDLE_APP_ID=YOUR-APP-ID
COMSA_FACEBOOK_BUNDLE_APP_SECRET=YOUR-APP-SECRET
COMSA_FACEBOOK_BUNDLE_ACCESS_TOKEN=YOUR-ACCESS-TOKEN
  1. 登录： https://developers.facebook.com/
  2. 创建一个应用程序并将 Instagram Graph API 添加为产品。
    (确保您的 Facebook 页面和 Instagram 页面已链接)
  3. 转到基本设置并将您的 app_id 和 app_secret 分配给 .env.local 中的相应变量
  4. 在基本设置中，向下滚动并添加一个平台
  5. 添加将使用此应用程序的域名
  6. 在： https://developers.facebook.com/tools/explorer/ 生成访问令牌
    确保添加以下权限：pages_show_list, pages_read_engagement, pages_read_user_content + 所有 Instagram 权限
  7. 使用生成的访问令牌生成一个长期有效的用户访问令牌： https://developers.facebook.com/tools/debug/accesstoken 确保显示“此新的长期访问令牌永远不会过期”消息！如果消息已显示，则跳过步骤 9！

  8. 使用生成的访问令牌在 Postman 中进行以下请求

    https://graph.facebook.com/{user-id}/accounts?access_token={long-lived-user-access-token}

    获取用户 ID：从调试信息 --> 应用范围用户 ID

  9. 将响应中的 access_token 分配给 .env.local 中的相应变量

  10. 将您的页面 ID 分配给 .env.local 中的相应变量。这可以在 Facebook 上找到。转到页面并点击关于。将您的 Instagram 用户 ID 分配给 .env.local 中的相应变量。这可以通过在 Graph API 中进行以下请求来找到： https://graph.facebook.com/{pageId}?fields=instagram_business_account&access_token={access_token}
  11. 确保权限设置正确，这可以通过 Facebook 上的商业集成进行检查： https://#/help/405094243235242
  12. 更新数据库
    php bin/console doctrine:schema:update -f

配置 Sulu

在 config/routes_admin.yaml

comsa_facebook_bundle_api:
  type: rest
  resource: "@FacebookBundle/Resources/config/routes/admin.yaml"
  prefix: /admin/api

Facebook-post 块模板

<?xml version="1.0" ?>
<type name="facebook_post" xmlns="http://schemas.sulu.io/template/template"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">
    <meta>
        <title lang="en">Facebook Posts</title>
        <title lang="nl">Facebook Posts</title>
    </meta>
    <properties>

        <property name="loadType" type="single_select">
            <meta>
                <title lang="en">How do you want to load the posts?</title>
                <title lang="nl">Hoe wil je de posts ophalen?</title>
            </meta>

            <params>
                <param name="default_value" value="dynamically"/>

                <param name="values" type="collection">
                    <param name="dynamic">
                        <meta>
                            <title lang="en">Dynamically</title>
                            <title lang="nl">Dynamisch</title>
                        </meta>
                    </param>

                    <param name="static">
                        <meta>
                            <title lang="en">Static posts</title>
                            <title lang="nl">Vaste posts</title>
                        </meta>
                    </param>
                </param>
            </params>
        </property>

        <property name="facebook_post_selection" type="facebook_post_selection" visibleCondition="__parent.loadType == 'static'">
            <meta>
                <title lang="en">Facebook Post</title>
                <title lang="nl">Facebook Post</title>
            </meta>
        </property>

        <property name="amount" type="number" visibleCondition="__parent.loadType == 'dynamic'">
            <meta>
                <title lang="en">Amount of posts</title>
                <title lang="nl">Aantal posts</title>
            </meta>
            <params>
                <param name="min" value="0" />
            </params>
        </property>

        <xi:include href="includes/width.xml"/>
    </properties>
</type>

Instagram post 块模板

<?xml version="1.0" ?>
<type name="instagram_post" xmlns="http://schemas.sulu.io/template/template"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">
    <meta>
        <title lang="en">Instagram Posts</title>
        <title lang="nl">Instagram Posts</title>
    </meta>
    <properties>

        <property name="loadType" type="single_select">
            <meta>
                <title lang="en">How do you want to load the posts?</title>
                <title lang="nl">Hoe wil je de posts ophalen?</title>
            </meta>

            <params>
                <param name="default_value" value="dynamically"/>

                <param name="values" type="collection">
                    <param name="dynamic">
                        <meta>
                            <title lang="en">Dynamically</title>
                            <title lang="nl">Dynamisch</title>
                        </meta>
                    </param>

                    <param name="static">
                        <meta>
                            <title lang="en">Static posts</title>
                            <title lang="nl">Vaste posts</title>
                        </meta>
                    </param>
                </param>
            </params>
        </property>

        <property name="instagram_post_selection" type="instagram_post_selection" visibleCondition="__parent.loadType == 'static'">
            <meta>
                <title lang="en">Instagram Post</title>
                <title lang="nl">Instagram Post</title>
            </meta>
        </property>

        <property name="amount" type="number" visibleCondition="__parent.loadType == 'dynamic'">
            <meta>
                <title lang="en">Amount of posts</title>
                <title lang="nl">Aantal posts</title>
            </meta>
            <params>
                <param name="min" value="0" />
            </params>
        </property>

        <xi:include href="includes/width.xml"/>
    </properties>
</type>

前端

Facebook 动态示例模板

{% if block.loadType == "static" %}
  {% set facebookPosts = block.facebook_post_selection %}
{% else %}
  {% set facebookPosts = parse_facebook_widget("facebook", block.amount) %}
{% endif %}

  <div class="facebook-posts">
    <div class="row">
      {% for facebookPost in facebookPosts %}
        <div class="col-md-3">
          <div class="card post">
            {% if facebookPost.attachments %}
              {% set attachments = unserialize_attachments(facebookPost.attachments) %}
              <img src="{{ attachments[0] }}" class="card-img-top" alt="{{ facebookPost.id }}-image">
            {% endif %}
            <div class="card-body post-content">
              <p class="card-text">
                {{ facebookPost.message }}
              </p>
              {% if facebookPost.url %}
                <a href="{{ facebookPost.url }}" class="btn btn-primary">Go to post</a>
              {% endif %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>

Instagram 动态示例模板

{% if block.loadType == "static" %}
  {% set instagramPosts = block.instagram_post_selection %}
{% else %}
  {% set instagramPosts = parse_facebook_widget("instagram", block.amount) %}
{% endif %}

<div class="instagram-posts">
  <div class="row">
    {% for instagramPost in instagramPosts %}
      <div class="col-md-3">
        <div class="card post">
          {% if instagramPost.media %}
            {% if instagramPost.mediaType == "VIDEO" %}
              <video style="height: 100%; width: 100%;" controls>
                <source src="{{ instagramPost.media }}" type="video/mp4">
              </video>
            {% else %}
              <img src="{{ instagramPost.media }}" class="card-img-top" title="{{ instagramPost.id }}" alt="{{ instagramPost.id }}-image">
            {% endif %}
          {% endif %}
          <div class="card-body post-content">
            <p class="card-text">
              {{ instagramPost.caption }}
            </p>
            {% if instagramPost.url %}
              <a href="{{ instagramPost.url }}" class="btn btn-primary">Go to post</a>
            {% endif %}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

命令

从页面获取动态

php bin/console comsa:facebook:get-facebook-feed {amount}

获取 Instagram 动态

php bin/console comsa:facebook:get-instagram-posts {amount}

参数数量确定获取多少条动态。默认情况下，命令检索 100 条动态。