A "Share" button has been installed as Facebook's "Like" button for external sites has been abolished (program modification of HPB's WordPress plugin)

⌛Time it takes to read this article: 3 minutes

update Last updated: July 20, 2026 at 11:38 AM

As announced, Facebook's "Like" and "Comment" buttons (social plugin) for external sites will beAbolished as of February 10, 2026It was done.

As a result, the "Like" button that was installed on this site is no longer displayed, so we have decided to install a "Share" button instead.

The code for the share button can be found in Meta's developer tools Share Button – Social Plugin You can get it from Please note that the number of shares is not currently displayed.

On this site, changes to the share button involve modifying the WordPress plugin (hpb Dashboard) program of the homepage builder (HPB) provided by Just System.

How to install a share button

To display the share button, modify the php program "social_buttons.php" for displaying social buttons in the hpb Dashboard plugin as follows.
Comment out the old code (lines 1-5), add the new code (lines 8 onwards), and replace the "Like" button display in the old code with a "Share" button.

php
				// Facebookいいね!ボタン表示 : 2026.02.11 削除
				//$facebook_like = '<div id="fb-root"></div>
				//<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v24.0&appId='.$fb_appid.'&autoLogAppEvents=1" nonce="FOKrbAYI"></script>

				//<div class="fb-like" data-href="'.$STR_DATA_HREF.'" data-send="false" data-layout="'.$facebook_like_layout.'" data-width="'.$facebook_like_width.'" data-size="small" data-share="true"></div>'."\n";
				
				
				// Facebookシェアボタン表示 : 2026.02.11 追加
				$facebook_like =  '<div id="fb-root"></div>
				<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v25.0&appId='.$fb_appid.'"></script>

				<div class="fb-share-button" data-href="'.$STR_DATA_HREF.'" data-send="false" data-layout="'.$facebook_like_layout.'" data-width="'.$facebook_like_width.'" data-size="small" data-share="true"></div>'."\n";

Basically, it seems like all you have to do is change the class name ‘fb-like’ to ‘fb-share-button’. However, parameters dedicated to the "Like" button will not work.
Note that if you only want to display the Facebook share button, it is not necessary to specify the app ID (variable: $fb_appid).

The number on the share button indicates the "total number of times the page or post was shared or cited" through tools such as SNS. Specifically, the total number of likes, shares, and comments is displayed.

This code is written based on Facebook's "Social Plug-in (JavaScript SDK)", but please note that the share count function has been effectively abolished.

Set new app ID on hpb dashboard

In Just System HPB, if you want to change the app ID that has already been set to a new app ID, click ``Like!'' from the ``Social Button Settings > Insertable Buttons'' menu on the ``HPB Dashboard'' shown in the featured image in the title.

On this settings screen, you can also set or change the user ID and application ID (the value of the variable “$fb_appid” will be changed) by deleting the “Like” button from the menu “Social Button Settings > Preview” and then dropping and dragging the button again.

For user ID, you must specify the Facebook user ID, and the settings here will also be reflected in the Facebook ogp meta tag as shown below.

html
<meta property="fb:admins" content="ユーザーID"/>
<meta property="fb:app_id" content="アプリケーションID"/>


Our WordPress environment is based on the JustSystems hpb22 WordPress theme program, which has already been updated and is no longer supported, with our own customizations added to the parent theme.

However, considering the possibility of future theme updates due to manufacturer releases, we recommend that you avoid this as much as possible and create and customize child themes as much as possible.

Get a new app ID with Meta for Developers

On this site, the app ID type was registered as "Business" in "Meta for Developers". However, this app type required regular procedures to update access to data, which was very cumbersome to operate, so we deleted this app ID and created a new app ID for individual use that does not require update procedures.

Latest Meta for Developers , the new app creation screen has been updated to allow you to select "Use Case" as the app type.
Here, select "Create an app without a use case" from "Filter ≫ Other", then proceed with creating the app ID, and select "Do not link business portfolio at this time" for the "Business" tag.

If you create an app ID with this setting, the app mode toggle switch ``Development/Live'' that was displayed in the previous ``Meta for Developers'' will not be displayed.
Also, I deleted the "Business Portfolio" I had created because it was no longer necessary.

In addition, if you just want to display and install a Facebook "share button" on your website or blog, there is generally no need to add or set a "use case" in the Meta for Developers app settings or undergo an app review.

Added on 2026.04.10 / Updated on 2026.06.23
I would like to add some additional information to the above matter. If you want to display the number of shares with the share button, you need to obtain an "app ID" and select a "use case". In that case, the current specifications require business authentication to Meta to use the app.
Meta's AI chat is the point of contact for the business certification process, but cases that do not pass the AI ​​review will either be rejected or placed in a pending human review queue for re-examination.
In particular, it takes a considerable amount of time to authenticate an individual, and it seems that in most cases it takes up to six weeks or more, and in most cases it is left as "under review".
Because Meta is a huge vertical organization, Meta's AI chat is split between multiple departments.
As a result, even if you inquire as to why the process is not progressing at all during the business certification process, you will be referred to another point of contact because they are not in charge of the matter and do not have any knowledge of the matter, or you will end up being passed around between AIs.
In any case, the meta business authentication process is complicated and mysterious, so we recommend getting help from AI during the process. My feeling is that Copilot is more knowledgeable than Gemini when it comes to submitting to the meta.

Facebook's system (Graph API) will function properly only after passing the business verification review and switching the app to "live mode (public)", but there is currently no guarantee that the number of shares will be displayed correctly.
Therefore, if you do not care about displaying the number of shares, please change the contents of the data-layout of the PHP code to “button” (or “icon”) without a number frame as shown below.

php
data-layout="button"


In addition, instead of using the theme's social button function like the one above, you can use the dedicated social button display plugin "AddToAny Share ButtonsThere is also a way to install and use ``.

2026.07.01 Added
As per the article below, we have implemented WordPress system optimization andCross-site scripting (XSS)vulnerability (JVNDB-2022-011771) has been uninstalled and the share button display has been replaced with the plugin "AddToAny Share Buttons". For information on uninstalling hpb Dashboard, please refer to this section in the article 👉 hpb Dashboard⇒ Uninstall

2026.07.02 Added
For your reference, I will publish the last chat I had with Meta here. 記事表示(Article display)

2026.04.11 Added

Inherit old likes with Rank Math SEO

Our site recently installed the latest SEO plugin. Rank Math SEO has been introduced.

As a result, there was a problem where the Rank Math SEO OGP tag and the OGP tag output by the Just System HPB22 theme were being output twice, so we modified the system to leave the Rank Math SEO tag as shown below.

Support for OGP tags in past articles that do not support SSL

In order to make past articles that are not SSL compatible (before February 6, 2020) compatible with Facebook's crawler, add a snippet to the theme's functions.php that rewrites the OGP tag URL output by Rank Math SEO from "https://" to "http://" as shown below.

php
/**
 * Rank Mathのog:urlを、過去記事のみhttpに書き換える
 */
add_filter( 'rank_math/opengraph/facebook/og_url', function( $url ) {
    // 投稿の公開日を取得
    $post_date = get_the_date('Ymd');
    
    // 2020年2月6日以前、かつトップページ以外の場合
    if ( $post_date && 20200206 >= intval($post_date) ) {
        if ( !is_front_page() ) {
            // https を http に置換
            $url = str_replace( 'https://', 'http://', $url );
        }
    }
    return $url;
});

Disable OGP items that overlap with Rank Math output by the theme

Modify the social_buttons.php program for displaying HPB22's social buttons as follows. Leave the tags related to the Facebook app and comment out the marked sections.

php
<meta property="og:title" content="<?php the_title(); ?> | <?php bloginfo('name'); ?>"/>
<meta property="og:url" content="<?php echo esc_url($STR_OGP_URL); ?>"/>
<meta property="og:image" content="<?php echo esc_url(hpb_get_thumbnail_url($id,'large')); ?>"/>
<meta property="og:image" content="<?php echo esc_url(hpb_get_thumbnail_url($id,'medium')); ?>"/>
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt()); ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="og:type" content="<?php hpb_get_og_type() ?>"/>

<?php $fb_admins = get_option('hpb_social_facebook_admins'); if( $fb_admins != '' ) {?>
<meta property="fb:admins" content="<?php echo $fb_admins; ?>"/>
<?php } $fb_appid = get_option('hpb_social_facebook_app_id'); if( $fb_appid != '' ) {?>
<meta property="fb:app_id" content="<?php echo $fb_appid; ?>"/>

Modify the above code as below. Note that if you have set the user ID and application ID in RankMath SEO, you can delete the marked line as it is no longer needed.

php
<?php if(false): // Rank Mathと重複するため非表示 ?>
<meta property="og:title" content="<?php the_title(); ?> | <?php bloginfo('name'); ?>"/>
<meta property="og:url" content="<?php echo esc_url($STR_OGP_URL); ?>"/>
<meta property="og:image" content="<?php echo esc_url(hpb_get_thumbnail_url($id,'large')); ?>"/>
<meta property="og:image" content="<?php echo esc_url(hpb_get_thumbnail_url($id,'medium')); ?>"/>
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt()); ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="og:type" content="<?php hpb_get_og_type() ?>"/>
<?php endif; ?>
<?php // ここから下は出力される ?>

<?php $fb_admins = get_option('hpb_social_facebook_admins'); if( $fb_admins != '' ) {?>
<meta property="fb:admins" content="<?php echo $fb_admins; ?>"/>
<?php } $fb_appid = get_option('hpb_social_facebook_app_id'); if( $fb_appid != '' ) {?>
<meta property="fb:app_id" content="<?php echo $fb_appid; ?>"/>

Leave a Reply