DEV Community: Deri Kurniawan

Enhance Your Website's Social Media Friendliness with the Open Graph Protocol

Deri Kurniawan — Mon, 06 Nov 2023 15:11:15 +0000

How to Make Your Website More Social Media-Friendly with Open Graph Protocol

Introduction:

In today's digital age, social media plays a significant role in driving traffic to websites and increasing online visibility. To ensure that your website looks its best when shared on social media platforms like Facebook, Twitter, and LinkedIn, you can utilize the Open Graph Protocol. In this tutorial, we'll walk you through the steps to implement the Open Graph Protocol on your website and make it more social media-friendly.

What is the Open Graph Protocol?

The Open Graph Protocol is a set of meta tags that you can add to your website's HTML to control how your content appears when shared on social media. It allows you to specify various information, such as the title, description, and image, to make your links more appealing and engaging when shared on platforms like Facebook.

Step 1: Understanding Open Graph Tags

Before implementing Open Graph Protocol, it's essential to understand the key Open Graph tags you can use. Some of the most common ones include:

og:title: The title of your content.
og:description: A short description of your content.
og:image: The image that represents your content when shared.
og:url: The URL of the page being shared.
og:type: The type of content (e.g., article, website, video).

Step 2: Adding Open Graph Tags to Your Website

To make your website more social media-friendly, follow these steps to add Open Graph tags to your website's HTML:

Access your website's code: You'll need access to the HTML code of your website. You can do this through a website builder or by editing your website's source code directly.
Locate the <head> section: In your HTML code, find the <head> section, which is where meta tags are typically placed. This section is usually located between the <html> and <body> tags.
Add Open Graph tags: Add the Open Graph meta tags within the <head> section of your HTML. Here's an example:

<head>
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="A brief description of your content">
  <meta property="og:image" content="URL to your featured image">
  <meta property="og:url" content="URL of the page being shared">
  <meta property="og:type" content="website">
</head>

Example When Sharing Your Website URL:

It will appear as shown below:

NOTE: The OG image will only appear if your HTML has been deployed and can be accessed globally. It will not work on a local environment such as http://localhost

Step 4: Monitoring and Updating

Social media trends and platforms can change, so it's crucial to periodically review and update your Open Graph tags to ensure that your website remains social media-friendly. Regularly check how your links appear on various social media platforms and make adjustments as needed.

Conclusion

Implementing the Open Graph Protocol on your website is a valuable step in making your content more shareable and visually appealing on social media. By providing the right information and images, you can increase the chances of your website's content being shared and engaged with on social platforms.

Resizing Your Installed Linux Partition: A Step-by-Step Guide

Deri Kurniawan — Mon, 06 Nov 2023 14:46:12 +0000

Resizing your Linux partition can be a bit tricky, especially for new users, especially when you're using a dual-boot setup. To make it clear and concise, here's an updated step-by-step guide using Ubuntu as an example.

Please note that if you're not using Ubuntu, the specific Linux distribution mentioned in this guide (Ubuntu) should be replaced with the name of the Linux distribution you have installed, such as Kali, Fedora, or any other distribution.

Note: Always back up your important data before attempting any disk partition changes.

Step 1: Insert your bootable Ubuntu USB.

Step 2: Start or restart your computer and access the boot menu. The key to access the boot menu varies depending on your computer's manufacturer, but it's often something like F12 or F2. Consult your computer's documentation or perform an online search to find the correct key for your machine.

Step 3: Select "Try Ubuntu without installing" from the boot menu. If you can't find this option, choose "Install Ubuntu" instead. After selecting "Install Ubuntu," you'll be directed to the installation menu, where you should then see the "Try Ubuntu without installing" option.

Step 4: Once you're in the live Ubuntu environment, open GParted.

Step 5: In GParted, locate your Ubuntu partition (usually identified as ext4 or a similar filesystem), and carefully resize it to create more space. Ensure that you leave enough space for Ubuntu to function correctly; if in doubt, consult with a knowledgeable friend or online resources to determine the optimal size.

That's it! You've successfully resized your Ubuntu partition. After this, you can proceed with the installation or other tasks as needed. Remember to always back up your data and proceed with caution when resizing partitions to avoid data loss.

Request All Permissions Android React Native

Deri Kurniawan — Fri, 05 Aug 2022 09:11:00 +0000

Hello! I will show you how to easily request all permissions on Android.

Installation

Initial our project with react-native

npx react-native init myapp

Request Permission Preparation

Before we start coding on App.js file. We need to write permission on AndroidManifest.xml first. you can find at myapp/android/app/src/main/AndroidManifest.xml
paste this code on inner manifest tag.
Also check out full code on My Gist

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.READ_CALENDAR" />
  <uses-permission android:name="android.permission.WRITE_CALENDAR" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.READ_CONTACTS" />
  <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  <uses-permission android:name="android.permission.GET_ACCOUNTS" />
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  <uses-permission android:name="android.permission.CALL_PHONE" />
  <uses-permission android:name="android.permission.READ_CALL_LOG" />
  <uses-permission android:name="android.permission.WRITE_CALL_LOG" />
  <uses-permission android:name="com.android.voicemail.permission.ADD_VOICEMAIL" />
  <uses-permission android:name="android.permission.USE_SIP" />
  <uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS" />
  <uses-permission android:name="android.permission.BODY_SENSORS" />
  <uses-permission android:name="android.permission.SEND_SMS" />
  <uses-permission android:name="android.permission.RECEIVE_SMS" />
  <uses-permission android:name="android.permission.READ_SMS" />
  <uses-permission android:name="android.permission.RECEIVE_WAP_PUSH" />
  <uses-permission android:name="android.permission.RECEIVE_MMS" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
  <uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
  <uses-permission android:name="android.permission.BLUETOOTH_ADVERTISE" />
  <uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION" />
  <uses-permission android:name="android.permission.ACCEPT_HANDOVER" />
  <uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
  <uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" />
  <uses-permission android:name="android.permission.READ_PHONE_NUMBERS" />
  <uses-permission android:name="android.permission.UWB_RANGING" />

Let's Coding

So, after we write permission that what we need.
now we can coding to request permission.

Delete all code on App.js and paste this code below

import React from 'react';
import {Button, Linking, PermissionsAndroid, ScrollView} from 'react-native';

const PERMISSIONS_TYPE = [
  'READ_CALENDAR',
  'WRITE_CALENDAR',
  'CAMERA',
  'READ_CONTACTS',
  'WRITE_CONTACTS',
  'GET_ACCOUNTS',
  'ACCESS_FINE_LOCATION',
  'ACCESS_COARSE_LOCATION',
  'ACCESS_BACKGROUND_LOCATION',
  'RECORD_AUDIO',
  'READ_PHONE_STATE',
  'CALL_PHONE',
  'READ_CALL_LOG',
  'WRITE_CALL_LOG',
  'ADD_VOICEMAIL',
  'USE_SIP',
  'PROCESS_OUTGOING_CALLS',
  'BODY_SENSORS',
  'SEND_SMS',
  'RECEIVE_SMS',
  'READ_SMS',
  'RECEIVE_WAP_PUSH',
  'RECEIVE_MMS',
  'READ_EXTERNAL_STORAGE',
  'WRITE_EXTERNAL_STORAGE',
  'BLUETOOTH_CONNECT',
  'BLUETOOTH_SCAN',
  'BLUETOOTH_ADVERTISE',
  'ACCESS_MEDIA_LOCATION',
  'ACCEPT_HANDOVER',
  'ACTIVITY_RECOGNITION',
  'ANSWER_PHONE_CALLS',
  'READ_PHONE_NUMBERS',
  'UWB_RANGING',
];

async function requestPermission(PERMISSION_TYPE) {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS[PERMISSION_TYPE],
    );

    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log(`You can use ${PERMISSION_TYPE}`);
    } else {
      console.log(`${PERMISSION_TYPE} permission denied`);
    }
  } catch (err) {
    console.warn(err);
  }
}

export default function App() {
  return (
    <ScrollView>
      {PERMISSIONS_TYPE.map((TYPE, index) => (
        <Button
          key={index}
          color={index % 2 === 0 ? 'dodgerblue' : 'blue'} // to make odd event button color
          title={`Allow ${TYPE}`}
          onPress={() => requestPermission(TYPE)}
        />
      ))}
      <Button
        color="black"
        title="Open Settings"
        onPress={() => Linking.openSettings()} // opens settings your app
      />
    </ScrollView>
  );
}

Save it and runnning the app using terminal

npm run android

Result

The result will be look like this:

and if we click a button and grant or denied. The information will appear on your terminal:

that's it! ask me if you have an question

Source Reference: React Native Android Permission Documentation
Source Code: Deri Kurniawan Gist Github