HomeHow To How to Add Facebook Open Graph Meta Data Without Plugins

How to Add Facebook Open Graph Meta Data Without Plugins

Do you want to add Facebook open graph meta data on your WordPress website? You can also add this method by using latest plugins just one click but somebody doesn’t like to use plugins and they are just love to using on codes, And here are me to talking only from custom code for using open graph meta data.

Why you need to add Facebook open graph meta data on your WordPress website? Because Facebook is pulling in the right data for your posts when they are shared on Facebook. When you trying to Share any article from your website to Facebook wall or anywhere on Facebook then FB Open graph automatic catch from your website’s right thumbnail image, title, description etc.

Anyway in this article i will share you how you can add Facebook open graph meta data information in your WordPress themes which will solve all of those issues for example look at the below ready to for share article on Facebook after adding open graph information inside themes.

Illustration For How to Add Facebook Open Graph Meta Data Without Plugins
Illustration For How to Add Facebook Open Graph Meta Data Without Plugins

First of all copy the below whole code and paste into your theme’s functions.php file

add_action(‘wp_head’, ‘facebook_opengraph’);
function facebook_opengraph() {if( is_single() || is_page() ) {$post_id = get_queried_object_id();$url = get_permalink($post_id);
$title = get_the_title($post_id);
$site_name = get_bloginfo(‘name’);$description = wp_trim_words( get_post_field(‘post_content’, $post_id), 25 );

$image = get_the_post_thumbnail_url($post_id, ‘full’);
if( !empty( get_post_meta($post_id, ‘og_image’, true) ) ) $image = get_post_meta($post_id, ‘og_image’, true);

$locale = get_locale();
echo ‘<meta name=”description” content=”‘ . esc_attr($description) . ‘”>’;
echo ‘<meta name=”keywords” content=”‘ . esc_attr($title) . ‘” />’;
echo ‘<meta property=”og:locale” content=”‘ . esc_attr($locale) . ‘” />’;

echo ‘<meta property=”og:type” content=”website” />’;
echo ‘<meta property=”og:title” content=”‘ . esc_attr($title) . ‘” />’;
echo ‘<meta property=”og:description” content=”‘ . esc_attr($description) . ‘” />’;
echo ‘<meta property=”og:url” content=”‘ . esc_url($url) . ‘” />’;
echo ‘<meta property=”og:site_name” content=”‘ . esc_attr($site_name) . ‘” />’;

if($image) echo ‘<meta property=”og:image” content=”‘ . esc_url($image) . ‘” />’;

echo ‘<meta property=”fb:app_id” content=”insertHereFBappID” />’;
// Twitter Card
echo ‘<meta name=”twitter:card” content=”summary_large_image” />’;
echo ‘<meta name=”twitter:site” content=”@YourTwitterUsername” />’;
echo ‘<meta name=”twitter:creator” content=”@YourTwitterUsername” />’;

}

}

How to insert above code inside functions.php file

Method 1: Direct from WordPress Dashboard

Step 1: Login to your WordPress Dashboard with your administrator username and password

Step 2: Now locate the “Appearance” options from left sidebar and click on “Theme Editor” options from appearance parent menu

WordPress Themes Editor functions
WordPress Themes Editor functions

Step 3: Now find the functions.php file from right sidebar and click on it.

Functions file for add Facebook open graph meta information
Functions file for add Facebook open graph meta information

Finally copy the above give code and paste inside functions.php file and save your work from “Update File” and it is done.

Method 2: Add from cPanel/Hosting Server

Step 1: Login to your cPanel with server username and password (Note: if you have not access on this then you can ask your Hosting Provide or Web Developer)

Step 2: Now go to “File Manager” from FILES section and click on it

Step 3: Now click on “www” folder

Step 4: Now direct go to functions.php file inside your installed theme folder, For example: wp-content => themes => YourThemsName => functions.php and now right click on functions.php file and edit it.

Step 5: Finally paste the above open graph code inside functions file and save it.

For your kind information please:

echo ‘<meta name=”twitter:site” content=”@YourTwitterUsername” />’;
echo ‘<meta name=”twitter:creator” content=”@YourTwitterUsername” />’;

Change your twitter username with highlighter bold text.

I hope this article is worked for you.

In the end

I hope you have found this article helpful. Let us me your opinion or questions if any through the comment form in below or use this form to ask your question.

You May Also Like

About the Author: Kedar Adhikari

I am WordPress Themes developer and designer and also any type of website design with minimum cost. for more information you can contact me on email gojinepal@gmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © 2020 My WP Helper. All rights reserved.